JSPM与WebPack在Angular 2中的比较

11

最近我在我的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存储库中使用几乎任何模块。

在阅读外部文章时,我有印象人们正在转向将Angular 2应用程序迁移到webpack上。我自己没有转向webpack,因为我认为我的设置很好,而且webpack似乎需要更多的配置。

然而,我担心对JSPM的支持会逐渐消失,因为越来越多的人开始转向webpack。

因此,我应该因为这个原因切换到webpack吗?切换到webpack会给我带来一些未曾发现的好处吗?

我有一些非常简单的Angular 2快速启动模板,演示了我的设置,可以在这里找到:https://github.com/fintechneo/angular2-templates

希望能获得一些关于切换到webpack的好处的建议。


更新于2017-03-26

自发布此问题以来,我发现需要更快的生产构建加载时间。即使JSPM(或webpack)生成了优化的捆绑包,它仍然太大,并且需要在下载捆绑包后编译Angular 2模板。

因此,我找到了Ahead-of-Time编译器食谱(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html),它可以生成小型捆绑包,在下载后立即启动。

不过,这需要使用npm安装所有angular模块的并行设置(而非jspm)。也许可以通过一些努力使用JSPM做到这一点,但我还没有研究过。JSPM和这个AoT食谱都使用rollup,所以最好将ngc编译器步骤与JSPM集成,但棘手的部分是要让TypeScript使用jspm_packages而不是node_modules。

上面提供的链接中更新了AoT,仍然在开发环境中使用JSPM。

1个回答

6
这个答案需要分解如下...
SystemJS v JSPM
JSPM本质上是带有优势的SystemJS,JSPM会为您配置systemjs.config.js。当它起作用时,我喜欢JSPM(但不幸的是并不总是这样)。
好处在于JSPM还会为您捆绑JS文件。
JSPM v Webpack
考虑到JSPM实际上正在使用SystemJS作为其内部机制,因此这个问题本质上是我们应该使用SystemJS还是Webpack。
又来了!我之前已经回答过这个问题(最佳答案),链接在这里.. SystemJS和Webpack之间的区别是什么? 简要重复一下内容,Webpack不能替代SystemJS(或JSPM),它只是使它们变得多余。
然而,这里有一个转折,即JSPM提供了捆绑。那么为什么要转向Webpack呢?
JSPM的好处在于易于配置。
这个好处也是它的缺点,因为易于配置意味着缺乏选项,缺乏选项意味着缺乏控制。
Webpack不仅可以打包JS文件,还可以将CSS、HTML和其他所有内容打包到一个bundle.js文件中(一旦缓存),使Webpack应用程序闪电般快速(但初始加载较慢)。
此外,JSPM满足了使用打包器的需求,但是如何使用JSPM转译文件呢?例如,如果我想使用Stylus而不是CSS,那么谁会将我的Stylus文件转译为CSS?我要混合使用Gulp(现在只有Webpack下载量的1/3,但6个月前它领先)。还是转向Webpack?
由于其文档质量差,我不是Webpack的粉丝,但考虑到它拥有如此巨大的市场份额,我认为我们很快都会加入Webpack的行列。

你是否已经按照我更新的问题描述,使Webpack与AoT生产构建一起工作了? - Peter Salomonsen
我在公司的一个客户项目中开始使用Webpack,即使已经过去了9个月,它仍然非常顺利。该项目现在也已经上线。享受使用Webpack吧。 - Manvendra SK

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接