JSPM 与 Angular 2 的 WebPack 对比

问题描述 投票:0回答:1

最近我在我的 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-03-26

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

所以我找到了 Ahead-of-Time 编译器说明书(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)——它制作了下载后立即启动的小包。

这需要并行设置,尽管所有 Angular 模块都是使用 npm (而不是 jspm)安装的。通过一些努力,也许也可以使用 JSPM 来实现此目的,但我还没有研究过。 JSPM 和这本 AoT 食谱都使用 rollup,因此它将 ngc 编译器步骤与 JSPM 集成,但棘手的部分是让 TypeScript 使用 jspm_packages 而不是 node_modules。

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

angular webpack jspm
1个回答
6
投票

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

SystemJS 与 JSPM

JSPM 本质上是 SystemJS,其优点是 JSPM 会为您配置 systemjs.config.js。当 JSPM 起作用时我喜欢它(遗憾的是并不总是如此)。

这样做的好处是 JSPM 还可以为您捆绑 JS 文件。

JSPM 与 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 的船。

© www.soinside.com 2019 - 2024. All rights reserved.