使用 Systemjs-builder 为 Angular2 应用程序创建多个包答案

【问题标题】：Create multiple bundles with Systemjs-builder for an Angular2 application使用 Systemjs-builder 为 Angular2 应用程序创建多个包
【发布时间】：2016-12-21 00:28:39
【问题描述】：

我有一个具有以下结构的工作 Angular2 应用程序：

/app
    /components
        /moduleA
        /moduleB
        /...
    /shared
    app.module.ts
    app.routing.ts
    app.component.ts
    main.ts

现在，我正在使用 systemjs-builder 在我的 gulp 文件中创建一个包含所有打字稿的文件：

gulp.task('bundle', () => {
  builder.buildStatic('app/*.js', 'web/bundle.app.js')
  .then(function() {
    console.log('Build complete');
  })
})

然后在我的 index.html 中为我的应用程序：

<body>
    <app>Loading...</app>
    <!-- application bundle -->
    <script src="bundle.app.js"></script>
</body>

现在一切正常，但我的应用程序正在增长到多个模块，我想将它拆分为不同的模块文件，所以我将使用 common.js 代替 bundle.app.js 来代替 /app/shared模块，然后是 /app/components 中的所有其他模块的 moduleA.js、moduleB.js 等等。

这可以用 systemjs-builder 完成吗？这必须是一个非常常见的功能，但我在文档中看不到任何内容。

编辑： 我设法创建了一些这样的捆绑包

gulp.task('bundle', () => {
  builder.buildStatic('app/*.js - app/components/**/*.js', 'web/common.js')
  .then(function() {
    console.log('Build complete');
  });

  builder.bundle('app/components/moduleA/**/*.js', 'web/moduleA.js');
  builder.bundle('app/components/moduleB/**/*.js', 'web/moduleB.js');
})

但我不认为这完全没问题；我之前的单个捆绑包是 2,267KB，现在我的 3 个模块是 785KB (common.js) + 2,567KB (moduleA.js) + 1,530KB (moduleB.js)，这没有任何意义。

如果我检查 moduleA 和 moduleB 包中的代码，我可以看到 Angular2 模块以及应该只在 common.js 中的东西

【问题讨论】：

标签： angular systemjs

【解决方案1】：

您必须使用 Bundle Arithmetic 来丢弃依赖项：https://github.com/systemjs/builder#bundle-arithmetic

您必须在不引用公共文件的情况下构建 moduleA 和 moduleB。

获得它的一种方法是具有这种结构：

/app
    app.module.ts
    app.routing.ts
    app.component.ts
/modules
    /moduleA
    /moduleB
    /...
/shared
main.ts

然后：

gulp.task('bundle', () => {
  builder.buildStatic('app/**/*.js - /modules/** - /shared/**', 'web/app.js')
  builder.buildStatic('shared/**/*.js', 'web/common.js');

  builder.bundle('modules/moduleA/**/*.js - shared/**', 'web/moduleA.js');
  builder.bundle('modules/moduleB/**/*.js - shared/**', 'web/moduleB.js');
})

在你的 html 中：

<body>
    <app>Loading...</app>
    <!-- application bundle -->
    <script src="common.js"></script>
    <script src="moduleA.js"></script>
    <script src="moduleB.js"></script>
    <script src="app.js"></script>
    <script>
        Sytem.import(main ... balbla);
    </script>

</body>

此外，您可以按需加载捆绑包，配置 systemjs 以使其：https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md#bundle-extension

如果你配置它，你可以使用：

<body>
    <app>Loading...</app>
    <script>
        Sytem.import(main ... balbla);
    </script>

</body>

Systemjs 会在需要时加载每个包。

【讨论】：