摘要：所以說的模塊機制沒有解決文件依賴關系和文件異步加載的問題。大部分團隊還是停留在第二第三階段，每個階段的實現都有很多種選擇。希望這篇文章能夠激起大家永遠保持積極向前追求完美代碼的心，不僅對自己的成長也會對公司帶來無限的價值。

本篇技術博客來自有著化腐朽為神奇能力的，Worktile 技術牛人Web 總監 @徐海峰 大神的分享~滿滿的干貨，你值得擁有！

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

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

大家都知道 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 ，在開發階段是每個 JS 都動態加載的，生產環境根據 r.js 這樣的工具合并成一個或者多個JS來提高前端性能，如果使用 ES6 的Modules，開發環境和生產環境是怎么樣的呢？

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

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

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

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

https://babeljs.io/docs/learn...

https://github.com/lukehoban/...

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

Webpack 的優點：

支持CommonJS 和AMD 模塊，ES 2015 Modules 在 2.0 中將會原生支持，這個問題不大，因為我們肯定要使用 Babel 的；

模塊加載器，能夠處理一切資源，包括 CSS，LESS，Image，JSON 等等，比如使用 babel-loader 加載器讓我們能夠用ES6的語法來編寫代碼；

Code Spliting，可以通過配置打包成多個文件，有效的利用瀏覽器的緩存功能提升性能，并且能自動抽取多個入口公用的代碼；

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

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

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

使用 ES6 Modules 進行 Angular 1.x 的模塊化開發；

使用全組件化開發一個簡單的 Angular 1.x 單頁項目；

使用 Webpack 合并 JS，CSS，Image 等一切靜態資源；

包管理工具使用 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，充分利用瀏覽器的緩存，頻繁打包部署后，沒有改動的類庫將不會重新生成。

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

庫/框架選型；

簡單構建優化；

模塊化開發；

組件化開發與資源管理。

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

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

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

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

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

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

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

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

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

您可以點擊Worktile技術博客，歡迎訪問交流技術問題。

文章轉載請注明出處。