angular - 如何将 Angular2 RC1 与 systemjs bundle 在一起

Question

在候选版本发布之前，angular 提供了一个 bundle 文件。自发布候选版本以来，不再有 bundle 文件。包括 angular2 和 rxjs，我的应用程序现在在 7 秒内发出 671 个请求来加载。这阻碍了发展。

有谁知道如何 bundle angular 和 rxjs 并将它们包含在 system.config 中？

Answer 1

你只需要使用一个打包器:

• UMD 文件:这可能是最简单的解决方案。正如您在此 example 中看到的那样.你只需要在你的 systemjs 配置文件中引用 UMD 文件(对生产环境不是很有用):

  System.config({
      packages: {
          app: {
              main: './main.ts',
              defaultExtension: 'ts'
          },
          '@angular/core': {
              main: 'core.umd.js',
              defaultExtension: 'js'
          },
          '@angular/compiler': {
              main: 'compiler.umd.js',
              defaultExtension: 'js'
          },
          '@angular/common': {
              main: 'common.umd.js',
              defaultExtension: 'js'
          },
          '@angular/platform-browser-dynamic': {
              main: 'platform-browser-dynamic.umd.js',
              defaultExtension: 'js'
          },
          '@angular/platform-browser': {
              main: 'platform-browser.umd.js',
              defaultExtension: 'js'
          },
          rxjs: {
              defaultExtension: 'js'
          }
      }
  });
  

  你可以找到另一个例子(可能更好)here !

• systemjs-builder + gulp:如果你想继续使用 systemjs，使用这个解决方案是一个很好的选择，但是我已经测试过了，我花了 30 秒来生成包，使它对开发没那么有用(也许我做错了什么 [几乎可以肯定])，但您仍然可以检查如何使用系统构建器 bundle 您的应用程序 here ;

• webpack:我目前正在使用 webpack。 Webpack 有一个名为 webpack-dev-server 的开发工具，它将应用程序虚拟地 bundle 在内存上，从而使开发过程中的过程更快(+ 热重载)。您可以快速找到 video tutorial此处以及 Angular 2 文档中的更详细描述 here .为了使用 webpack，您必须安装 webpack(如果需要，还需要安装 webpack-dev-server)包:npm i -S webpack webpack-dev-server ，创建一个 webpack.config.js 文件并仅使用 webpack 运行它只生成 bundle 文件或 webpack-dev-server --inline创建一个自动重新 bundle 您的修改的服务器。 --inline 选项可以在浏览器窗口上自动重新加载:

  // webpack.config.js file
  module.exports = {
      entry: 'SRC_DIR/main.js',
      output: {
          path: 'BUILD_DIR',
          filename: 'bundle.js'
      }
  }
  

  现在将您的 bundle.js 文件插入到您的 index.html 中:<script src="BUILD_DIR/bundle.js"></script>

最后这两个选项将允许您生成整个应用程序的 bundle ，您可以手动将其包含在 index.html 文件中。