SystemJS 和 Webpack 有什么区别？

小编典典

SystemJS 和 Webpack 有什么区别？

all

我正在创建我的第一个 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 或其他）？
最后，您认为哪个更好？

阅读 62

2022-06-04

共1个答案

小编典典

如果你去 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
的代码。在此示例中，打字稿编译器配置文件将如下所示：

{
  "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
builder）来打包您的 Angular2 应用程序以进行生产。

2022-06-04