SystemJS 和 Webpack 有什么区别? [英] What are differences between SystemJS and Webpack?

问题描述

我正在创建我的第一个 Angular 应用程序，我会弄清楚模块加载器的作用是什么.为什么我们需要它们?我试图在 Google 上搜索和搜索，但我不明白为什么我们需要安装其中之一来运行我们的应用程序?

I'm creating my first Angular application and I would figure out what is the role of the module loaders. Why we need them? I tried to search and search on Google and I can't understand why we need to install one of them to run our application?

仅仅使用 import 从节点模块加载东西还不够吗?

Couldn't it be enough to just use import to load stuff from node modules?

我遵循了本教程(使用 SystemJS)它让我使用 systemjs.config.js 文件:

I have followed this tutorial (that uses SystemJS) and it makes me to use systemjs.config.js file:

/**
 * 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 或其他)?
最后，您认为哪个更好?

Why we need this configuration file?
Why we need SystemJS (or WebPack or others)?
Finally, in your opinion what is the better?

推荐答案

如果你去 SystemJS Github 页面，你会看到该工具的描述:

If you go to the SystemJS Github page, you will see the description of the tool:

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

Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.

因为你在 TypeScript 或 ES6 中使用模块，所以你需要一个模块加载器.对于 SystemJS，systemjs.config.js 允许我们配置模块名称与其对应文件匹配的方式.

Because you use modules in TypeScript or ES6, you need a module loader. In the case of SystemJS, the systemjs.config.js allows us to configure the way in which module names are matched with their corresponding files.

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

This configuration file (and SystemJS) is necessary if you explicitly use it to import the main module of your application:

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

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

When using TypeScript, and configuring the compiler to the commonjs module, the compiler creates code that is no longer based on SystemJS. In this example, the typescript compiler config file would appear like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // <------
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Webpack 是一个灵活的模块打包器.这意味着它更进一步，不仅处理模块，还提供了一种打包应用程序的方法(concat 文件、uglify 文件……).它还提供了一个开发服务器，用于开发负载重新加载.

Webpack is a flexible module bundler. This means that it goes further and doesn't only handle modules but also provides a way to package your application (concat files, uglify files, ...). It also provides a dev server with load reload for development.

SystemJS 和 Webpack 不同，但使用 SystemJS，您仍有工作要做(使用 Gulp 或 SystemJS builder 例如)来打包您的 Angular2 应用程序以进行生产.

SystemJS and Webpack are different but with SystemJS, you still have work to do (with Gulp or SystemJS builder for example) to package your Angular2 application for production.

这篇关于SystemJS 和 Webpack 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！