F.I.S初探（前端工程化）

雲筆記：http://note.youdao.com/share/?id=7c4a2dcf118f0ad7bb52a36aaee46a7a&type=note

 

1、初識FIS

在作項目中遇到了靜態資源瀏覽器緩存更新的問題，因而在網絡上尋找解決方案。以前雖然沒有解決過這個問題，但方法無非就是爲其設定新URI使得瀏覽器強制更新。這個過程聽起來仍是至關簡單的。

 

也是無心中搜索到了知乎上的一個帖子 大公司裏怎樣開發和部署前端代碼？

看到這個文章中提到了FIS，跟隨着文章開始學習走起，有點小興奮，只不過很快便發現問題更多。

 

2、嘗試

本來只是想着有個工具能夠將前端資源打個標識，這樣就能夠輕鬆的解決瀏覽器靜態緩存更新問題。FIS的描述也確實如此，那麼就開始動手搞起吧。

安裝

FIS是基於Nodejs開發，因此nodejs必須有。裝起。。

而後經過npm命令裝起， npm install -g fis。結果卡死了。

 

因爲是第一次接觸，因此在baidu上找了半天也沒找到方案。放棄。。。

 

發現了官方視頻教程，因而花時間看了幾集，大概瞭解到FIS這個工具仍是挺簡單的。並且解決了前端開發的問題：

一、資源壓縮

二、md5戳

三、資源合併

 

貌似比較有用的功能就這幾個。而我最關心的就是md5戳咯。。

 

md5戳

所謂Md5戳就是這樣的：

<script src="/script/placeholder.js"></script>

加戳後是這樣的：

<script src="/script/placeholder_88025f0.js"></script>

 

固然文件自己名稱也變了：script/placeholder_88025f0.js

 

這樣一來解決了兩個問題：

一、引用靜態資源的URI變了，那麼天然瀏覽器會取新的資源，解決了更新緩存的問題

二、md5是經過文件計算得來，因此只有文件發生變化了纔會產生新的URI，反之就不用變了，這就解決了增量更新的問題，同時兼顧了流量功擊

 

固然對於我這種小項目來講第2點幾乎沒啥用。

 

再嘗試安裝

既然知道了好處，那就繼續裝吧，打開fis官方網站： http://fis.baidu.com，這裏面有入門教程，這點畢竟百度團隊公開的幫助仍是至關能夠的。並且是中文滴，好有親近感。。找了緣由多是npm網站動不動會被牆致使的。。那麼，官方也有方案，使用鏡像：

npm install some-npm-module -g --registry=國內鏡像 --disturl=https://npm.taobao.org/dist

這些東西官方網站都有提到，就很少說啦。出門左轉去這裏： https://github.com/fex-team/fis/issues/65

 

此次好了，安裝好了，fis -v

 

3、遇到問題

裝好了後那就開始在項目中用吧，這才發現本身太年輕。。。。。。

 

一、配置

直接使用fis release -md ../output，好了開始生成與發佈。結果完蛋了，無論阿貓阿狗所有js/css/imgs都添加了md5戳。這可就麻煩了，徹底不是本身想要的，也就是說直接經過一個工具一鍵解決加Md5戳的問題太理想了。

 

那麼只好去研究官方的文檔，瞭解具體的配置方式。在FIS中都是經過fis-conf.js這個文件來進行配置。官方例子：

// 設置圖片合併的最小間隔 fis.config.set('settings.spriter.csssprites.margin', 20);   // 取消下面的註釋開啓simple插件，注意須要先進行插件安裝 npm install -g fis-postpackager-simple  fis.config.set('modules.postpackager', 'simple');   // 取消下面的註釋設置打包規則  fis.config.set('pack', {      '/pkg/lib.js': [          'js/lib/jquery.js',          'js/lib/underscore.js',          'js/lib/backbone.js',          'js/lib/backbone.localStorage.js',      ],      // 取消下面的註釋設置CSS打包規則，CSS打包的同時會進行圖片合併       '/pkg/aio.css': '**.css'  });   // 取消下面的註釋能夠開啓simple對零散資源的自動合併  fis.config.set('settings.postpackager.simple.autoCombine', true);

 

