Worktile 的前端構建之路

2013年，那時候 Angular.js 才剛剛興起，我們大膽了選擇了當時看來比較新的技術，經過 3年的技術積累，Worktile 團隊基本上把 Angular 1.x 可能踩得坑都踩了一遍，我們自己也寫了一些關于 Angular.js 的插件，可以說團隊目前采用 Angular.js 開發(fā)項目沒有太大的技術難點。

Worktile 剛開始的時候是自己用 Node.js 寫腳本進行合并和壓縮 JS 代碼，現在想想當時是多么的原始，后來切換到 Grunt 工具進行簡單的合并壓縮，編譯 LESS，使用 Grunt 一段時間之后發(fā)現其打包的速度實在太慢，當做企業(yè)版的時候就切換到 Gulp 上了，在速度上的確有質的飛躍，使用 Gulp 的時候我們做了稍微復雜一點的任務構建，開發(fā)環(huán)境自動監(jiān)控 LESS 代碼變化等等，目前一直使用的是 Gulp，我們也在不停的跟隨時代的變化，保持自己永不落后，所以在一些邊緣項目上也會使用最近比較火的框架、類庫或者工具。

Angular 1.x 使用模塊化

大家都知道 Angular 1.x 有自己的一套模塊機制，定義一個模塊如下：

angular.module("module.abc", ["module.def"]); 

上面的代碼定義了一個 "module.abc" 模塊，并且 "module.abc" 依賴 "module.def" 模塊，然而這個模塊機制很容易寫出有文件順序依賴的代碼，比如 a.js 文件定義了一個 "module.abc" 模塊，b.js 沒有定義自己的模塊，而是直接使用了 "module.abc"，這樣 b.js 必須在 a.js 加載之后才能工作，如果有了文件的先后依賴，合并的時候就需要手動維護一個順序列表。所以說 Angular.js 的模塊機制沒有解決JS文件依賴關系和JS文件異步加載的問題。

現在大家談起前端的模塊化，之前很多選擇讓人眼花繚亂，比如 CommonJS，AMD(Require.js)，CMD(Sea.js)，UMD，從未來標準的角度*** ES6 Modules，不要為我為什么，關于如果在Angular 1.x 使用 ES6 的 Modules，網上有很多文章介紹怎么使用，推薦一篇前端大叔徐飛的博客，這里就不詳細的一一展開了。

談到這里大家或許會問：如果使用 Require.js ，在開發(fā)階段是每個 JS 都動態(tài)加載的，生產環(huán)境根據 r.js 這樣的工具合并成一個或者多個JS來提高前端性能，如果使用 ES6 的Modules，開發(fā)環(huán)境和生產環(huán)境是怎么樣的呢?

在生產環(huán)境每個js文件都動態(tài)加載顯然不是最合適，中小型項目基本不需要動態(tài)加載，我覺得合并成1個或者多個js是***的解決方案。

那怎么合并 ES6 Modules 的JS，這類的工具很多很多，包括下面要介紹的 Webpack(目前1.x版本還不能原生支持，需要借助 Babel 工具)，基本上開發(fā)環(huán)境也使用合并之后的 Bundle JS，調試使用 Source Map 工具，如果你開發(fā)環(huán)境就不想使用合并之后的，systemjs也是個不錯的選擇。

ES2015(ES6)

如果可以，盡快使用，因為他是 Javascript 未來的標準，作為一個前端技術人員，如果不能與時俱進那就只能等著淘汰，ES 2015 有著現代語言的語法，解決了 Javascript 語言層面上的很多問題，有 Class，Modules，Arrows，Template Strings 等等一系列的新特性，用了之后腰不酸腿不痛(請一定要相信我)，最終的目的只有一個：提高生產力，讓代碼更簡單，當然現在很多瀏覽器還不能原生支持 ES2015，沒關系，有Babel在，生產環(huán)境轉換好成 ES5 不是問題。

其實 ES 2015 的新特性數也能數出來，稍微花上 1 天就全學會了，推薦2個地址：

• https://babeljs.io/docs/learn...
• https://github.com/lukehoban/...

Webpack

Webpack 是最近1-2年來非?；鸬臉嫿üぞ?，如果說前端工程師沒有聽過或者嘗試下 Webpack ，簡直會被嫌棄，當然工具之所以火當然有他的道理，在我看來他能解決很多模塊化和工程化的問題，提高生產力，如果你還不知道 Webpack 是什么，趕緊花幾個小時去了解下，了解之后不要不了了之，結合自己的項目，切換到 Webpack 是否可行，如果可行，接下來怎么***過渡，即使目前不用，下一個項目開始的時候試著嘗試下。

Webpack 的優(yōu)點：

