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策略。