Angular CLIアプリケーションまたはライブラリは、ng build
コマンドでビルドできます。
これにより、TypeScriptコードがJavaScriptにコンパイルされ、必要に応じて出力が最適化、バンドル、ミニファイされます。
ng build
は、angular.json
で指定されたデフォルトプロジェクトのbuild
ターゲットのビルダーのみを実行します。
Angular CLIには、通常build
ターゲットとして使用される4つのビルダーが含まれています。
ビルダー | 目的 |
---|---|
@angular-devkit/build-angular:application |
クライアントサイドバンドル、Nodeサーバー、およびビルド時プリレンダリングされたルートを持つアプリケーションをesbuildでビルドします。 |
@angular-devkit/build-angular:browser-esbuild |
ブラウザで使用するクライアントサイドアプリケーションをesbuildでバンドルします。詳細については、browser-esbuild ドキュメントを参照してください。 |
@angular-devkit/build-angular:browser |
ブラウザで使用するクライアントサイドアプリケーションをwebpackでバンドルします。 |
@angular-devkit/build-angular:ng-packagr |
Angular Package Formatに準拠したAngularライブラリをビルドします。 |
ng new
で生成されたアプリケーションは、デフォルトで@angular-devkit/build-angular:application
を使用します。
ng generate library
で生成されたライブラリは、デフォルトで@angular-devkit/build-angular:ng-packagr
を使用します。
特定のプロジェクトで使用されているビルダーは、そのプロジェクトのbuild
ターゲットを調べることで判断できます。
{ "projects": { "my-app": { "architect": { // `ng build` invokes the Architect target named `build`. "build": { "builder": "@angular-devkit/build-angular:application", … }, "serve": { … } "test": { … } … } } }}
このページでは、@angular-devkit/build-angular:application
の使用法とオプションについて説明します。
出力ディレクトリ
このビルドプロセスの結果はディレクトリに出力されます(デフォルトではdist/${PROJECT_NAME}
)。
サイズバジェットの設定
アプリケーションは機能が増えるにつれて、サイズも大きくなります。 CLIを使用すると、設定でサイズしきい値を設定して、アプリケーションの各部分が定義したサイズ境界内に収まるようにできます。
サイズ境界は、CLI設定ファイルangular.json
の、各設定済み環境のbudgets
セクションで定義します。
{ … "configurations": { "production": { … "budgets": [ { "type": "initial", "maximumWarning": "250kb", "maximumError": "500kb" }, ] } }}
アプリケーション全体および特定のパーツに対してサイズバジェットを指定できます。 各バジェットエントリは、特定のタイプのバジェットを設定します。 サイズ値は次の形式で指定します。
サイズ値 | 詳細 |
---|---|
123 または123b |
バイト単位のサイズ。 |
123kb |
キロバイト単位のサイズ。 |
123mb |
メガバイト単位のサイズ。 |
12% |
ベースラインに対するサイズの割合。(ベースライン値には無効です。) |
バジェットを設定すると、アプリケーションの特定のパーツが設定した境界サイズに達するか超えた場合に、ビルダーが警告またはエラーを報告します。
各バジェットエントリは、次のプロパティを持つJSONオブジェクトです。
プロパティ | 値 | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | バジェットのタイプ。次のいずれかです:
|
||||||||||||||||
name | バンドルの名前 (type=bundle の場合)。 |
||||||||||||||||
baseline | 比較のためのベースラインサイズ。 | ||||||||||||||||
maximumWarning | ベースラインに対する警告の最大しきい値。 | ||||||||||||||||
maximumError | ベースラインに対するエラーの最大しきい値。 | ||||||||||||||||
minimumWarning | ベースラインに対する警告の最小しきい値。 | ||||||||||||||||
minimumError | ベースラインに対するエラーの最小しきい値。 | ||||||||||||||||
warning | ベースラインに対する警告のしきい値 (最小および最大)。 | ||||||||||||||||
error | ベースラインに対するエラーのしきい値 (最小および最大)。 |
CommonJS依存関係の設定
アプリケーションとその依存関係の全体で、常にネイティブのECMAScriptモジュール (ESM) を優先してください。 ESMは、強力な静的解析サポートを備えた完全に規定されたWeb標準およびJavaScript言語機能です。これにより、他のモジュール形式よりもバンドル最適化が強力になります。
Angular CLIは、CommonJS依存関係をプロジェクトにインポートすることもサポートしており、これらの依存関係を自動的にバンドルします。 しかし、CommonJSモジュールは、バンドラーやミニファイアがそれらのモジュールを効果的に最適化するのを妨げ、結果としてバンドルサイズが大きくなる可能性があります。 詳細については、CommonJSがバンドルを大きくする仕組みを参照してください。
Angular CLIは、ブラウザアプリケーションがCommonJSモジュールに依存していることを検出すると、警告を出力します。
CommonJS依存関係に遭遇した場合は、メンテナーにECMAScriptモジュールのサポートを依頼するか、自分でそのサポートに貢献するか、またはニーズを満たす代替の依存関係を使用することを検討してください。
CommonJS依存関係を使用するのが最善の選択肢である場合は、angular.json
にあるbuild
オプションのallowedCommonJsDependencies
オプションにCommonJSモジュール名を追加することで、これらの警告を無効にできます。
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "allowedCommonJsDependencies": [ "lodash" ] … } …},
ブラウザの互換性を設定する
Angular CLIは、異なるブラウザバージョンとの互換性を確保するためにBrowserslistを使用します。
サポートされているブラウザに応じて、Angularは、ビルドされたアプリケーションがサポートされているブラウザによって実装されていない機能を使用しないように、特定のJavaScriptおよびCSS機能を自動的に変換します。ただし、Angular CLIは、不足しているWeb APIを補うためにポリフィルを自動的に追加しません。angular.json
のpolyfills
オプションを使用してポリフィルを追加します。
デフォルトでは、Angular CLIは、現在のメジャーバージョンでAngularがサポートするブラウザに一致するbrowserslist
設定を使用します。
内部設定を上書きするには、ng generate config browserslist
を実行します。これにより、Angularがサポートするブラウザに一致する.browserslistrc
設定ファイルがプロジェクトディレクトリに生成されます。
特定のブラウザとバージョンをターゲットにする方法の詳細は、browserslistリポジトリを参照してください。 このリストをより多くのブラウザに拡張することは避けてください。アプリケーションコードがより広範に互換性がある場合でも、Angular自体はそうではない可能性があります。 このリストのブラウザまたはバージョンのセットは、常に_減らす_べきです。
HELPFUL: browsersl.istを使用して、browserslist
クエリの互換性のあるブラウザを表示します。
Tailwindの設定
AngularはTailwind、ユーティリティファーストのCSSフレームワークをサポートしています。
Angular CLIとの統合については、Tailwindのドキュメントを参照してください。