fis.config.merge({     roadmap : {         path : [             {                 //全部widget目錄下的js文件                 reg : 'widget/**.js',                 //是模塊化的js文件（標記爲這種值的文件，會進行amd或者閉包包裝）                 isMod : true,                 //默認依賴lib.js                 requires : [ 'lib.js' ],                 //向產出的map.json文件裏附加一些信息                 extras : { say : '123' },                 //編譯後產出到 /static/widget/xxx 目錄下                 release : '/static$&'             },             {                 //全部的js文件                 reg : '**.js',                 //發佈到/static/js/xxx目錄下                 release : '/static/js$&'             },             {                 //全部的ico文件                 reg : '**.ico',                 //發佈的時候即便加了--md5參數也不要生成帶md5戳的文件                 useHash : false,                 //發佈到/static/xxx目錄下                 release : '/static$&'             },             {                 //全部image目錄下的.png，.gif文件                 reg : /^\/images\/(.*\.(?:png|gif))/i,                 //訪問這些圖片的url是 '/m/xxxx?log_id=123'                 url : '/m/$1?log_id=123',                 //發佈到/static/pic/xxx目錄下                 release : '/static/pic/$1'             },             {                 //全部template目錄下的.php文件                 reg : /^\/template\/(.*\.php)/i,                 //是類html文件，會進行html語言能力擴展                 isHtmlLike : true,                 //發佈爲gbk編碼文件                 charset : 'gbk',                 //發佈到/php/template/xxx目錄下                 release : '/php/template/$1'             },             {                 //前面規則未匹配到的其餘文件                 reg : /.*/,                 //編譯的時候不要產出了                 release : false             }         ]     } });

這裏面我目前用的最多的是roadmap，感受這是個核心設置。

 

二、資源定位

所謂資源定位，就是在html/js/css中定位到資源引用，將FIS編繹(生成)過的新資源替換進去。那麼其實挺簡單的，就像本文最開始說的例子：

<script src="/script/placeholder.js"></script>

加戳後是這樣的：

<script src="/script/placeholder_88025f0.js"></script>

這樣每次發佈都是自動完成了資源更新，有點小爽。。只不過問題來了。。。FIS目前替換後的URI是絕對路徑。這句話什麼意思？

 

好比，一個css代碼：

.h_login-conimgbg{background:transparent url('img/lgoin_image.png') no-repeat; height:406px;}

 

其中引用了img/lgoin_image.png這個圖片。可是通過FIS編繹後是什麼樣：

.h_login-conimgbg{background:transparent url('/css/img/lgoin_image_369f159.png') no-repeat; height:406px;}

 

FIS直接將絕對路徑進行的替換，這就帶來了一個問題，原先是相對目錄，換成絕對目錄後就變成了根目錄了。會有啥問題呢？

若是使用了二級目錄就會出現問題，好比系統部署在tomcat的webapps下的myweb目錄中，訪問時：http://localhost:8080/myweb。那麼上面css定位資源時是http://localhost:8080/myweb/css/img/lgon_image.png。

 

但是FIS編繹後就會這樣：http://localhost:8080/css/img/lgon_image_369f159.png。這樣就沒法訪問了。因而我在FIS的討論區諮詢了這個問題，給的回覆是：

 

  如今所有是絕對路徑，主要是考慮到資源合併和 cdn 部署的功能實現

 

這麼一來就只能經過其餘的方式解決，好比，roadmap裏能夠配置資源的url生成時添加domain，這個方法本來是用來作cdn部署時使用的。可是也能夠解決上面的問題。

 

三、不想處理的文件

在系統裏使用了許多第三方資源，如jquery、jqueryUi等庫，但這些庫咱們基本不會去修改代碼，也就不存在那些靜態資源壓縮、添加md5的問題了。那固然就不想在FIS裏處理這些文件，而FIS是默認處理全部的js/css/imgs。這也就涉及到了配置的問題。

fis.config.merge({

    roadmap : {

  path : [

   {

                //plugin的js文件

                reg : /^\/plugin\/(.*\.(?:js|css))/i,

                useHash : false,

                useCompile : false,

                url : '${appServer}$&',

            }

        ]

    }

});

這是我截取的一個配置片斷，經過reg來定位具體的目錄

• useHash:false，表示不添加md5戳
• useCompile:false，表示不對資源進行編繹處理

 

好了，有了這個配置，plugin下的js/css就不會被處理了。

 

4、階段感覺

其實到最後我已經放棄了，由於項目會用到jenkins hudson作集成，這裏面還有許多的部署問題，時間關係就不肯意再深刻了。本來想的用個工具加個md5戳或者版本號的想法破滅了。

 

可是收穫仍是有的：

一、前端的工程化原來能夠有這麼出格的思路，其實並無什麼特別大的進步，只不過是看起來很叼的樣子。並且FIS感受是起步階段，對於開發相對較爲規範的項目確實是能夠考慮的一個輔助工具

二、真正讓我以爲有意思的地方是前端模塊化。這部分是FIS裏的進階，真正的前端工程實際上是這部分。我在前端方面的經驗太少了，僅僅是初步水平，因此這部分高級內容須要花時間學習和實踐

三、不管產前端仍是後端都是程序員，都是工程師。