使用Systemjs-builder为Angular2应用程序创建多个捆绑包

本文介绍了使用Systemjs-builder为Angular2应用程序创建多个捆绑包的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个具有以下结构的Angular2应用程序:

I have a working Angular2 application with the following structure:

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

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

Now, I'm using systemjs-builder to create a single file with all my typescript, in my gulp file:

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

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

And then in my index.html for my application:

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

现在一切正常，但是我的应用程序正在增长到多个模块，并且我想将其拆分为不同的模块文件，因此我要使用/app/shared的common.js而不是bundle.app.js.模块，然后是/app/components内部的所有其他模块的moduleA.js，moduleB.js等.

Everything works fine now, but my application is growing to multiple modules and I'd like to split it into differente module files, so instead of bundle.app.js I'd have common.js for the /app/shared module and then moduleA.js, moduleB.js and so on for all the other modules inside /app/components.

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

Can this be done with systemjs-builder? This has to be a pretty common feature but I can´t see anything in the documentation.

我设法创建了几个这样的捆绑包

I managed to create a few bundles like this

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');
})

但是我不认为这是完全可以的.我以前的单个捆绑包是2267KB，现在我的3个模块是785KB(common.js)+ 2567KB(moduleA.js)+ 1,530KB(moduleB.js)，这没有道理.

but I don´t think this is totally fine; my previous single bundle was 2,267KB and now my 3 modules are 785KB (common.js) + 2,567KB (moduleA.js) + 1,530KB (moduleB.js), which doesn´t make sense.

如果我检查moduleA和moduleB捆绑包中的代码，我会看到Angular2模块以及仅应位于common.js中的东西

If I check the code inside the moduleA and moduleB bundles I can see Angular2 modules and also stuff which should only be in common.js

推荐答案

您必须使用捆绑算法来丢弃依赖关系: https://github.com/systemjs/builder#bundle-arithmetic

You have to use Bundle Arithmetic to discard dependendencies: https://github.com/systemjs/builder#bundle-arithmetic

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

You have to build moduleA and moduleB without references to common files.

获得它的一种方法是具有以下结构:

One way to get it would be to have this structure:

/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

In addition you would load the bundles on demand, configuring systemjs to make it: https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md#bundle-extension

如果进行配置，则可以使用:

If you configure it you can use:

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

</body>

然后Systemjs会在需要时加载每个捆绑软件.

And Systemjs load each bundle when its needs.

这篇关于使用Systemjs-builder为Angular2应用程序创建多个捆绑包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！