爲Angular2應用

我有以下結構的工作Angular2應用程序創建Systemjs建設者多個包：爲Angular2應用

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

現在，我使用systemjs建設者創造用我所有的打字稿單個文件在我一飲而盡文件：

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我有common.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

來源

2016-08-14 David

你必須使用捆綁算術丟棄dependendencies：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加載每個軟件包時，它的需求。

來源

2016-08-19 10:59:14

回答

相關問題