Angular 2的JSPM与WebPack [英] JSPM vs WebPack for Angular 2
问题描述
最近，我在Angular 2项目中使用了JSPM，发现使用起来非常简单方便.涉及添加新模块和创建用于生产的捆绑包.
Recently I've used JSPM for my angular 2 projects and found it very simple and convenient to work with. Both when it comes to adding new modules, and creating a bundle for production use.
基本上就是:
jspm install npm:@angular/somepackage
以及package.json和system.js配置为我自动更新.
and the package.json and system.js configs are updated automatically for me.
当我要创建生产捆绑包时，只需执行以下操作:
When I want to create a production bundle I simply do this:
jspm bundle-sfx app/main app-bundle.min.js --minify
要使用它，我只是制作一个这样的html:
And to use it I just make an html like this:
<body>
<my-app>Loading...</my-app>
<script src="app-bundle.min.js"></script>
</body>
它可以加载并快速运行.在大型和大型Angular 2应用程序中都使用了它.
It loads and runs fast. Used it for both small and big Angular 2 applications.
开发设置也令人满意-重新加载应用程序足够快并且调试顺利.能够通过JSPM使用NPM存储库中的几乎所有模块也非常好.
Development setup is also satisfactory - reloading the app is fast enough and debugging goes well. Also very good to be able to use almost any module from the NPM repository through JSPM.
当我在外面阅读文章时，给人的印象是人们正在转向Angular 2应用程序的webpack.我没有自己搬到webpack，因为我认为我的设置可以正常工作，并且webpack似乎需要很多配置.
When reading articles out there, I get the impression that people are moving on to webpack for Angular 2 apps. I haven't moved to webpack myself, because I think my setup works fine and webpack seems like a lot more configuration.
但是我担心对JSPM的支持会逐渐消失，因为似乎越来越多的人开始使用webpack.
Yet I'm worried that support for JSPM will fade out, since it seems like more and more are moving over to webpack.
因此我应该切换到webpack吗?切换到webpack会给我带来一些我未发现的好处吗?
Should I switch to webpack because of this? Would switching to webpack give me some benefits that I've not discovered?
我有一些非常简单的Angular 2快速入门模板，这些模板演示了可以在这里找到的设置: https://github.com/fintechneo/angular2-templates
I have some very simple Angular 2 quick start templates demonstrating my setup that can be found here: https://github.com/fintechneo/angular2-templates
很高兴就此设置切换到webpack的好处获得一些意见.
Would be very happy to get some opinions about the benefits of switching to webpack for this setup.
更新2017年3月26日
自从发布此问题以来，我发现需要更快的加载时间来进行生产构建.即使JSPM(或Webpack)产生了优化的包，它仍然太大，需要在下载包后编译angular2模板.
Since this question was posted I found the need for even faster loading times for production builds. Even though JSPM (or webpack) produce an optimized bundle, it's still too big and needs the angular2 templates to be compiled after the bundle is downloaded.
因此，我找到了《提前编译器指南》( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html )-制作小包，下载后立即开始.
So I found the Ahead-of-Time compiler cookbook (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) - which makes small bundles that starts in no time after downloading.
这需要并行安装，尽管所有的角度模块都使用npm(不是jspm)安装.可能也可以通过一些努力来使用JSPM，但我尚未对此进行研究. JSPM和此AoT食谱都使用汇总，因此将ngc编译器步骤与JSPM集成在一起，但棘手的部分是让TypeScript使用jspm_packages而不是node_modules.
This required a parallell setup though with all the angular modules installed using npm (not jspm). Probably possible to use JSPM for this too with some effort, but I haven't looked into it yet. Both JSPM and this AoT cookbook use rollup, so it would to get the ngc compiler step integrated with JSPM, but the tricky part is to get TypeScript to use jspm_packages rather than node_modules.
上面的带有设置的链接已通过AoT更新，并且仍在开发环境中使用JSPM.
The link above with the setup is updated with the AoT, and still uses JSPM for the dev environment.
推荐答案
此答案需要细分如下..
This answer requires a breakdown as follows ..
SystemJS v JSPM
SystemJS v JSPM
JSPM本质上是SystemJS，其优点是JSPM为您配置systemjs.config.js.我喜欢JSPM，它可以正常工作(可惜并非总是如此).
JSPM is essentially SystemJS with the advantage that JSPM configures your systemjs.config.js for you. I love JSPM when it works (which sadly isnt always).
这里的好处是JSPM还会为您捆绑您的JS文件.
The benefit here is that JSPM also bundles your JS files for you.
JSPM v Webpack
JSPM v Webpack
鉴于JSPM实际上是在使用SystemJS，所以这个问题本质上是我们应该使用SystemJS还是Webpack.
Given that JSPM is actually using SystemJS under the hood this question is essentially should we be using SystemJS or Webpack.
不再！我已经在这里回答了这个问题(最重要的回答).
Not again! I've answered this before (top answer) here ..
该内容的简短重复之处在于，Webpack不会替代SystemJS(或JSPM)，而只是使其变得多余.
A brief repeat of that content is that Webpack does not replace SystemJS (or JSPM) it simply makes them redundant.
但是，JSPM提供了捆绑功能，这是一个转折.那为什么要转向Webpack?
However, there is a twist here in that JSPM provides bundling. So why move to Webpack?
JSPM的好处是易于配置.
The benefit of JSPM is ease of configuration.
同样的好处也是它的失败，因为易于配置意味着缺少选项，而缺少选项意味着缺乏控制.
This same benefit is also its downfall, in that ease of configuration means lack of options and lack of options means lack of control.
Webpack不仅将JS文件打包，还将CSS，HTML和其他所有文件打包到一个bundle.js文件中(一旦缓存)，使Webpack应用程序闪电般快速(但初始加载速度很慢).
Webpack not only bundles JS files, it also bundles CSS, HTML and everything else into a single bundle.js file which (once cached) makes Webpack apps lightning fast (but slow to load initially).
此外，JSPM满足对捆绑器的需求，但是您将如何使用JSPM来转译文件?例如如果我想使用Stylus而不是CSS，我该如何将Stylus文件转换为CSS?我是否会把Gulp混进去(我很伤心，现在它拥有Webpack的下载量的1/3，但在6个月前就领先了).还是切换到Webpack?
Also, JSPM satisfies the need for a bundler but how are you gonna transpile files with JSPM? e.g. If I wanna use Stylus instead of CSS whats gonna transpile my Stylus files to CSS? Am I gonna throw Gulp into the mix (which I am heartbroken about now has 1/3 of Webpack's download but was leading 6 months ago). Or switch to Webpack?
由于文档不佳，所以我不是Webpack的拥护者，但鉴于其拥有如此巨大的市场份额，我认为我们所有人都将很快加入Webpack的行列.
I am not a Webpack fan due to its poor docs but given that it has such a huge market share, I think we will all be jumping on the Webpack boat soon.
这篇关于Angular 2的JSPM与WebPack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