• 支持CommonJS 和AMD 模塊，ES 2015 Modules 在 2.0 中將會原生支持，這個問題不大，因為我們肯定要使用 Babel 的;
• 模塊加載器，能夠處理一切資源，包括 CSS，LESS，Image，JSON 等等，比如使用 babel-loader 加載器讓我們能夠用ES6的語法來編寫代碼;
• Code Spliting，可以通過配置打包成多個文件，有效的利用瀏覽器的緩存功能提升性能，并且能自動抽取多個入口公用的代碼;

插件機制提供了更多擴展功能，彌補 Loaders 的不足，比如自帶的 UglifyJsPlugin 壓縮代碼。

Angular 1.x + ES2015 + Webpack Seed

說了那么多，我都有點煩了，直接上代碼 https://github.com/why520craz...

這是我寫的一個怎么使用 Angular 1.x + ES2015 + Webpack 的一個示例項目，基本上是我目前水平覺得比較好的組織形式了，里面涵蓋了：

• 使用 ES6 Modules 進行 Angular 1.x 的模塊化開發(fā);
• 使用全組件化開發(fā)一個簡單的 Angular 1.x 單頁項目;
• 使用 Webpack 合并 JS，CSS，Image 等一切靜態(tài)資源;
• 包管理工具使用 NPM，任務的啟動腳本使用 NPM Scripts;
• 使用 Webpack 的 CommonsChunkPlugin 將引用的第三方類庫單獨打包成一個獨立的 bundle，并把多個入口公用的JS抽取出獨立的 bundle;
• 使用 HtmlWebpackPlugin 插件生成入口的HTML文件，并把打包之后的JS和CSS引入到HTML中，不需要手動添加 scripts 標簽和 style link;
• 使用 ExtractTextPlugin 插件把 CSS 抽取成獨立的文件，當然你也可以不這么做，直接放在 JS 中;
• 使用 postcss 處理樣式的兼容性問題，autoprefixer 自動追加前綴等。

Webpack 還有一些更高級的特性沒有在示例中展現，比如通過dllplugin只將有變化的JS生成不同的 Hash，充分利用瀏覽器的緩存，頻繁打包部署后，沒有改動的類庫將不會重新生成。

前端開發(fā)遠不止于此，有人總結了前端開發(fā)的四個階段：

• 庫/框架選型;
• 簡單構建優(yōu)化;
• 模塊化開發(fā);
• 組件化開發(fā)與資源管理。

大部分團隊還是停留在第二第三階段，每個階段的實現都有很多種選擇。

如果只想達到第二階段，那么選擇一個壓縮合并工具幾分鐘可能就能實現，具體任務是使用 Grunt，Gulp，還是 NPM Scripts 都可以;

第三階段就需要代碼級別的支持，選擇 Webpack 原生支持 CommonJS，AMD 寫法，不需要單獨引入 Require.js 或者 Sea.js 這樣的類庫， 省去了很多麻煩，你也可以選擇其他的支持模塊化的構建工具：systemjs,Browserify, 或者rollup;

第四階段的組件化開發(fā)和資源管理暫時就不討論了，關于是全組件開發(fā)和半組件開發(fā)也有很多爭議。

總結

時至今日，談起 Angular.js ，或許有些人都覺得有些過時，人人都在談 React，Vue。當然 Angular 2 經過一些波折之后也在逐漸走進我們的視線，其實最終哪個框架會一統(tǒng)天下誰都沒法預料。但也有些前端大牛認為 Angular.js 在某些行業(yè)或者企業(yè)才剛剛興起!

不得不承認 Angular 1 有很多問題，如果你的項目之前選擇的是 Angular.js ，不是一拍腦袋就升級 Angular 2 的，即使不升級，我們也可以在 Angular 1.x 的基礎上做一些工作來適應未來的變化，慢慢的哪一天你就會突然發(fā)現升級就是那么的簡單。

希望這篇文章能夠激起大家永遠保持積極向前追求***代碼的心，不僅對自己的成長也會對公司帶來***的價值。對了!雖然Webpack 只是一個工具，但目前來看應該是個不錯的工具，值得前端的朋友去學習，因為使用了他的確使前端的開發(fā)更簡單了。

***的內心OS篇

其實這篇文章來源于我在公司內部的一個分享前端構建工具 - Webpack

分享的時候主要是現場擼代碼，通過博客的話就不好展現了，所以我基本上沒有介紹 Webpack 入門的一些用法，并且網上已經有很多大牛的分享，推薦大家看一下Webpack 教程資源收集，這里面基本涵蓋了各路大神，從入門到精通全看一遍即可， 如果你的英文足夠好，請直接看 Webpack 官方文檔~