Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用Systemjs-builder为Angular2应用程序创建多个包大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个工作的Angular2应用程序具有以下结构:

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

现在,我正在使用systemjs-builder在我的gulp文件中创建一个包含所有typescript的单个文件

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>

一切都工作正常,但我的应用程序正在发展到多个模块,我想将它分成不同的模块文件,所以而不是bundle.app.js我有/ app /共享模块的common.js然后moduleA.js,moduleB.js等等,适用于/ app / components中的所有其他模块.

可以用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的东西.

解决方法

您必须使用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以使其成为:@L_262_18@

如果您配置它,您可以使用:

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

</body>

Systemjs在需要时加载每个bundle.

大佬总结

以上是大佬教程为你收集整理的使用Systemjs-builder为Angular2应用程序创建多个包全部内容,希望文章能够帮你解决使用Systemjs-builder为Angular2应用程序创建多个包所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。