Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

概述

Angular2官方推薦的應該是使用systemjs加載, 但是當我使用到它的tree shaking的時候，發現如果使用systemjs+rollup，只能打包成一個文件，然后lazy loading就沒法搞了。

因此我使用了webpack2，webpack2自帶tree shaking，只要將tsconfig中的module設置成es2015就可以， 雖然效果沒rollup好，但支持lazy loading。

另外， angular2目前不支持typescript 2.1.X，所以如果想在"target": "es5"前提下使用async/await就不行了，但是可以將target設為es2015，然后引入babel-loader，這樣的話，打包好的代碼就會稍微大一點。

 

源代碼

項目的github地址是https://github.com/nickppa/myAngular2Aot，用的是官方的hero的那個例子，master分支下沒有引入babel， webpack-babel分支下引入了babel，以支持async/await。

參考了https://github.com/AngularClass/angular2-webpack-starter， 沒有使用hmr（熱加載），看了下hmr的相關代碼，有點像redux的單個state的概念。

 

吐槽Typescript

Interface

感覺Typescript的interface是個雞肋，不如全部定義成class，原文如下

It's not Angular's fault. An interface is a TypeScript design-time artifact. JavaScript doesn't have interfaces. The TypeScript interface disappears from the generated JavaScript. There is no interface type information left for Angular to find at runtime.

也就是當typescript轉換成javascript時，接口會被刪除。

函數重載

另外typescript的函數重載，個人感覺這寫法也太low了。

 

總結

感覺Typescript主要還是強類型，對es6,es7的各種新語法支持(怎么感覺babel更棒一點)，以及泛型和tsc編譯比較有用。 其他的優點暫時還沒發現， 話說2.1中的keyof蠻不錯的，但是angular2里面現在還用不了啊。

另外，項目中嘗試使用了immutable，以及angular2的OnPush策略。