diff --git a/adev-ja/src/content/tools/cli/build.en.md b/adev-ja/src/content/tools/cli/build.en.md new file mode 100644 index 0000000000..0c7c792ece --- /dev/null +++ b/adev-ja/src/content/tools/cli/build.en.md @@ -0,0 +1,149 @@ +# Building Angular apps + +You can build your Angular CLI application or library with the `ng build` command. +This will compile your TypeScript code to JavaScript, as well as optimize, bundle, and minify the output as appropriate. + +`ng build` only executes the builder for the `build` target in the default project as specified in `angular.json`. +Angular CLI includes four builders typically used as `build` targets: + +| Builder | Purpose | +| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `@angular-devkit/build-angular:application` | Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with [esbuild](https://esbuild.github.io/). | +| `@angular-devkit/build-angular:browser-esbuild` | Bundles a client-side application for use in a browser with [esbuild](https://esbuild.github.io/). See [`browser-esbuild` documentation](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) for more information. | +| `@angular-devkit/build-angular:browser` | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/). | +| `@angular-devkit/build-angular:ng-packagr` | Builds an Angular library adhering to [Angular Package Format](tools/libraries/angular-package-format). | + +Applications generated by `ng new` use `@angular-devkit/build-angular:application` by default. +Libraries generated by `ng generate library` use `@angular-devkit/build-angular:ng-packagr` by default. + +You can determine which builder is being used for a particular project by looking up the `build` target for that project. + + + +{ + "projects": { + "my-app": { + "architect": { + // `ng build` invokes the Architect target named `build`. + "build": { + "builder": "@angular-devkit/build-angular:application", + … + }, + "serve": { … } + "test": { … } + … + } + } + } +} + + + +This page discusses usage and options of `@angular-devkit/build-angular:application`. + +## Output directory + +The result of this build process is output to a directory (`dist/${PROJECT_NAME}` by default). + +## Configuring size budgets + +As applications grow in functionality, they also grow in size. +The CLI lets you set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define. + +Define your size boundaries in the CLI configuration file, `angular.json`, in a `budgets` section for each [configured environment](tools/cli/environments). + + + +{ + … + "configurations": { + "production": { + … + "budgets": [ + { + "type": "initial", + "maximumWarning": "250kb", + "maximumError": "500kb" + }, + ] + } + } +} + + + +You can specify size budgets for the entire app, and for particular parts. +Each budget entry configures a budget of a given type. +Specify size values in the following formats: + +| Size value | Details | +| :-------------- | :-------------------------------------------------------------------------- | +| `123` or `123b` | Size in bytes. | +| `123kb` | Size in kilobytes. | +| `123mb` | Size in megabytes. | +| `12%` | Percentage of size relative to baseline. \(Not valid for baseline values.\) | + +When you configure a budget, the builder warns or reports an error when a given part of the application reaches or exceeds a boundary size that you set. + +Each budget entry is a JSON object with the following properties: + +| Property | Value | +| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| type | The type of budget. One of:
Value Details
bundle The size of a specific bundle.
initial The size of JavaScript and CSS needed for bootstrapping the application. Defaults to warning at 500kb and erroring at 1mb.
allScript The size of all scripts.
all The size of the entire application.
anyComponentStyle This size of any one component stylesheet. Defaults to warning at 2kb and erroring at 4kb.
anyScript The size of any one script.
any The size of any file.
| +| name | The name of the bundle (for `type=bundle`). | +| baseline | The baseline size for comparison. | +| maximumWarning | The maximum threshold for warning relative to the baseline. | +| maximumError | The maximum threshold for error relative to the baseline. | +| minimumWarning | The minimum threshold for warning relative to the baseline. | +| minimumError | The minimum threshold for error relative to the baseline. | +| warning | The threshold for warning relative to the baseline (min & max). | +| error | The threshold for error relative to the baseline (min & max). | + +## Configuring CommonJS dependencies + +Always prefer native [ECMAScript modules](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) (ESM) throughout your application and its dependencies. +ESM is a fully specified web standard and JavaScript language feature with strong static analysis support. This makes bundle optimizations more powerful than other module formats. + +Angular CLI also supports importing [CommonJS](https://nodejs.org/api/modules.html) dependencies into your project and will bundle these dependencies automatically. +However, CommonJS modules can prevent bundlers and minifiers from optimizing those modules effectively, which results in larger bundle sizes. +For more information, see [How CommonJS is making your bundles larger](https://web.dev/commonjs-larger-bundles). + +Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. +When you encounter a CommonJS dependency, consider asking the maintainer to support ECMAScript modules, contributing that support yourself, or using an alternative dependency which meets your needs. +If the best option is to use a CommonJS dependency, you can disable these warnings by adding the CommonJS module name to `allowedCommonJsDependencies` option in the `build` options located in `angular.json`. + + + +"build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "allowedCommonJsDependencies": [ + "lodash" + ] + … + } + … +}, + + + +## Configuring browser compatibility + +The Angular CLI uses [Browserslist](https://github.com/browserslist/browserslist) to ensure compatibility with different browser versions. +Depending on supported browsers, Angular will automatically transform certain JavaScript and CSS features to ensure the built application does not use a feature which has not been implemented by a supported browser. However, the Angular CLI will not automatically add polyfills to supplement missing Web APIs. Use the `polyfills` option in `angular.json` to add polyfills. + +By default, the Angular CLI uses a `browserslist` configuration which [matches browsers supported by Angular](reference/versions#browser-support) for the current major version. + +To override the internal configuration, run [`ng generate config browserslist`](cli/generate/config), which generates a `.browserslistrc` configuration file in the project directory matching Angular's supported browsers. + +See the [browserslist repository](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions. +Avoid expanding this list to more browsers. Even if your application code more broadly compatible, Angular itself might not be. +You should only ever _reduce_ the set of browsers or versions in this list. + +HELPFUL: Use [browsersl.ist](https://browsersl.ist) to display compatible browsers for a `browserslist` query. + +## Configuring Tailwind + +Angular supports [Tailwind](https://tailwindcss.com/), a utility-first CSS framework. + +Follow the [Tailwind documentation](https://tailwindcss.com/docs/installation/framework-guides/angular) for integrating with Angular CLI. diff --git a/adev-ja/src/content/tools/cli/build.md b/adev-ja/src/content/tools/cli/build.md index 0c7c792ece..5373c9f9d4 100644 --- a/adev-ja/src/content/tools/cli/build.md +++ b/adev-ja/src/content/tools/cli/build.md @@ -1,22 +1,22 @@ -# Building Angular apps +# Angularアプリケーションのビルド -You can build your Angular CLI application or library with the `ng build` command. -This will compile your TypeScript code to JavaScript, as well as optimize, bundle, and minify the output as appropriate. +Angular CLIアプリケーションまたはライブラリは、`ng build`コマンドでビルドできます。 +これにより、TypeScriptコードがJavaScriptにコンパイルされ、必要に応じて出力が最適化、バンドル、ミニファイされます。 -`ng build` only executes the builder for the `build` target in the default project as specified in `angular.json`. -Angular CLI includes four builders typically used as `build` targets: +`ng build`は、`angular.json`で指定されたデフォルトプロジェクトの`build`ターゲットのビルダーのみを実行します。 +Angular CLIには、通常`build`ターゲットとして使用される4つのビルダーが含まれています。 -| Builder | Purpose | +| ビルダー | 目的 | | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `@angular-devkit/build-angular:application` | Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with [esbuild](https://esbuild.github.io/). | -| `@angular-devkit/build-angular:browser-esbuild` | Bundles a client-side application for use in a browser with [esbuild](https://esbuild.github.io/). See [`browser-esbuild` documentation](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) for more information. | -| `@angular-devkit/build-angular:browser` | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/). | -| `@angular-devkit/build-angular:ng-packagr` | Builds an Angular library adhering to [Angular Package Format](tools/libraries/angular-package-format). | +| `@angular-devkit/build-angular:application` | クライアントサイドバンドル、Nodeサーバー、およびビルド時プリレンダリングされたルートを持つアプリケーションを[esbuild](https://esbuild.github.io/)でビルドします。 | +| `@angular-devkit/build-angular:browser-esbuild` | ブラウザで使用するクライアントサイドアプリケーションを[esbuild](https://esbuild.github.io/)でバンドルします。詳細については、[`browser-esbuild`ドキュメント](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder)を参照してください。 | +| `@angular-devkit/build-angular:browser` | ブラウザで使用するクライアントサイドアプリケーションを[webpack](https://webpack.js.org/)でバンドルします。 | +| `@angular-devkit/build-angular:ng-packagr` | [Angular Package Format](tools/libraries/angular-package-format)に準拠したAngularライブラリをビルドします。 | -Applications generated by `ng new` use `@angular-devkit/build-angular:application` by default. -Libraries generated by `ng generate library` use `@angular-devkit/build-angular:ng-packagr` by default. +`ng new`で生成されたアプリケーションは、デフォルトで`@angular-devkit/build-angular:application`を使用します。 +`ng generate library`で生成されたライブラリは、デフォルトで`@angular-devkit/build-angular:ng-packagr`を使用します。 -You can determine which builder is being used for a particular project by looking up the `build` target for that project. +特定のプロジェクトで使用されているビルダーは、そのプロジェクトの`build`ターゲットを調べることで判断できます。 @@ -39,18 +39,18 @@ You can determine which builder is being used for a particular project by lookin -This page discusses usage and options of `@angular-devkit/build-angular:application`. +このページでは、`@angular-devkit/build-angular:application`の使用法とオプションについて説明します。 -## Output directory +## 出力ディレクトリ {#output-directory} -The result of this build process is output to a directory (`dist/${PROJECT_NAME}` by default). +このビルドプロセスの結果はディレクトリに出力されます（デフォルトでは`dist/${PROJECT_NAME}`）。 -## Configuring size budgets +## サイズバジェットの設定 {#configuring-size-budgets} -As applications grow in functionality, they also grow in size. -The CLI lets you set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define. +アプリケーションは機能が増えるにつれて、サイズも大きくなります。 +CLIを使用すると、設定でサイズしきい値を設定して、アプリケーションの各部分が定義したサイズ境界内に収まるようにできます。 -Define your size boundaries in the CLI configuration file, `angular.json`, in a `budgets` section for each [configured environment](tools/cli/environments). +サイズ境界は、CLI設定ファイル`angular.json`の、各[設定済み環境](tools/cli/environments)の`budgets`セクションで定義します。 @@ -72,45 +72,45 @@ Define your size boundaries in the CLI configuration file, `angular.json`, in a -You can specify size budgets for the entire app, and for particular parts. -Each budget entry configures a budget of a given type. -Specify size values in the following formats: +アプリケーション全体および特定のパーツに対してサイズバジェットを指定できます。 +各バジェットエントリは、特定のタイプのバジェットを設定します。 +サイズ値は次の形式で指定します。 -| Size value | Details | +| サイズ値 | 詳細 | | :-------------- | :-------------------------------------------------------------------------- | -| `123` or `123b` | Size in bytes. | -| `123kb` | Size in kilobytes. | -| `123mb` | Size in megabytes. | -| `12%` | Percentage of size relative to baseline. \(Not valid for baseline values.\) | +| `123`または`123b` | バイト単位のサイズ。 | +| `123kb` | キロバイト単位のサイズ。 | +| `123mb` | メガバイト単位のサイズ。 | +| `12%` | ベースラインに対するサイズの割合。(ベースライン値には無効です。) | -When you configure a budget, the builder warns or reports an error when a given part of the application reaches or exceeds a boundary size that you set. +バジェットを設定すると、アプリケーションの特定のパーツが設定した境界サイズに達するか超えた場合に、ビルダーが警告またはエラーを報告します。 -Each budget entry is a JSON object with the following properties: +各バジェットエントリは、次のプロパティを持つJSONオブジェクトです。 -| Property | Value | +| プロパティ | 値 | | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| type | The type of budget. One of:
Value Details
bundle The size of a specific bundle.
initial The size of JavaScript and CSS needed for bootstrapping the application. Defaults to warning at 500kb and erroring at 1mb.
allScript The size of all scripts.
all The size of the entire application.
anyComponentStyle This size of any one component stylesheet. Defaults to warning at 2kb and erroring at 4kb.
anyScript The size of any one script.
any The size of any file.
| -| name | The name of the bundle (for `type=bundle`). | -| baseline | The baseline size for comparison. | -| maximumWarning | The maximum threshold for warning relative to the baseline. | -| maximumError | The maximum threshold for error relative to the baseline. | -| minimumWarning | The minimum threshold for warning relative to the baseline. | -| minimumError | The minimum threshold for error relative to the baseline. | -| warning | The threshold for warning relative to the baseline (min & max). | -| error | The threshold for error relative to the baseline (min & max). | +| type | バジェットのタイプ。次のいずれかです:
値 詳細
bundle 特定のバンドルのサイズ。
initial アプリケーションのブートストラップに必要なJavaScriptとCSSのサイズ。デフォルトでは500kbで警告、1mbでエラーになります。
allScript すべてのスクリプトのサイズ。
all アプリケーション全体のサイズ。
anyComponentStyle 任意のコンポーネントスタイルシートのサイズ。デフォルトでは2kbで警告、4kbでエラーになります。
anyScript 任意のスクリプトのサイズ。
any 任意のファイルのサイズ。
| +| name | バンドルの名前 (`type=bundle`の場合)。 | +| baseline | 比較のためのベースラインサイズ。 | +| maximumWarning | ベースラインに対する警告の最大しきい値。 | +| maximumError | ベースラインに対するエラーの最大しきい値。 | +| minimumWarning | ベースラインに対する警告の最小しきい値。 | +| minimumError | ベースラインに対するエラーの最小しきい値。 | +| warning | ベースラインに対する警告のしきい値 (最小および最大)。 | +| error | ベースラインに対するエラーのしきい値 (最小および最大)。 | -## Configuring CommonJS dependencies +## CommonJS依存関係の設定 {#configuring-commonjs-dependencies} -Always prefer native [ECMAScript modules](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) (ESM) throughout your application and its dependencies. -ESM is a fully specified web standard and JavaScript language feature with strong static analysis support. This makes bundle optimizations more powerful than other module formats. +アプリケーションとその依存関係の全体で、常にネイティブの[ECMAScriptモジュール](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) (ESM) を優先してください。 +ESMは、強力な静的解析サポートを備えた完全に規定されたWeb標準およびJavaScript言語機能です。これにより、他のモジュール形式よりもバンドル最適化が強力になります。 -Angular CLI also supports importing [CommonJS](https://nodejs.org/api/modules.html) dependencies into your project and will bundle these dependencies automatically. -However, CommonJS modules can prevent bundlers and minifiers from optimizing those modules effectively, which results in larger bundle sizes. -For more information, see [How CommonJS is making your bundles larger](https://web.dev/commonjs-larger-bundles). +Angular CLIは、[CommonJS](https://nodejs.org/api/modules.html)依存関係をプロジェクトにインポートすることもサポートしており、これらの依存関係を自動的にバンドルします。 +しかし、CommonJSモジュールは、バンドラーやミニファイアがそれらのモジュールを効果的に最適化するのを妨げ、結果としてバンドルサイズが大きくなる可能性があります。 +詳細については、[CommonJSがバンドルを大きくする仕組み](https://web.dev/commonjs-larger-bundles)を参照してください。 -Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. -When you encounter a CommonJS dependency, consider asking the maintainer to support ECMAScript modules, contributing that support yourself, or using an alternative dependency which meets your needs. -If the best option is to use a CommonJS dependency, you can disable these warnings by adding the CommonJS module name to `allowedCommonJsDependencies` option in the `build` options located in `angular.json`. +Angular CLIは、ブラウザアプリケーションがCommonJSモジュールに依存していることを検出すると、警告を出力します。 +CommonJS依存関係に遭遇した場合は、メンテナーにECMAScriptモジュールのサポートを依頼するか、自分でそのサポートに貢献するか、またはニーズを満たす代替の依存関係を使用することを検討してください。 +CommonJS依存関係を使用するのが最善の選択肢である場合は、`angular.json`にある`build`オプションの`allowedCommonJsDependencies`オプションにCommonJSモジュール名を追加することで、これらの警告を無効にできます。 @@ -127,23 +127,23 @@ If the best option is to use a CommonJS dependency, you can disable these warnin -## Configuring browser compatibility +## ブラウザの互換性を設定する {#configuring-browser-compatibility} -The Angular CLI uses [Browserslist](https://github.com/browserslist/browserslist) to ensure compatibility with different browser versions. -Depending on supported browsers, Angular will automatically transform certain JavaScript and CSS features to ensure the built application does not use a feature which has not been implemented by a supported browser. However, the Angular CLI will not automatically add polyfills to supplement missing Web APIs. Use the `polyfills` option in `angular.json` to add polyfills. +Angular CLIは、異なるブラウザバージョンとの互換性を確保するために[Browserslist](https://github.com/browserslist/browserslist)を使用します。 +サポートされているブラウザに応じて、Angularは、ビルドされたアプリケーションがサポートされているブラウザによって実装されていない機能を使用しないように、特定のJavaScriptおよびCSS機能を自動的に変換します。ただし、Angular CLIは、不足しているWeb APIを補うためにポリフィルを自動的に追加しません。`angular.json`の`polyfills`オプションを使用してポリフィルを追加します。 -By default, the Angular CLI uses a `browserslist` configuration which [matches browsers supported by Angular](reference/versions#browser-support) for the current major version. +デフォルトでは、Angular CLIは、現在のメジャーバージョンで[Angularがサポートするブラウザに一致する](reference/versions#browser-support)`browserslist`設定を使用します。 -To override the internal configuration, run [`ng generate config browserslist`](cli/generate/config), which generates a `.browserslistrc` configuration file in the project directory matching Angular's supported browsers. +内部設定を上書きするには、[`ng generate config browserslist`](cli/generate/config)を実行します。これにより、Angularがサポートするブラウザに一致する`.browserslistrc`設定ファイルがプロジェクトディレクトリに生成されます。 -See the [browserslist repository](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions. -Avoid expanding this list to more browsers. Even if your application code more broadly compatible, Angular itself might not be. -You should only ever _reduce_ the set of browsers or versions in this list. +特定のブラウザとバージョンをターゲットにする方法の詳細は、[browserslistリポジトリ](https://github.com/browserslist/browserslist)を参照してください。 +このリストをより多くのブラウザに拡張することは避けてください。アプリケーションコードがより広範に互換性がある場合でも、Angular自体はそうではない可能性があります。 +このリストのブラウザまたはバージョンのセットは、常に_減らす_べきです。 -HELPFUL: Use [browsersl.ist](https://browsersl.ist) to display compatible browsers for a `browserslist` query. +HELPFUL: [browsersl.ist](https://browsersl.ist)を使用して、`browserslist`クエリの互換性のあるブラウザを表示します。 -## Configuring Tailwind +## Tailwindの設定 {#configuring-tailwind} -Angular supports [Tailwind](https://tailwindcss.com/), a utility-first CSS framework. +Angularは[Tailwind](https://tailwindcss.com/)、ユーティリティファーストのCSSフレームワークをサポートしています。 -Follow the [Tailwind documentation](https://tailwindcss.com/docs/installation/framework-guides/angular) for integrating with Angular CLI. +Angular CLIとの統合については、[Tailwindのドキュメント](https://tailwindcss.com/docs/installation/framework-guides/angular)を参照してください。