你还在为Angular2/TypeScript的Bundle环境搭建而困扰吗？试试JSPM？system.js？还是webpack？

2 年 ago

清, 宇

2 minutes

注意：本文是试错记录，因此可能包含很多错误。如果你知道更好的方法，请务必告诉我。

目前的结论

注意：目前使用rollup.js进行打包。

我正在使用system.js。
在正确配置tsconfig.json和typing.json之后，使用tsc和uglifyjs进行minify，最终将footprint减少到5kb。
（通过删除map和package的配置，解决了system.js中大量出现xhr的问题，请参考system.js的部分）
最终，我决定继续使用mgechev/angular2-seed（与Angular2官方的angular/angular2-seed不同），它是在GitHub上以社区为基础进行活跃开发的环境，同时我也不再使用system.js和webpack，而是使用gulp将所有的ts文件bundle成一个js进行使用。

理念

自作コード部分は読み込み時間が最小になるようにしたい

寻找可能对Angular2环境配置有所参考的样本。

JSPM – 参考我在GitHub上发现的davinkevin/Angular2-Sandbox

考虑在system.js上进行环境设置。

主页.html

<script src="https://npmcdn.com/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="https://npmcdn.com/systemjs/dist/system.js"></script>
<script src="https://npmcdn.com/typescript/lib/typescript.js"></script>
<script src="https://npmcdn.com/@reactivex/rxjs/dist/global/Rx.min.js"></script>
<script src="https://npmcdn.com/angular2/bundles/angular2.js"></script>
<script src="https://npmcdn.com/angular2/bundles/router.min.js"></script>
<script src="https://npmcdn.com/angular2/bundles/http.min.js"></script>
<script src="config.js"></script>
<script>
  System.import('app/main')
    .then(null, console.error.bind(console));
</script>

config.js 的配置文件

System.config({
  transpiler: 'typescript',
  typescriptOptions: {emitDecoratorMetadata: true},
  map: {
      //'rxjs': "https://npmcdn.com/@reactivex/rxjs/src"
  },
  packages: {
    app: {
      defaultExtension: 'ts'
    },
    //'rxjs': {defaultExtension: 'ts'}
  }
  });

index.html的內容都改成了從CDN加載。嗯…但是讀取rxjs相關的文件需要大量的xhr請求，花費了大約10秒才完成讀取？明顯地，讀取了不必要的文件…嗯，該怎麼解決呢？
（解決了大量文件讀取的問題，只需要在config.js文件中刪除對rxjs的指定！）

我希望将自己编写的代码部分打包成一个整体。这个问题可以通过使用JSPM来解决吗？（已经通过tsc解决了，我在使用tsc构建后，再通过uglifyjs进行压缩）

考虑在JSPM上进行环境配置

尽管JSPM可能能解决上述问题，但我看了关于angular2.jspm.md和TypeScript + jspm相关讨论，以及一些消耗精力的经历，觉得现在可能还不是时候。尽管如此，我还是尝试了一下环境配置，但频繁出现错误。

在克隆davinkevin/Angular2-Sandbox之后（因为这个样例不能直接运行），按照以下步骤添加crypto模块。

npm install
jspm install crypto

随后，生成包含system.js的bundle.js。

jspm bundle-sfx app/main.ts dist/bundle.js

创建一个不包含system.js的bundle.js

jspm bundle app/main.ts dist/bundle.js --minify --no-mangle

因此，雖然有動作，但如何才能將自製部分捆綁在一起呢…

只是，相比于由Webpack生成的bundle.js，它似乎具有更小的文件大小。

考虑在webpack下进行环境搭建。

我在ng-japan 2016会议上记录下来的angular2-webpack-starter-minimum尝试了一下。但是，当我构建它时生成的JavaScript文件大小超过了10MB…嗯…很明显有些东西出了问题，尽管我试着调整了一些参数，也许可以变小一些，但目前我决定尝试其他环境。

我在Github上搜索并尝试寻找更好的方法。

搜索Github后发现mgechev/angular2-seed的更新情况非常活跃。这个项目似乎在使用gulp建立自己的原始构建环境。试着使用它构建一下，发现在prod环境下，所有JavaScript文件的大小都在1MB以内，并且加载时间在1秒以内（虽然还想进一步提升速度）。好的，现在就先用这个吧。（目前的结论）

最理想的情况是将Angular2的核心部分从这里分离出来，通过CDN进行指定，只保留自己编写的代码部分以加快加载速度。
我尝试通过在gulp的src部分使用”!”来排除指定内容，但由于时间限制，最终放弃了。