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

標籤：mmu   class   優點   title   個人   使用   https   http   href   

概述

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的概念。

 

吐槽TypescriptInterface

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

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