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

Question

我在angular2中使用systemjs-builder。

我想要每个模块文件的生成器捆绑文件。

例:我的结构如下

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的所有依赖关系。

在生产环境中使用延迟加载。

对此问题的任何解决方案，谢谢

Answer 1

如果你生成一个单独的包...只有它才能加载。你必须创建不同的包。

例如，一个用于angular和rxjs的bundle，其他用于main ng-module，以及其他用于每个lazy ng-module。

我过去几天一直在测试它，看看这个分支：

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

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

克隆代码库，签出"bundle-format-system“分支，"npm install”和"gulp bundle“