SystemJS和Webpack有什么区别？
我正在创build我的第一个Angular 2应用程序，我想知道模块加载器的作用。 为什么我们需要他们？ 我试图search和search谷歌，我不明白为什么我们需要安装其中的一个来运行我们的应用程序？
仅仅使用import来加载节点模块的东西是不够的？
我遵循这个教程 （使用SystemJS），它使我使用systemjs.config.js文件：
/** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'transpiled', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Individual files (~300 requests): function packIndex(pkgName) { packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; } // Bundled (~40 requests): function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config); })(this);
为什么我们需要这个configuration文件？
为什么我们需要SystemJS（或WebPack或其他）？
最后，你认为哪个更好？
如果你进入SystemJS Github页面，你会看到这个工具的描述：
通用dynamic模块加载器 – 在浏览器和NodeJS中加载ES6模块，AMD，CommonJS和全局脚本。
因为在TypeScript或ES6中使用模块，所以需要一个模块加载器。 在SystemJS的情况下， systemjs.config.js允许我们configuration模块名称与相应文件匹配的方式。
如果您明确使用它来导入应用程序的主模块，则此configuration文件（和SystemJS）是必需的：
<script> System.import('app').catch(function(err){ console.error(err); }); </script>
当使用TypeScript并将编译器configuration到commonjs模块时，编译器会创build不再基于SystemJS的代码。 在这个例子中，打字稿编译器的configuration文件将如下所示：
{ "compilerOptions": { "target": "es5", "module": "commonjs", // <------ "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } }
Webpack是一个灵活的模块捆绑器。 这意味着它更进一步，不仅处理模块，而且还提供了一种打包应用程序（concat文件，uglify文件，…）的方法。 它还提供了一个开发负载重新开发的开发服务器
SystemJS和Webpack是不同的，但是使用SystemJS，你仍然有工作要做（例如用Gulp或者SystemJS构build器 ）来打包你的Angular2应用程序进行生产。
SystemJS工程客户端。 它需要时根据需要dynamic加载模块（文件）。 您不必预先加载整个应用程序。 你可以加载一个文件，例如，在一个button点击处理程序。
SystemJS代码：
// example import at top of file import myModule from 'my-module' myModule.doSomething() // example dynamic import (could be placed anywhere in your code) // module not loaded until code is hit System.import('my-module').then((myModule) { // myModule is available here myModule.doSomething() });
除了configuration它的工作， 这就是所有的SystemJS！ 你现在是一个SystemJS亲！
Webpack是完全不同的，需要永远掌握。 它不会和SystemJS做同样的事情，但是在使用Webpack时，SystemJS会变得多余。
Webpack准备一个名为bundle.js的文件 – 这个文件包含了所有的HTML，CSS，JS等等。因为所有的文件都捆绑在一个文件中，所以现在不需要像SystemJS这样的懒惰的加载器（其中单个文件被加载为需要）。
SystemJS的好处是这个懒加载。 该应用程序应加载更快，因为你没有加载一切的一击中。
Webpack的好处在于，尽pipe应用程序最初可能需要几秒钟的时间才能加载，但一旦加载并caching，它就是闪电般的。
我更喜欢SystemJS，但是Webpack似乎比较潮stream。
Angular2快速入门使用SystemJS。
Angular CLI使用Webpack。
Webpack 2（它将提供抖动）处于testing阶段，所以也许现在是移植到Webpack的时候了。
注SystemJS正在实施ES6模块加载标准 。 Webpack只是另一个npm模块。
任务运行者（对于那些想了解SystemJS可能存在的生态系统的人来说是可选的）
使用SystemJS的唯一责任就是延迟加载文件，所以仍然需要一些东西来缩小这些文件，将这些文件（例如从SASS转换到CSS）等等。这些必须完成的工作被称为任务 。
Webpack在configuration的时候可以正确地为你做这件事（并且把输出捆绑在一起）。 如果你想用SystemJS做类似的事情，你通常会使用JavaScript任务运行器。 最stream行的任务跑步者是另一个叫做gulp的 npm模块。
所以，例如，SystemJS可能会延迟加载一个被gulp缩小的缩小的JavaScript文件。 Gulp安装正确后，可以dynamic缩减文件并实时重新加载。 实时重新加载是自动检测代码更改和自动更新浏览器刷新。 伟大的发展。 使用CSS，直播是可能的（即你看到页面更新新的样式，甚至没有页面重新加载）。
Webpack和gulp可以执行的许多其他任务将会覆盖太多。 我提供了一个例子:)
到目前为止，我正在使用systemjs。 它是逐个加载文件，第一次加载是3-4秒没有缩小文件。 切换到webpack后，我获得了很大的性能提升。 现在只需要加载一个包文件（也是几乎从不改变，几乎总是被caching的polyfills和vendor libs）就是这样。 现在只需要一秒钟来加载客户端应用程序。 没有额外的客户端逻辑。 性能越高，加载的单个文件的数量越less。 使用systemjs时，应该考虑dynamic地导入模块以节省性能。 使用webpack，你主要关注你的逻辑，因为一旦你的浏览器被压缩和caching，性能将会很好。
对于复杂的表单加载面板，SystemJs比较好，例如当我们的仪表板提供了10个以上的表单，并且每个表单都使用完全不同的模块（如表格，树列表等等）时，系统performance出更好的性能，在简单的网站和页面其反向和它更好地使用webpack那里
