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