SystemJS，Angular2：在 min/dev 包之间切换答案

【问题标题】：SystemJS, Angular2: switching between min/dev bundleSystemJS，Angular2：在 min/dev 包之间切换
【发布时间】：2016-06-22 18:00:47
【问题描述】：

我想将Angular2 与SystemJS 一起使用，这样我就可以轻松地在生产和开发之间切换。在开发中我更喜欢使用每个文件的类，而不是在生产中我想使用单个最小化的angular2 包。

目前我有以下index.html 和config.js：

indexl.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css"/>
    <script type="text/javascript" src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script type="text/javascript" src="/node_modules/systemjs/dist/system.js"></script>
    <script type="text/javascript" src="/js/config.js"></script>
    <script>
        System.import('ts/main.ts').catch(console.error.bind(console));
    </script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

config.js：

System.config({
    transpiler: 'typescript',

    typescriptOptions: {
        emitDecoratorMetadata: true
    },

    map: {
        'angular2': '/node_modules/angular2',
        'rxjs': '/node_modules/rxjs'
    },

    paths: {
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'http': 'node_modules/angular2/bundles/http.dev.js'
    },

    packages: {
        angular2: {
            defaultExtension: 'js'
        },
        rxjs: { defaultExtension: 'js' },
    }
});

问题：

上面的代码非常适合开发。请建议，如何更改 System.config 以便从单个 /node_modules/angular2/bundles/angular2.min.js 使用 angular2。将angular2.min.js 添加到<script ...></script> 不是一个选项，因为在这种情况下我将无法在dev 和min 捆绑之间动态切换（假设index.html 是一个静态页面）

【问题讨论】：

标签： javascript angular systemjs

【解决方案1】：

在开发中，你可以使用他们的 UMD 包，这里是官方指南中的 systemjs 配置文件

/**
 * 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':                        'app', // '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': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

在生产中，您可以使用相同的设置，但这次您使用 SystemJS Bundler 或 Webpack。另外你不能再使用*.min.js，因为它不支持像rollup这样的tree-shaking优化

设置示例，refer 这里

【讨论】：

【解决方案2】：

事实上，如果你想使用/node_modules/angular2/bundles/angular2.min.js，在 SystemJs 中无需配置任何东西，因为模块是使用System.register 显式注册到此文件中的。

因此，您可以从 SystemJS 配置的 map 块中删除 angular2。

【讨论】：

但是如何加载它（/node_modules/angular2/bundles/angular2.min.js）呢？目前在System.config 中没有对它的引用，我不想通过 HTML 的<script> 部分显式加载它 - 因为在这种情况下它也会在开发中加载