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