如何为 plunker 创建 Angular2 单个文件？答案

【问题标题】：How to create Angular2 single file for plunker?如何为 plunker 创建 Angular2 单个文件？
【发布时间】：2016-08-05 18:16:52
【问题描述】：

我正在使用such plunker，就像 Angular2 的入门者一样。但它非常慢。主要是因为每次重新加载时它都会尝试转换它：

var angularVersion = '2.0.0-rc.4';

System.config({
  baseUrl: '/',
  paths: {
    'npmcdn:*': 'https://npmcdn.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "npmcdn:@*/*/package.json"
  ],

  map: {
    '@angular/core': 'npmcdn:@angular/core@'+angularVersion,
    '@angular/compiler': 'npmcdn:@angular/compiler@'+angularVersion,
    '@angular/common': 'npmcdn:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'npmcdn:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'npmcdn:@angular/platform-browser-dynamic@'+angularVersion,
    'rxjs': 'npmcdn:rxjs@5.0.0-beta.6',
    'zone.js': 'npmcdn:zone.js@0.6.12',
    'reflect-metadata': 'npmcdn:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },

  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

我正在考虑使用 Angular2 的所有供应商部分预编译一种单一文件包的想法，以使其更快并且只转换应用程序的代码而不是库。

已经有解决方案了吗？

【问题讨论】：

文档已经声明Do not transpile in the browser during development or for production.
我也需要它用于 plunker 中的演示，并可以进行快速更改

标签： typescript angular plunker

【解决方案1】：

Angular2 快速入门使用聚合的 UMD 模块。你应该看看live demo。它更改 SystemJS 配置以加载 UMD 模块而不是每个单独的文件。这是文件的重要部分。

ngPackageNames.forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

【讨论】：