Question

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

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

我已关注this tutorial（使用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 module loading standard。 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，mget(ls(pattern = "*.AM"))允许我们配置模块名称与其相应文件匹配的方式。

如果您明确使用它来导入应用程序的主模块，则此配置文件（和SystemJS）是必需的：

systemjs.config.js

使用TypeScript并将编译器配置到<script> System.import('app').catch(function(err){ console.error(err); }); </script>模块时，编译器会创建不再基于SystemJS的代码。在此示例中，typescript编译器配置文件将如下所示：

commonjs

Webpack是一个灵活的模块捆绑器。这意味着它更进一步，并不仅仅处理模块，而且还提供了一种打包应用程序的方法（concat文件，uglify文件......）。它还为开发服务器提供负载重新加载以进行开发

SystemJS和Webpack不同，但是使用SystemJS，您仍有工作要做（例如使用Gulp或SystemJS builder）来封装Angular2应用程序以进行生产。

Answer 3

到目前为止，我使用的是systemjs。它是逐个加载文件，第一次加载需要3-4秒而没有缩小文件。切换到webpack后，我的性能得到了很大改善。现在只需加载一个捆绑文件（也是polyfill和供应商库，几乎从未改变过，几乎总是缓存）就是这样。现在加载客户端应用程序只需要一秒钟。没有额外的客户端逻辑。由于加载的单个文件数量越少，性能越高。使用systemjs时，您应该考虑动态导入模块以节省性能。使用webpack时，您主要关注逻辑，因为一旦捆绑包被缩小并缓存在您的浏览器中，性能仍然会很好。

SystemJS和Webpack之间有什么区别？

3 个答案:

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