web-dev-qa-db-ja.com

Angular2 HTMLとTypeScriptを1つのファイルにビルドする

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

各プロジェクトを1つの*.jsファイルにコンパイルし、IISで実行されるホストWebサイトにコピーするようにします。これは、.xamlファイルをすべて.dllにコンパイルしてWPFまたはSilverlightアプリを構築する方法と似ています。

私はWebを見回しており、.tsファイルを.jsオプションを使用して単一の--outFileファイルにビルドすることができます。しかし、これは.htmlファイルやcssの助けにはなりません。

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

スティーブン

angulartypescriptsystemjssystemjs-builder
20
Stephen Wilson

SystemJS loader でデフォルトのAngular2 _tsconfig.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'));
});
_

    これにより、_build/js_ディレクトリに多数の anonymous System.register modules が生成されます。それらのすべては、templateUrlがすでにインライン化されています。

  2. すべてを1つの_.js_ファイルにバンドルします

    これには SystemJS Build Tool を使用します。たとえば、webpackを使用するよりも簡単だと思うからです。それで、私はこれをプロセスを自動化するための別の根本的なタスクがあります：

    _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 を確認してください。

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

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

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

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

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

  3. _app.bundle.js_を使用する

    最後はケーキです。デフォルトのAngular2のものをインポートし、 bundle option を使用して、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_をダウンロードしてパッケージ内のすべてのモジュールを登録し、その後モジュールをmainをAngular2ブートストラップにインポートします。

    以上です！

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

CSSファイルのバンドルは cssnano のようなもので簡単で、どこでもそれを使用する方法のチュートリアルを見つけることができると思います。

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

たとえばcommonjs形式も使用できると思いますが、require()ローダーにポリフィルも使用する必要がありますが、まだ試していません。私は生きている [〜＃〜] umd [〜＃〜] も試してみる価値があるかもしれません。

26
martin