前言： 在哪看到過angular程式員被React程式員鄙視，略顯尷尬，確實Angular挺值得被調侃的，在1.*版本存在的幾個性能問題，性能優化的“潛規則”賊多，以及從1.*到2.*版本的面目全非，不過寬容點來看這個強大的框架，升級到ng2肯定是一件好事情，雖然截至目前ng2還存在或多或少需要完善 ...
前言：
在哪看到過angular程式員被React程式員鄙視，略顯尷尬，確實Angular挺值得被調侃的，在1.*版本存在的幾個性能問題，性能優化的“潛規則”賊多，以及從1.*到2.*版本的面目全非，不過寬容點來看這個強大的框架，升級到ng2肯定是一件好事情，雖然截至目前ng2還存在或多或少需要完善的地方，但是ng2做到了留下並強化ng1好的部分，移除或改善其不好的部分，並且基於許多較新Web技術來開發，不去看從ng1遷移到ng2的門檻和工作量的話，ng2的編程體驗是很酷炫的。
目前ng2已經在npm上活躍到了2.4.*版本，筆者也斗膽用來重構現有的一個ng1產品，目前開發還未完全完成，也已經有了一些ng2開發的心得，其給我的其中一個感覺就是，框架的搭建很重要，搭建好一個酷炫的ng2項目架構，已經可以說是成功了一半了。
本文目的就在於分享一下angular2搭配webpack的項目框架搭建心得。
一、前端模塊化
ng2的開發可以說是官方強行模塊化，畢竟使用了TS與ES6新特性。使用ng1開發推薦的寫法就是每個controller啊service啊factory啊filter啊都放在單獨文件中並包上立即執行函數來分隔作用域，如果是這種寫法，遷移到ng2中能減少一些工作量，將不同服務或是組件到處import即可。
說白了ng2項目架構搭建的重難點就在於對前端代碼模塊化的運用。習慣了所有變數函數都直接定義在window下的話得花些時間來理解與運用。題外話JS/ES模塊化的發展歷程也是蠻酷炫的。
二、SystemJS與Webpack
ng2預設使用SystemJS作為模塊化工具，在其官網上有推薦使用Webpack來代替，但其對Webpack下ng2的搭建提到的不多。
不管是SystemJS還是Webpack，起到的最根本的作用就是模塊化ng2代碼，所做的事情就是：通過配置讓其知道某個ng2依賴的路徑(比如@angular/http)，當需要使用網路請求時只要在具體的service下引用這個依賴(import)，SystemJS或者Webpack就會將其引入，然後就可以使用它內部提供的實例方法了。
ng1時代在不藉助模塊化工具的情況下，做法是先將angular.min.js引入，然後再其後面執行代碼，而ng2配置好模塊化工具後，頁面引入的是SystemJS(Webpack)的腳本，然後非同步載入後續需要的ng2模塊。
至於Webpack區別於SystemJS的地方，簡單來說Webpack所做的事不止是幫忙非同步載入模塊，還把資源的壓縮包了。也就是說使用SystemJS的情況下，當使用到某個ng2組件時還得發起請求，請求組件依賴的腳本文件，視圖模板以及樣式表，而Webpack可以將所有的這些都打包壓縮。
所以給出的建議就是，如果只是試水看看ng2酷炫的能力，SystemJS足夠了，但如果是用來做產品，Webpack有巨大優勢。
三、Webpack的配置
厲害的Webpack配置非常值得研究，筆者能力不夠，借鑒了國外一個開源的angular2-starter項目，地址如下：
github.com/AngularClass/angular2-webpack-starter
簡單說說Webpack工作的過程：
在npm下使用指令運行webpack，首先會在當前目錄尋找webpack.config.js文件，裡面就是需要編寫的webpack的編譯規則，包含代碼入口，需要載入的文件(包括各種尾碼的文件，需要哪一類都可以配置進去)，以及最終輸出的文件。
編譯完成後只要將輸出的幾個腳本引用到頁面中就完成了，甚至可以由webpack來輸出一個index.html，作為網站的入口文件，其深層的工作原理非常值得研究。
四、目錄結構與編程風格推薦
關於ng2項目的目錄結構與編程風格的推薦，ng2官網的風格指南已經講得非常完善，看完絕對能受益匪淺，地址如下：
angular.cn/docs/ts/latest/guide/style-guide.html
五、發佈與部署
發佈與部署不是什麼難事，但是從來沒發佈過的話總會緊張的，大致過程就是：
1. 運行webpack命令將源代碼生成為待發佈代碼(包含入口文件index.html、靜態資源assets、主webpack腳本和其trunk腳本)
2. 找一個伺服器部署發佈的代碼，任意伺服器都可以，直接使用node伺服器也完全沒問題，更多的工作是如何維護。
六、淺談Angular2核心思想
在開始開發ng2項目前，先認識一下其整體的工作過程是很有必要的。
下麵是ng2官網給出的一張全景圖：
ng2工作過程全景圖
大致的思想就是：
1.按模塊來劃分。至少有一個根模塊，包含一個根組件，一般用來做一些全局的事情，並統籌其他所有模塊，具體的各個功能都劃分成一個模塊，各自工作，互不影響但能互相通信或是繼承。
2.圍繞組件進行開發。可以直接把組件理解為一個個頁面的管理者，一個組件管理自己的一個頁面，維護頁面需要呈現的數據，並處理頁面中觸發的各種事件。
3.保留ng1的屬性型指令。屬性型指令用來做一些不依賴於具體視圖的事情，比如通用的事件響應等。
4.服務依賴註入。服務的特性依然是全局單例，註入到具體組件後使用，不過如果在不同模塊重覆包含相同服務，也就都會有各自的新實例，其使用有小技巧。
5.使用管道來格式化數據的呈現。
6. ...
七、發現的幾個問題
1. 第一個問題是針對上文提到的angular2-starter開源項目，其在windows下有一個尷尬的問題，就是經過webpack編譯後會出現中文亂碼。懵逼許久之後發現此項目原有的文件都是utf8無BOM編碼，而windows下預設utf8編碼都帶有BOM。
2. 組件的切換。主要是路由切換時會從一個組件導航到另一個組件，此過程會銷毀前一個組件再創建後一個組件，導致的問題是路由的切換動畫總是會有一瞬間的空白頁面(因為原組件被銷毀了而新組建還未初始化)，此問題在StackOverflow上有個別的曲線救國解決方案，但是還是希望ng2後續的版本更新能給出更優雅的官方解決方案。
3. ng2路由有兩種形式，H5 pushState與#符號區分前後端路由兩種形式。官方推薦前者，但前者顯然會與伺服器路由衝突(非node伺服器情況下)。這個網上有一些解決方案，筆者採用的是將404狀態預設重定向到項目首頁(伺服器端找不到路徑則視為是請求首頁並保持原有參數)。
總結
其實任何框架都有其長處和短處，深入使用都會遇到各種問題，ng2也是如此。ng2相對於2016年已經成熟很多了，但是還有很長的路要走。
