web-dev-qa-db-ja.com

Angular2RC1をsystemjsにバンドルする方法

リリース候補の前にangularバンドルファイルを提供しました。リリース候補以降、バンドルファイルはありません。angular2とrxjsを含めると、アプリは7秒以上で671リクエストを実行するようになりました。これにより開発が不自由になりました。

angularとrxjsをバンドルしてsystem.configに含める方法を知っている人はいますか？

angularbundlerxjssystemjs
13
CurlyFro

軽量のプロジェクトを取得するには、 SystemJS Builder または [〜＃〜] jspm [〜＃〜] をチェックしてプロジェクトをバンドルする必要があります。

シードプロジェクトの例： https://github.com/madhukard/angular2-jspm-seed

@BrunoGarciaはここで非常に素晴らしい情報を提供しました： https://stackoverflow.com/a/37098964/570629

6
eko

バンドラーを使用する必要があります。

  • UMDファイル：おそらく最も簡単な解決策です。あなたがこれで見ることができるように 例 。 systemjs構成ファイルでUMDファイルを参照する必要があります（実稼働環境ではあまり役に立ちません）。

    System.config({
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts'
        },
        '@angular/core': {
            main: 'core.umd.js',
            defaultExtension: 'js'
        },
        '@angular/compiler': {
            main: 'compiler.umd.js',
            defaultExtension: 'js'
        },
        '@angular/common': {
            main: 'common.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser-dynamic': {
            main: 'platform-browser-dynamic.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser': {
            main: 'platform-browser.umd.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});

    あなたは別の例を見つけることができます（おそらくより良い） ここ ！

  • systemjs-builder + gulp：systemjsを使い続けたい場合は、このソリューションを使用することをお勧めしますが、テストしたところ、時間がかかりましたバンドルを生成するのに30秒かかり、開発にはあまり役立ちません（おそらく私は何か間違ったことをしていました[ほぼ確実に]）が、system-builderを使用してアプリケーションをバンドルする方法を確認できます ここ ;

  • webpack：現在webpackを使用しています。 Webpackにはwebpack-dev-serverと呼ばれる開発ツールがあり、アプリケーションを仮想的にメモリにバンドルして、開発中のプロセスを高速化します（+ホットリロード）。簡単な ビデオチュートリアル こことAngular 2ドキュメント ここ からのより詳細な説明を見つけることができます。webpackを使用するには、インストールする必要がありますwebpack（および必要に応じてwebpack-dev-server）パッケージ：npm i -S webpack webpack-dev-server、webpack.config.jsファイルを作成し、webpackバンドルファイルを生成するか、webpack-dev-server --inlineを使用して、変更を加えて再バンドルするサーバーを作成します。--inlineオプションを使用すると、ブラウザウィンドウで自動リロードが有効になります。

    // webpack.config.js file
module.exports = {
    entry: 'SRC_DIR/main.js',
    output: {
        path: 'BUILD_DIR',
        filename: 'bundle.js'
    }
}

    次に、bundle.jsファイルをindex.htmlに挿入します：<script src="BUILD_DIR/bundle.js"></script>

これらの最後の2つのオプションを使用すると、index.htmlファイルに手動で含めることができるアプリケーション全体のバンドルを生成できます。

8
dygufa

1）gulp-concatを使用してindex.htmlに含まれるすべてのjsファイルとcssファイルをcon-catします。

2）バンドルangular systemjs.config.jsファイルに記載されているライブラリとアプリコンポーネント。gulpsystemjs-builderを使用します。

3）gulp-uglifyを使用してバンドルを縮小します。

0
Tushar Tibude