“systemjs-builder”：如何将 js 文件中的所有依赖项构建到一个 bundle.js 文件中

Posted 2023-02-22

【中文标题】“systemjs-builder”：如何将 js 文件中的所有依赖项构建到一个 bundle.js 文件中

【英文标题】："systemjs-builder": How to build all dependencies in js file to one bundle.js file

【发布时间】：2017-07-07 17:47:11

【问题描述】：

我将 systemjs-builder 与 angular2 一起使用。 我想要每个模块文件的构建器捆绑文件。 例如：我的结构如下

Main.ts

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  AppModule               from './AppModule';

AppModule.ts

import NgModule, CUSTOM_ELEMENTS_SCHEMA, ErrorHandler from "@angular/core";
import CommonModule, LocationStrategy, HashLocationStrategy from "@angular/common";
import appRoutingProviders, routing from "./Routes";
import LoginComponent from "./components/user/LoginComponent";
import ErrorComponent from "./components/common/errorPage/ErrorComponent";

Routes.ts 

path: "accounts",loadChildren: 'app/components/account/AccountModule#AccountModule',
path: "contacts",loadChildren: 'app/components/contact/ContactModule#ContactModule'

现在我使用builder.bundle('[app/**/*]',bundle.js) 将所有组件构建到一个文件中，所以大小非常大。 我想在Main.ts（AppModule.ts，AppModule 中的所有组件......）额外库（angular2/core...）中构建所有依赖项到'bundle.js'。 以及AccountModule 到AccountModule.js 的所有依赖项，ContactModule 到ContactModule.js 的所有依赖项。 在生产中使用延迟加载。 任何解决此问题的方法，谢谢

【参考方案1】：

如果您生成单个捆绑包...只能加载它。您必须创建不同的捆绑包。

例如，一个用于 Angular 和 rxjs 的包，另一个用于主 ng-module，另一个用于每个惰性 ng-module。

前几天一直在测试，看看这个分支：

https://github.com/tolemac/systemjs-test/tree/bundle-format-system?files=1

这是一个小角度应用程序的示例，使用供应商、应用程序和惰性模块的捆绑包。

克隆 repo，签出“bundle-format-system”分支、“npm install”和“gulp bundle”

【讨论】：

感谢@Javier Ros，我将代码安排到许多文件夹和每个文件夹的构建器包中。

为什么不更新您的问题或添加评论以与社区的其他人分享您的解决方案？

哦，对不起，我找到了一些答案，我可以为每个文件夹构建捆绑包，但我不喜欢这个解决方案，所以我在这里问了问题。很长一段时间我没有任何答案，所以我必须安排我的代码。再次抱歉。

您的应用正在将所有数据合并到单个 bundle vendor.js 中，包括应用数据和 polyfill。它没有显示任何输出，也没有显示任何错误。

参见问题 #1。有几个分支。