讓 Angular 1.x 跟上時代的步伐

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

Worktile 的前端構建之路

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 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也是個不錯的選擇。

ES2015（ES6）

若是能夠，儘快使用，由於他是 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

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 壓縮代碼。

Angular 1.x + ES2015 + Webpack Seed

說了那麼多，我都有點煩了，直接上代碼 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 只是一個工具，但目前來看應該是個不錯的工具，值得前端的朋友去學習，由於使用了他的確使前端的開發更簡單了。

最後的心裏OS篇

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

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

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

文章轉載請註明出處。