Angular アプリを本番用にバンドルする

1. Angular CLI を使用して、本番用に Angular アプリをバンドルする
2. Webpack を使用して Angular アプリを本番環境にバンドルする
3. Gulp を使用して Angular アプリを本番環境にバンドルする
4. まとめ

この記事では、アプリを正常に作成した後、デプロイ用の Angular アプリケーションを構築するためのさまざまな方法を示します。

先に進んでアプリを作成する前に、ng serve --prod を使用してアプリを実行するのが理想的です。次に、次の URL に進みます：http：// localhost：4200 /アプリが実行されていることを確認します。ここから、動作中のアプリケーションの動作を観察できます。

次に、Angular アプリケーションをバンドルするためのさまざまな方法を見てみましょう。

Angular CLI を使用して、本番用に Angular アプリをバンドルする

この方法は、Angular のすべてのバージョンで機能するため、Angular アプリケーションをバンドルするために最も広く受け入れられている方法です。CLI を使用すると、開発者はビルドプロセス中の頭痛の種を減らすことができます。

CLI 方式は、Ahead ofTimeCompilation を使用するようにプロジェクトを適合させたい開発者にとって最善の策です。

まず、CLI を Angular アプリケーションにインストールする必要があります。ターミナルを開き、npm install -g @angular/cli と入力して、Enter キーを押します。

それが完全にインストールされたら、新しいフォルダに移動し、ng new newApp と入力して新しいアプリケーションを作成します。そこで、このフォルダーに進んでアプリの作成を開始します。

アプリを開発したら、ng build と入力してアプリをバンドルします。

バンドルされたアプリの圧縮には通常理想的です。これにより、アプリの読み込みが速くなり、通常は効率的に機能します。

Brotli 圧縮を使用して圧縮できます。ターミナルを開いて、次のように入力します。for i in dist/*/*; do brotli $i を実行します。

次に、Angular と Angular CLI のバンドルが完了しました。

Webpack を使用して Angular アプリを本番環境にバンドルする

webpack メソッドは、強力なモジュールバンドラーと見なされることがよくあります。ビルドされたアプリのソースコードを監視し、import ステートメントを探します。

2つの依存関係グラフを作成してから、アプリケーション用に 2つのバンドルファイルをリリースします。1つはアプリケーションコードのみを含む app.js で、もう 1つはすべてのベンダーの依存関係を含む vendor.js ファイルと呼ばれます。

Webpack をインストールするには、最初に angular-webpack という新しいプロジェクトフォルダーを作成し、このファイルに cd して package.json というファイルを作成し、その中に次のコードをコピーします。

コードスニペット（package.json）：

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

次に、ターミナルを開き、npm install を使用してこれらのパッケージをインストールします。プロジェクトが完了したら、ng build コマンドを実行します。

Gulp を使用して Angular アプリを本番環境にバンドルする

Gulp は、複雑で大規模なプロジェクトをより効率的に構築できるため、Angular 2 フレームワークに Angular アプリケーションをバンドルするためのもう 1つの強力なツールです。また、gulp ビルドプロセスには自動化できる部分があり、ワークフローの煩わしさが軽減されます。

まず、新しいプロジェクトを作成します。フォルダ内に移動し、$npm install gulp を使用して、ターミナルから gulp をインストールします。

プロジェクトフォルダーに gulpfile.js ファイルを作成し、すべての HTML ファイルを app/views フォルダーから dist フォルダーにコピーします。次に、ターミナルから $gulp copy-html-files を実行します。

開発者は、gulp build に関連するすべてのタスクを実行する必要はありません。 $npm install gulp-run-sequence をインストールする必要があります。これにより、gulpfile.js 内のいくつかのタスクをターミナルから実行できます。

プロジェクトの準備が整ったら、$gulp build を実行します。

おそらくバージョン管理の前に、dist フォルダーから一部のコンテンツを削除したい場合、または開発者が以前のファイルを消去して新しいファイルを挿入したい場合は、次のように入力するだけです。npm install gulp-clean ターミナルで。

gulp を使用して Angular アプリを構築するために必要な手順は非常に手間がかかることを考慮すると、このプロセスを自動化できます。npm install gulp-watch をインストールします。これにより、ファイルを変更するたびに、実行シーケンスで定義されたコマンドが再実行されます。

まとめ

Angular でアプリを最適に構築するにはさまざまな方法があります。採用される方法は、主に、構築しようとしているプロジェクトの種類、時間、および経験によって異なります。