21

Angular2 と TypeScript を使用してアプリ (大規模) をまとめています。多数のプロジェクトに分割する必要があり、各プロジェクトには、それぞれ.htmlビュー、.cssスタイルシート、および.tsロジック/クラスを備えた多数のコンポーネントがあります。

各プロジェクトを 1 つのファイルにコンパイルし、*.jsIIS で実行されるホスト Web サイトにコピーしたいと考えています。これは、WPF または Silverlight アプリがビルドされ、.xamlすべてのファイルが.dll.

私はウェブを見回して、オプションを使用してファイルを.ts単一のファイルにビルドすることができました。しかし、これはファイルや..js--outFile.htmlcss

私が求めていることは不可能だと言っているとしても、どんな助けも大歓迎です:-)

スティーブン

4

1 に答える 1

26

SystemJS loaderでデフォルトの Angular2tsconfig.jsonを使用している場合:

"module": "system",
"moduleResolution": "node",
...

面倒な作業はすべてSystemJS Build Toolに任せることができます。これは、たとえば、次を使用してプロジェクトで行う方法ですgulp。

  1. *.ts およびインライン *.html テンプレートをコンパイルする

    私はgulp-angular-embed-templatesすぐにすべてtemplateUrlをtemplate文字列にインライン化するために使用しています (このプラグインは Angular 1.* と Angular 2 の両方で動作します)。

    var tsc = require('gulp-typescript');
var tsProject = tsc.createProject('tsconfig.json');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('app.build', function () {
    var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'})
        .pipe(embedTemplates()) // inline templates
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(gulp.dest('build/js'));
});

    これにより、ディレクトリ内に匿名の System.register モジュールbuild/jsが多数生成されます。それらはすべてtemplateUrlインライン化されています。

  2. すべてを 1 つの.jsファイルにまとめる

    これには、たとえば webpack を使用するよりもずっと簡単だと思うので、SystemJS Build Toolを使用します。したがって、このプロセスを自動化するための別の gulp タスクがあります。

    var SystemBuilder = require('systemjs-builder');

gulp.task('app.systemjs.bundle', function () {
    var builder = new SystemBuilder('build/js, {
        paths: {
            '*': '*.js'
        },
        meta: {
            'angular2/*': {
                build: false
            },
            'rxjs/*': {
                build: false
            }
        }
    });

    return builder.bundle('main', 'build/js/app.bundle.js');
});

    ビルダーはSystemJSと同じオプションを使用するため、それらのConfig APIを確認してください。

    Callingbuilder.bundle('main', ...)はmain.js(Angular の呼び出しを使用した最初のスクリプトです。これは、5 分間のクイックスタートでbootstrap確認できるファイルと同じです) を検索します。これは、ビルダーによって検索されたすべてのパスに追加するためです。これは、TS でモジュールをインポートするときに、通常次を呼び出すためです。.js

    import {ModalResultComponent} from './modal-result.component';

    これは依存関係としてコンパイルされ./modal-result.component、ファイル拡張子は気にしません。*.jsそのため、ビルダーがすべてのコンパイル済み JavaScript ファイルを見つけられるように、すべてのパスに追加する必要がありました。

    オプションはmeta、バンドルしたくない依存関係を無視するようにビルダーに指示するだけです。に含めるので、それはAngular2 自体とrxjsライブラリimport 'rxjs/add/operator/map'ですmain.ts。

    これにより、 System.registerapp.bundle.jsを使用して名前付きモジュールとして登録されたすべてのモジュールを含む単一のファイルが生成されます。

  3. 私たちの使用app.bundle.js

    最後の部分は簡単です。デフォルトの Angular2 のものをインポートしてから、bundleオプションを使用して SystemJS にすべての依存関係がどこにあるかを伝えます。

    <script>
System.config({
    packages: {
        '/web': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    bundles: {
        '/web/app.bundle': ['main']
    }
});
System.import('main').then(null, console.error.bind(console));
</script>

    System.import('main')実際に呼び出すと、最初/web/app.bundle.jsにパッケージ内のすべてのモジュールをダウンロードして登録し、その後、mainAngular2 ブートストラップでモジュールをインポートします。

    以上です！

実際にはまったく使用する必要はなく、純粋なスクリプトgulpですべてを行います。node

CSS ファイルのバンドルはcssnanoのようなものを使えば簡単です。どこでも使用方法に関するチュートリアルを見つけることができると確信しています。

同じことをする他の方法があると確信しています。Angular2 は、1 つのテクノロジーのみを使用するように制限しないように設計されています。ただし、デフォルトで Angular2 と同じモジュール システムを使用するため、SystemJS を使用するのが最も簡単な方法のように思えます。

たとえば、commonjsフォーマットも使用できると確信していますが、ローダーにポリフィルも使用する必要がありますが、require()まだ試していません。UMDも試してみる価値があると思います。

于 2016-03-08T13:27:11.887 に答える