私は次のような構造を持つ作業Angular2アプリケーションを持っているAngular2アプリケーション

ためSystemjsビルダーで複数のバンドルを作成します。私は次のような構造を持つ作業Angular2アプリケーションを持っているAngular2アプリケーション

今

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

、私はすべての私のtypescriptですと1つのファイルを作成するために、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ではなく、/ app/sharedモジュール用のcommon.jsと/ app/components内の他のすべてのモジュールについては、moduleA.js、moduleB.jsなどです。

これはsystemjs-builderで行うことができますか？これはかなり一般的な機能でなければなりませんが、ドキュメントに何も表示されません。

EDIT： 私はこの

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モジュールを参照し、また、唯一のあなたはdependendenciesを破棄するバンドル算術演算を使用する必要がcommon.js

出典

2016-08-14 David

であるべきものができます：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>

あなたがロードし

一つの方法は、それがこのような構造を持っているだろう取得します必要に応じてバンドルし、システムを設定して設定します：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

私は次のような構造を持つ作業Angular2アプリケーションを持っているAngular2アプリケーション

答えて

関連する問題