JSPM与WebPack for Angular 2

时间:2016-10-26 07:29:16

标签: angular webpack jspm

最近我将JSPM用于我的角度2项目,发现它非常简单方便。无论是添加新模块还是创建捆绑以供生产使用。

基本上只是:

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)生成了一个优化的bundle,但它仍然太大,需要在下载bundle之后编译angular2模板。

所以我找到了Ahead-of-Time编译器食谱(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) - 这使得小包在下载后立即启动。

虽然使用npm(而不是jspm)安装了所有角度模块,但这需要一个并行设置。也许可以通过一些努力来使用JSPM,但我还没有考虑过它。 JSPM和这个AoT cookbook都使用汇总,因此它可以将ngc编译器步骤与JSPM集成,但棘手的部分是让TypeScript使用jspm_packages而不是node_modules。

上面的设置链接使用AoT更新,仍然使用JSPM作为开发环境。

1 个答案:

答案 0 :(得分:5)

这个答案要求细分如下..

SystemJS v 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船上跳过。