fis3学习

fis3的3大核心概念：资源定位，内容嵌入和依赖声明。

资源定位

fis3会分离开发环境和部署环境中的文件资源路径，再编译打包后的文件中所有的与路径有关的都将按照我们的配置来替换。开发者根据相对路径进行编码，编译后的文件会生成对应的绝对路径url，总结一句话就是资源url的替换。

内容嵌入

fis3支持内容嵌入，可以通过相应的指令和方法，将外部资源成为内嵌资源

html

// 通过?__inline嵌入
...
<script src="demo.js?__inline"></script>
...

js

// 通过__inline()方法嵌入
var img = __inline('demo.jpg');  // 嵌入base64格式图片;
var css = __inline('demo.js');  // 嵌入js文件;
__inline('demo.js');  // 嵌入js文件;

css

// 通过?__inline嵌入
@import url('demo.css?__inline');

xx {
    background: url('demo.jpg?__inline');
}

声明依赖

fis3可以通过注释的形式来声明文件的依赖，声明后的依赖在打包编译后会生成一个映射关系表。

// 在html中
<!--
    @require demo.js
    @require "demo.css"
-->

// 在js中
/**
 * @require demo.css
 * @require list.js
 */
 
 // 在css中
 /**
 * demo.css
 * @require reset.css
 */

持续更新中...