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构建器)来打包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屋！