• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Angular2+typescript+webpack2(支持aot,treeshaking,lazyloading)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript中的泛型发布时间:2022-07-18
下一篇:
TypeScript学习_入门向发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap