UDN-企业互联网技术人气社区

板块导航

浏览  : 1100
回复  : 2

[AngularJS] Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

[复制链接]
王许柔的头像 楼主
发表于 2017-2-6 10:16:19 | 显示全部楼层 |阅读模式
  概述

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

相关帖子

发表于 2017-2-6 10:17:14 | 显示全部楼层
前排支持下
使用道具 举报

回复

发表于 2017-2-7 09:21:45 | 显示全部楼层
感觉JavaScript很有前途
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部