问题
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.
It's basically just:
jspm install npm:@angular/somepackage
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
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>
It loads and runs fast. Used it for both small and big Angular 2 applications.
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.
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.
Yet I'm worried that support for JSPM will fade out, since it seems like more and more are moving over to webpack.
Should I switch to webpack because of this? Would switching to webpack give me some benefits that I've not discovered?
I have some very simple Angular 2 quick start templates demonstrating my setup that can be found here: https://github.com/fintechneo/angular2-templates
Would be very happy to get some opinions about the benefits of switching to webpack for this setup.
UPDATE 2017-03-26
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.
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.
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.
The link above with the setup is updated with the AoT, and still uses JSPM for the dev environment.
回答1:
This answer requires a breakdown as follows ..
SystemJS v 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).
The benefit here is that JSPM also bundles your JS files for you.
JSPM v 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 ..
What are differences between SystemJS and Webpack?
A brief repeat of that content is that Webpack does not replace SystemJS (or JSPM) it simply makes them redundant.
However, there is a twist here in that JSPM provides bundling. So why move to Webpack?
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 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).
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?
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.
来源：https://stackoverflow.com/questions/40256204/jspm-vs-webpack-for-angular-2