Angular 2 的 JSPM 与 WebPack
Posted
技术标签:
【中文标题】Angular 2 的 JSPM 与 WebPack【英文标题】：JSPM vs WebPack for Angular 2 【发布时间】：2017-03-08 11:04:08 【问题描述】：最近我在我的 Angular 2 项目中使用了 JSPM，发现它使用起来非常简单方便。无论是添加新模块还是创建用于生产的捆绑包。
基本上就是这样：
jspm install npm:@angular/somepackage
并且 package.json 和 system.js 配置会自动为我更新。
当我想创建一个生产包时，我只需这样做：
jspm bundle-sfx app/main app-bundle.min.js --minify
要使用它，我只需制作一个这样的 html：
<body>
<my-app>Loading...</my-app>
<script src="app-bundle.min.js"></script>
</body>
它加载和运行速度很快。将它用于小型和大型 Angular 2 应用程序。
开发设置也令人满意 - 重新加载应用程序足够快并且调试顺利。能够通过 JSPM 使用 NPM 存储库中的几乎任何模块也非常好。
当阅读那里的文章时，我得到的印象是人们正在转向 webpack 以用于 Angular 2 应用程序。我自己还没有迁移到 webpack，因为我认为我的设置工作正常，而且 webpack 似乎需要更多的配置。
但我担心对 JSPM 的支持会逐渐消失，因为似乎越来越多的人正在转向 webpack。
因此我应该切换到 webpack 吗？切换到 webpack 会不会给我带来一些我没有发现的好处？
我有一些非常简单的 Angular 2 快速入门模板来展示我的设置，可以在这里找到：https://github.com/fintechneo/angular2-templates
很高兴获得一些关于切换到 webpack 的好处的意见。
2017 年 3 月 26 日更新
自从发布此问题以来，我发现生产构建需要更快的加载时间。即使 JSPM（或 webpack）生成了优化的包，它仍然太大，需要在包下载后编译 angular2 模板。
所以我找到了 Ahead-of-Time 编译器说明书 (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) - 它制作了下载后立即启动的小包。
这需要一个并行设置，尽管所有的角度模块都是使用 npm（不是 jspm）安装的。可能也可以通过一些努力使用 JSPM，但我还没有研究过。 JSPM 和这本 AoT 食谱都使用汇总，因此它可以让 ngc 编译器步骤与 JSPM 集成，但棘手的部分是让 TypeScript 使用 jspm_packages 而不是 node_modules。
上面的设置链接已使用 AoT 进行了更新，开发环境仍然使用 JSPM。
【问题讨论】：
【参考方案1】：这个答案需要分解如下..
SystemJS 与 JSPM
JSPM 本质上是 SystemJS，其优势在于 JSPM 会为您配置 systemjs.config.js。我喜欢 JSPM 的工作原理（遗憾的是并非总是如此）。
这里的好处是 JSPM 还为您捆绑了您的 JS 文件。
JSPM v Webpack
鉴于 JSPM 实际上在后台使用 SystemJS，这个问题本质上是我们应该使用 SystemJS 还是 Webpack。
不会再来了！我以前在这里回答过这个问题（最佳答案）..
What are differences between SystemJS and Webpack?
该内容的简短重复是，Webpack 并没有取代 SystemJS（或 JSPM），它只是让它们变得多余。
但是，JSPM 提供了捆绑，这有一个转折点。那么为什么要迁移到 Webpack 呢？
JSPM 的好处是易于配置。
同样的好处也是它的缺点，因为易于配置意味着缺乏选项，而缺乏选项意味着缺乏控制。
Webpack 不仅捆绑 JS 文件，它还将 CSS、HTML 和其他所有内容捆绑到单个 bundle.js 文件中，该文件（一旦缓存）使 Webpack 应用程序闪电般快速（但最初加载速度很慢）。
此外，JSPM 满足了对捆绑器的需求，但您将如何使用 JSPM 转译文件？例如如果我想使用 Stylus 而不是 CSS 什么会将我的 Stylus 文件转换为 CSS？我要不要把 Gulp 混进去（我很伤心，现在它有 1/3 的 Webpack 下载量，但在 6 个月前领先）。还是改用 Webpack？
由于其糟糕的文档，我不是 Webpack 的粉丝，但鉴于它拥有如此巨大的市场份额，我认为我们很快就会加入 Webpack 的船。
【讨论】：
您是否按照我更新的问题中的描述使 webpack 与 AoT 生产构建一起工作？ 我为我公司的一个客户项目启动了 Webpack，即使在 9 个月后它仍然进展顺利。该项目现在也已上线。喜欢使用 Webpack。以上是关于Angular 2 的 JSPM 与 WebPack的主要内容，如果未能解决你的问题，请参考以下文章
Angular2 + typescript + jspm：没有 Http 提供者（ App -> Provider -> Http ）
编译Angular2 TS时如何配置gulp-typescript以与JSPM一起使用
如何将 Webpack 与 Angular + templateCache 一起使用？