FIS3學習

針對公司專案的配置檔案學習。
大部分資料從FIS3官方文件整理。

FIS3 是面向前端的工程構建工具。解決前端工程中效能優化、資源載入（非同步、同步、按需、預載入、依賴管理、合併、內嵌）、模組化開發、自動化工具、開發規範、程式碼部署等問題。

文章目錄

• FIS3學習
• FIS3：glob
• 常用規則
• 捕獲分組
• 特殊用法（類CSS偽類）
• 配置
• 配置介面
• `fis.set(key, value)`
• `fis.get(key)`
• `fis.match(selector, props[, important])`
• `fis.media(mode)`
• `fis.plugin(name [, props [, position]])`
• [配置屬性][1]

FIS3：glob

常用規則

• *匹配0或多個除了/以外的字元
• ?匹配單個除了/以外的字元
• **匹配多個字元包括/
• {}可以讓多個規則用,分隔，起到或者的作用
• ! 出現在規則的開頭，表示取反。即匹配不命中後面規則的檔案

1. 需要注意的是，fis 中的檔案路徑都是以/ 開頭的，所以編寫規則時，請儘量嚴格的以 / 開頭。
2. 當設定規則時，沒有嚴格的以/ 開頭，比如 a.js, 它匹配的是所有目錄下面的 a.js, 包括：/a.js、/a/a.js、/a/b/a.js。 如果要嚴格只命中根目錄下面的 /a.js, 請使用fis.match('/a.js')。
3. 另外/foo/*.js， 只會命中 /foo 目錄下面的所有 js 檔案，不包含子目錄。 而 /foo/**/*.js 是命中所有子目錄以及其子目錄下面的所有 js 檔案，不包含當前目錄下面的 js 檔案。 如果需要命中 foo 目錄下面以及所有其子目錄下面的 js 檔案，請使用 /foo/**.js
   。

捕獲分組

我們可以用 $1, $2, $3 來代表相應的捕獲分組。其中 $0 代表的是 match 到的整個字串。

fis.match('/a/(**.js)', {
 release: '/b/$1' // $1 代表 (**.js) 匹配的內容
});

fis.match('/a/(**.js)', {
 release: '/b/$0' // $0 代表 /a/(**.js) 匹配的內容
});

特殊用法（類CSS偽類）

• ::package用來匹配 fis 的打包過程。
• ::text用來匹配文字檔案。
  如果你希望命中的檔案型別不在列表中，請通過fis.set('project.fileType.text') 擴充套件，多個字尾用 , 分割。

fis.set('project.fileType.text', 'cpp,hhp');

• ::image用來匹配檔案型別為圖片的檔案。（如果要新增格式與::text一樣）
• *.html:js用來匹配命中的 html 檔案中的內嵌的 js 部分。
• *.html:css用來匹配命中的 html 檔案中的內嵌的 css 部分。
• *.html:inline-style用來匹配命中的 html 檔案中的內聯樣式。可以配置些 auto prefix 之類的外掛。

配置

預設情況下，配置檔案寫到 fis-conf.js檔案中，此檔案放到專案的根目錄下，或說有此檔案的目錄被看做是專案根目錄。

當兩個規則之間匹配的檔案相同時，後設置的可以覆蓋前面設定的屬性，如果前面規則沒有某屬性則追加。

配置介面

fis.set(key, value)

設定一些配置。設定的值通過fis.get()獲取。

• key
  任意字串，但系統佔用了 project、namespace、modules、settings 它們在系統中有特殊含義。
  當字串以. 分割的，.字元後的字元將會是字元前字元同名物件的鍵。
• value
  任意字串。

fis.get(key)

獲取已經配置的屬性，和fis.set()成對使用。

• key 任意字串

// fis.set('namespace', 'common')
var ns = fis.get('namespace');

// fis.set('a.b.c', 'd')
fis.get('a'); // => {b:{c: 'd'}}
fis.get('a.b'); // => {c:'d'}
fis.get('a.b.c'); // => 'd'

fis.match(selector, props[, important])

給匹配到的檔案分配屬性，檔案屬性決定了這個檔案進行怎麼樣的操作。
就像 css 的規則一樣，後面分配到的規則會覆蓋前面的。

• selector
  blob或者是任意正則
• props
  檔案屬性
• important
  預設為false。設定了這個屬性為 true，即表示設定的規則無法被覆蓋（與css中的!important類似）

fis.media(mode)

模仿自 css 的 @media，表示不同的狀態。這是 fis3 中的一個重要概念，其意味著有多份配置，每一份配置都可以讓 fis3 進行不同的編譯。

• mode
  string，設定不同狀態
• 返回值
  fis物件。即可以鏈式呼叫。

fis.plugin(name [, props [, position]])

外掛呼叫介面。

• name
  外掛名，外掛名需要特殊說明一下，fis3 固定了外掛擴充套件點，每一個外掛都有個型別，體現在外掛釋出的 npm 包名字上；比如 fis-parser-less 外掛，parser指的是在 parser 擴充套件點做了個解析 .less 的外掛。

fis.match('*.less', {
      parser: fis.plugin('less', {}) //屬性 parser 表示了外掛的型別
})

• props
  物件，外掛屬性
• position
  設定外掛位置，如果目標檔案已經設定了某外掛，預設再次設定會覆蓋掉。如果希望在已設外掛執行之前插入或者之後插入，請傳入 prepend 或者 append。

配置屬性

先看官網咖，沒時間寫了。點選標題跳轉。