如何将Angular2 RC1与systemjs捆绑在一起

Question

在发布之前,候选角度提供了捆绑文件.由于发布候选版本没有更多的捆绑文件.包括angular2和rxjs我的应用程序现在可以加载超过7秒的671个请求.这削弱了发展.

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

Answer 1

你只需要使用一个捆绑器:

• UMD文件:它可能是最简单的解决方案.正如您在此示例中看到的那样.您只需要在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'
          }
      }
  });
  

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

• systemjs-builder + gulp:如果你想继续使用systemjs,那么使用这个解决方案是一个很好的调用,但是我已经测试了它并且生成捆绑包花了我30秒,这使它对开发没有那么有用(也许我在做有些不对劲[几乎可以肯定]),但你仍然可以在这里查看如何使用system-builder捆绑你的应用程序;

• webpack: 我目前正在使用webpack.Webpack有一个名为webpack-dev-server的开发工具,它将应用程序虚拟地捆绑在内存中,使开发过程中的过程更快(+热重新加载).您可以在此处找到快速视频教程,并在此处查看 Angular 2文档中的更详细说明.为了使用webpack你必须安装webpack(和webpack-dev-server,如果你愿意的话)打包:npm i -S webpack webpack-dev-server,创建一个webpack.config.js文件并运行它只是webpack为了生成bundle文件或者webpack-dev-server --inline创建一个aut的服务器重新捆绑您的修改.--inline选项在浏览器窗口中启用自动重新加载:

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

  现在在index.html上插入bundle.js文件: <script src="BUILD_DIR/bundle.js"></script>

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

Answer 2

为了获得更轻量级的项目,您应该检查SystemJS Builder或JSPM来捆绑您的项目.

示例种子项目:https://github.com/madhukard/angular2-jspm-seed

@BrunoGarcia在这里给出了一个非常好的信息:https://stackoverflow.com/a/37098964/5706293