angular2 – SystemJS和Webpack有什么区别？

发布时间：2020-12-17 09:04:26 所属栏目：安全来源：网络整理

导读：我创建了我的第一个Angular 2应用程序，我会弄清楚模块加载程序的作用是什么。为什么我们需要它们？我试图在谷歌搜索和搜索，我不明白为什么我们需要安装其中之一来运行我们的应用程序。不能够只是使用导入从节点模块加载东西？我跟着this tutorial(使用S

我创建了我的第一个Angular 2应用程序，我会弄清楚模块加载程序的作用是什么。
为什么我们需要它们？我试图在谷歌搜索和搜索，我不明白为什么我们需要安装其中之一来运行我们的应用程序。

不能够只是使用导入从节点模块加载东西？

我跟着this tutorial(使用SystemJS)，它让我使用systemjs.config.js文件：

/**
 * System configuration for Angular 2 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',};
  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或其他)？
最后，在你看来，什么更好？

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

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

因为您在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是一个灵活的模块bundler。这意味着它进一步，不仅处理模块，而且提供了一种方式来打包您的应用程序(concat文件，uglify文件，…)。它还提供一个开发服务器负载重新加载开发

SystemJS和Webpack是不同的，但使用SystemJS，你仍然有工作要做(例如Gulp或SystemJS builder)打包您的Angular2应用程序的生产。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!