SystemJS和Webpack有什么区别？

Question

我正在创建我的第一个Angular应用程序,我会弄清楚模块加载器的作用是什么.为什么我们需要它们？我试图在Google上搜索和搜索,我无法理解为什么我们需要安装其中一个来运行我们的应用程序？

仅仅用于import从节点模块加载东西是不够的？

我已经按照本教程(使用SystemJS),它让我使用systemjs.config.js文件:

/**
 * System configuration for Angular 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);

为什么我们需要这个配置文件？
为什么我们需要SystemJS(或WebPack或其他)？
最后,在您看来哪个更好？

Answer 1

SystemJS在客户端工作.它根据需要动态加载模块(文件).您不必预先加载整个应用程序.例如,您可以在按钮单击处理程序中加载文件.

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()
});

除了将其配置为工作之外,这就是SystemJS的全部内容!您现在是SystemJS专业版!

Webpack完全不同,需要永远掌握.它不像SystemJS那样做,但是,当使用Webpack时,SystemJS变得多余.

Webpack准备一个名为bundle.js的文件 - 这个文件包含所有HTML,CSS,JS等.因为所有文件都捆绑在一个文件中,所以现在不需要像SystemJS那样的延迟加载器(其中单个文件被加载为需要).

SystemJS的优势在于延迟加载.应用程序加载速度更快,因为您没有在一次点击中加载所有内容.

Webpack的优点在于,虽然应用程序最初可能需要几秒钟才能加载,但一旦加载并缓存,它就会闪电般快速.

我更喜欢SystemJS,但Webpack似乎更时尚.

Angular2快速入门使用SystemJS.

Angular CLI使用Webpack.

Webpack 2(将提供树摇动)处于测试阶段,因此可能是转移到Webpack的不利时机.

注意SystemJS正在实施ES6模块加载标准.Webpack只是另一个npm模块.

任务运行者(对于想要了解SystemJS可能存在的生态系统的人的可选读数)

使用SystemJS,它的唯一责任是延迟加载文件,因此仍需要一些东西来缩小这些文件,转换这些文件(例如从SASS到CSS)等.这些必须完成的工作称为任务.

Webpack在配置后,会正确地为您执行此操作(并将输出捆绑在一起).如果你想用SystemJS做类似的事情,你通常会使用JavaScript任务运行器.最受欢迎的任务运行器是另一个名为gulp的 npm模块.

因此,例如,SystemJS可能会延迟加载由gulp缩小的缩小的JavaScript文件.Gulp,正确设置后,可以动态缩小文件并实时重新加载.实时重新加载是自动检测代码更改和自动浏览器刷新以进行更新.在开发期间很棒.使用CSS,可以实时流式传输(即,您可以看到页面更新新样式,而不会重新加载页面).

Webpack和gulp可以执行许多其他任务,这些任务太多而无法覆盖.我提供了一个例子:)

Answer 2

如果您转到SystemJS Github页面,您将看到该工具的描述:

通用动态模块加载器 - 在浏览器和NodeJS中加载ES6模块,AMD,CommonJS和全局脚本.

因为您在TypeScript或ES6中使用模块,所以需要模块加载器.在SystemJS的情况下,systemjs.config.js允许我们配置模块名称与其相应文件匹配的方式.

如果您明确使用它来导入应用程序的主模块,则此配置文件(和SystemJS)是必需的:

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

使用TypeScript并将编译器配置到commonjs模块时,编译器会创建不再基于SystemJS的代码.在此示例中,typescript编译器配置文件将如下所示:

{
  "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构建器)来封装Angular2应用程序以进行生产.