前端構建工具-fis3使用入門

鐵錨發表於2017-07-10
前端S3

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

官網地址是: https://fex-team.github.io/fis3/index.html

我們要做前後端分離，將靜態資源部署到CDN。調研了幾個前端構建工具之後，選擇了 fis3, 原因是能滿足我們的需求、並且輕量級、配置簡單、使用方便、安裝也不容易報錯。

下載安裝

  1. 安裝NodeJS
    下載地址: http://nodejs.cn/download/
    推薦下載最新版本的NodeJS,如 v8.1.3+ 等。
    安裝到預設目錄,完成後檢視版本號: node -v
  2. npm安裝fis3
    在 cmd 中執行: npm install -g fis3
    安裝fis3後,在 cmd 中執行 fis3 -v 判斷是否安裝成功

相關的 shell 命令如下:

node -v
npm install -g fis3
fis3 -v

簡單使用

說明: fis3等前端構建工具,依賴的是相對路徑, 如./xxx/xxx.js 等; 識別: <img src="">、<link href="">、 <script src=""> url(``) 等資源配置。

如果你的專案不符合此要求, 需要進行一定的修改。

首先,在前端程式碼的根目錄中,建立檔案 fis-conf.js。 fis3 會查詢此檔案作為配置。

修改fis-conf.js檔案的內容:

// 配置不同環境的CDN資源字首
fis.media(`prod`).match(`*.{js,css,png}`, {
  domain: `http://cdn.cncounter.com/cncounter-web`
});

fis.media(`beta`).match(`*.{js,css,png}`, {
  domain: `http://beta.cdn.cncounter.com/cncounter-web`
});

fis.media(`dev`).match(`*.{js,css,png}`, {
  domain: `http://dev.cdn.cncounter.com/cncounter-web`
});


// 所有js, css 加 hash
fis.match(`*.{js,css,png}`, {
  useHash: true
});

// 生產環境進行JS壓縮
fis.media(`prod`).match(`*.js`, {
  optimizer: fis.plugin(`uglify-js`)
});

// dev 環境不加hash, 不進行壓縮和優化
fis.media(`dev`).match(`*.{js,css,png}`, {
  useHash: false,
  optimizer: null
});

簡單解釋一下, fis.media(`prod`) 意思是生產環境的配置。

使用fis3時,可以指定打包版本, 例如:

fis3 release prod -d cdn_release

如果不指定, 則預設為 dev 環境(fis3中稱為media)

指定輸出目錄是 -d 選項,可以指定絕對路徑,相對路徑；

另外, fis.match 是很簡單的配置,後面會覆蓋前面。

其中, useHash 指定是否根據內容生成 hash, 例如 common-utils.js 在生成目錄下會變成: common-utils_331734d.js;

optimizer 指定優化配置,例如檔案壓縮、合併,內聯等;

其他外掛可能需要安裝額外的 npm 元件/外掛;

示例

Windows 使用示例(cmd 環境):

E:
cd E:cncounter-websrcmainwebapp
dir fis-conf.js
fis3 release prod -d cdn_release

Linux 或者 Mac 大同小異, 請根據需要自己配置,或者參考官網。

然後,進入 cdn_release 目錄, 看看對應的 html,css,js 等檔案的變化吧。

如果專案未拆分, 與 MAVEN 一起組合使用時, 先執行 fis3 的構建(可以指定 html 等檔案的輸出目錄), 然後通過 copy-resources 等外掛進行組裝。

如果需要更復雜的功能,請參考官方的配置文件: https://fex-team.github.io/fis3/docs/beginning/release.html

原文作者: 鐵錨 http://blog.csdn.net/renfufei

原文日期: 2017年7月10日


相關文章