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
 */

持續更新中...