From 67d6e2244da5e72f0b6d966305dd7b94b94a201e Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 8 Sep 2023 22:17:43 +0900 Subject: [PATCH 1/3] translate: guide/esbuild.md --- aio-ja/content/guide/esbuild.en.md | 179 +++++++++++++++++++++++++++++ aio-ja/content/guide/esbuild.md | 102 ++++++++-------- 2 files changed, 230 insertions(+), 51 deletions(-) create mode 100644 aio-ja/content/guide/esbuild.en.md diff --git a/aio-ja/content/guide/esbuild.en.md b/aio-ja/content/guide/esbuild.en.md new file mode 100644 index 0000000000..9eb1e87897 --- /dev/null +++ b/aio-ja/content/guide/esbuild.en.md @@ -0,0 +1,179 @@ +# Getting started with the CLI's esbuild-based build system + +
+ +The esbuild-based ECMAScript module (ESM) application build system feature is available for [developer preview](/guide/releases#developer-preview). +It's ready for you to try, but it might change before it is stable and is not yet recommended for production builds. + +
+ +In v16 and higher, the new build system provides a way to build Angular applications. This new build system includes: + +- A modern output format using ESM, with dynamic import expressions to support lazy module loading. +- Faster build-time performance for both initial builds and incremental rebuilds. +- Newer JavaScript ecosystem tools such as [esbuild](https://esbuild.github.io/) and [Vite](https://vitejs.dev/). + +You can opt-in to use the new builder on a per application basis with minimal configuration updates required. + +## Trying the ESM build system in an Angular CLI application + +A new builder named `browser-esbuild` is available within the `@angular-devkit/build-angular` package that is present in an Angular CLI generated application. The build is a drop-in replacement for the existing `browser` builder that provides the current stable browser application build system. +You can try out the new build system for applications that use the `browser` builder. + +### Updating the application configuration + +The new build system was implemented to minimize the amount of changes necessary to transition your applications. Currently, the new build system is provided via an alternate builder (`browser-esbuild`). You can update the `build` target for any application target to try out the new build system. + +The following is what you would typically find in `angular.json` for an application: + + +... +"architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", +... + + +Changing the `builder` field is the only change you will need to make. + + +... +"architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser-esbuild", +... + + +### Executing a build + +Once you have updated the application configuration, builds can be performed using the `ng build` as was previously done. For the remaining options that are currently not yet implemented in the developer preview, a warning will be issued for each and the option will be ignored during the build. + + + +ng build + + + +### Starting the development server + +The development server now has the ability to automatically detect the new build system and use it to build the application. To start the development server no changes are necessary to the `dev-server` builder configuration or command line. + + + +ng serve + + + +You can continue to use the [command line options](/cli/serve) you have used in the past with the development server. + +
+ +The developer preview currently does not provide HMR support and the HMR related options will be ignored if used. Angular focused HMR capabilities are currently planned and will be introduced in a future version. + +
+ +### Unimplemented options and behavior + +Several build options are not yet implemented but will be added in the future as the build system moves towards a stable status. If your application uses these options, you can still try out the build system without removing them. Warnings will be issued for any unimplemented options but they will otherwise be ignored. However, if your application relies on any of these options to function, you may want to wait to try. + +- [Bundle budgets](https://github.com/angular/angular-cli/issues/25100) (`budgets`) +- [Localization](https://github.com/angular/angular-cli/issues/25099) (`localize`/`i18nDuplicateTranslation`/`i18nMissingTranslation`) +- [Web workers](https://github.com/angular/angular-cli/issues/25101) (`webWorkerTsConfig`) +- [WASM imports](https://github.com/angular/angular-cli/issues/25102) -- WASM can still be loaded manually via [standard web APIs](https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running). + +Building libraries with the new build system via `ng-packagr` is also not yet possible but library build support will be available in a future release. + +### ESM default imports vs. namespace imports + +TypeScript by default allows default exports to be imported as namespace imports and then used in call expressions. This is unfortunately a divergence from the ECMAScript specification. The underlying bundler (`esbuild`) within the new build system expects ESM code that conforms to the specification. The build system will now generate a warning if your application uses an incorrect type of import of a package. However, to allow TypeScript to accept the correct usage, a TypeScript option must be enabled within the application's `tsconfig` file. When enabled, the [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) option provides better alignment with the ECMAScript specification and is also recommended by the TypeScript team. Once enabled, you can update package imports where applicable to an ECMAScript conformant form. + +Using the [`moment`](https://npmjs.com/package/moment) package as an example, the following application code will cause runtime errors: + +```ts +import * as moment from 'moment'; + +console.log(moment().format()); +``` + +The build will generate a warning to notify you that there is a potential problem. The warning will be similar to: + + +▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace] + + src/main.ts:2:12: + 2 │ console.log(moment().format()); + ╵ ~~~~~~ + +Consider changing "moment" to a default import instead: + + src/main.ts:1:7: + 1 │ import * as moment from 'moment'; + │ ~~~~~~~~~~~ + ╵ moment + + + +However, you can avoid the runtime errors and the warning by enabling the `esModuleInterop` TypeScript option for the application and changing the import to the following: + +```ts +import moment from 'moment'; + +console.log(moment().format()); +``` + +## Vite as a development server + +The usage of Vite in the Angular CLI is currently only within a _development server capacity only_. Even without using the underlying Vite build system, Vite provides a full-featured development server with client side support that has been bundled into a low dependency npm package. This makes it an ideal candidate to provide comprehensive development server functionality. The current development server process uses the new build system to generate a development build of the application in memory and passes the results to Vite to serve the application. The usage of Vite, much like the Webpack-based development server, is encapsulated within the Angular CLI `dev-server` builder and currently cannot be directly configured. + +## Known Issues + +There are currently several known issues that you may encounter when trying the new build system. This list will be updated to stay current. If any of these issues are currently blocking you from trying out the new build system, please check back in the future as it may have been solved. + +### Runtime-evaluated dynamic import expressions + +Dynamic import expressions that do not contain static values will be kept in their original form and not processed at build time. This is a limitation of the underlying bundler but is [planned](https://github.com/evanw/esbuild/pull/2508) to be implemented in the future. In many cases, application code can be made to work by changing the import expressions into static strings with some form of conditional statement such as an `if` or `switch` for the known potential files. + +Unsupported: + +```ts +return await import(`/abc/${name}.json`); +``` + +Supported: + +```ts +switch (name) { + case 'x': + return await import('/abc/x.json'); + case 'y': + return await import('/abc/y.json'); + case 'z': + return await import('/abc/z.json'); +} +``` + +### Order-dependent side-effectful imports in lazy modules + +Import statements that are dependent on a specific ordering and are also used in multiple lazy modules can cause top-level statements to be executed out of order. +This is not common as it depends on the usage of side-effectful modules and does not apply to the `polyfills` option. +This is caused by a [defect](https://github.com/evanw/esbuild/issues/399) in the underlying bundler but will be addressed in a future update. + +
+ +Avoiding the use of modules with non-local side effects (outside of polyfills) is recommended whenever possible regardless of the build system being used and avoids this particular issue. Modules with non-local side effects can have a negative effect on both application size and runtime performance as well. + +
+ +### Long build times when using Sass combined with pnpm or yarn PnP + +Applications may have increased build times due to the need to workaround Sass resolution incompabilities when using either the pnpm or Yarn PnP package managers. +Sass files with `@import` or `@use` directives referencing a package when using either of these package managers can trigger the performance problem. + +An alternative workaround that alleviates the build time increases is in development and will be available before the build system moves to stable status. +Both the Yarn package manager in node modules mode and the `npm` package manager are not affected by this problem. + +## Bug reports + +Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues). + +Please provide a minimal reproduction where possible to aid the team in addressing issues. diff --git a/aio-ja/content/guide/esbuild.md b/aio-ja/content/guide/esbuild.md index 9eb1e87897..8b5bed6d83 100644 --- a/aio-ja/content/guide/esbuild.md +++ b/aio-ja/content/guide/esbuild.md @@ -1,30 +1,30 @@ -# Getting started with the CLI's esbuild-based build system +# CLIのesbuildベースビルドシステム入門
-The esbuild-based ECMAScript module (ESM) application build system feature is available for [developer preview](/guide/releases#developer-preview). -It's ready for you to try, but it might change before it is stable and is not yet recommended for production builds. +esbuildベースのECMAScriptモジュール(ESM)アプリケーションビルドシステム機能は[開発者プレビュー](/guide/releases#developer-preview)で利用可能です。 +試すことはできますが、安定版になる前に変更される可能性があり、本番環境でのビルドはまだおすすめできません。
-In v16 and higher, the new build system provides a way to build Angular applications. This new build system includes: +v16以降では、新しいビルドシステムによってAngularアプリケーションをビルドできるようになりました。この新しいビルドシステムには以下が含まれます: -- A modern output format using ESM, with dynamic import expressions to support lazy module loading. -- Faster build-time performance for both initial builds and incremental rebuilds. -- Newer JavaScript ecosystem tools such as [esbuild](https://esbuild.github.io/) and [Vite](https://vitejs.dev/). +- ESMを使用した最新の出力フォーマットで、ダイナミックインポート式を使用し、モジュールの遅延ロードをサポートします。 +- 初期ビルドとインクリメンタルリビルドの両方で、ビルド時のパフォーマンスが向上。 +- [esbuild](https://esbuild.github.io/)や[Vite](https://vitejs.dev/)などの新しいJavaScriptエコシステムツール。 -You can opt-in to use the new builder on a per application basis with minimal configuration updates required. +最小限の設定変更で、アプリケーションごとに新しいビルダーを使用することができます。 -## Trying the ESM build system in an Angular CLI application +## Angular CLIアプリケーションでESMビルドシステムを試す -A new builder named `browser-esbuild` is available within the `@angular-devkit/build-angular` package that is present in an Angular CLI generated application. The build is a drop-in replacement for the existing `browser` builder that provides the current stable browser application build system. -You can try out the new build system for applications that use the `browser` builder. +`browser-esbuild`という新しいビルダーが `@angular-devkit/build-angular` パッケージ内で利用可能です。このビルダーは安定したブラウザアプリケーションのビルドシステムを提供する既存の `browser` ビルダーを置き換えるものです。 +新しいビルドシステムは `browser` ビルダーを使用するアプリケーションで試してみることができます。 -### Updating the application configuration +### アプリケーション設定の変更 -The new build system was implemented to minimize the amount of changes necessary to transition your applications. Currently, the new build system is provided via an alternate builder (`browser-esbuild`). You can update the `build` target for any application target to try out the new build system. +新しいビルドシステムは、アプリケーションの移行に必要な変更を最小限にするように実装されました。現在、新しいビルドシステムは代替ビルダー (`browser-esbuild`) を使って提供されています。任意のアプリケーションの `build` ターゲットを更新して、新しいビルドシステムを試すことができます。 -The following is what you would typically find in `angular.json` for an application: +アプリケーションの`angular.json`には、通常次のような内容が含まれています: ... @@ -34,7 +34,7 @@ The following is what you would typically find in `angular.json` for an applicat ... -Changing the `builder` field is the only change you will need to make. +必要な変更は`builder`フィールドの変更だけです。 ... @@ -44,9 +44,9 @@ Changing the `builder` field is the only change you will need to make. ... -### Executing a build +### ビルドを実行する -Once you have updated the application configuration, builds can be performed using the `ng build` as was previously done. For the remaining options that are currently not yet implemented in the developer preview, a warning will be issued for each and the option will be ignored during the build. +アプリケーションの設定を更新したら、以前と同じように `ng build` を使ってビルドを行うことができます。開発者プレビューでまだ実装されていない残りのオプションについては、それぞれ警告が発行され、ビルド中はそのオプションは無視されます。 @@ -54,9 +54,9 @@ ng build -### Starting the development server +### 開発用サーバーの起動 -The development server now has the ability to automatically detect the new build system and use it to build the application. To start the development server no changes are necessary to the `dev-server` builder configuration or command line. +開発用サーバーは新しいビルドシステムを自動的に検出し、アプリケーションのビルドに使用できます。開発用サーバーを起動するために `dev-server` ビルダー設定やコマンドラインを変更する必要はありません。 @@ -64,30 +64,30 @@ ng serve -You can continue to use the [command line options](/cli/serve) you have used in the past with the development server. +これまで開発用サーバーで使用していた[コマンドラインオプション](/cli/serve)を引き続き使用することができます。
-The developer preview currently does not provide HMR support and the HMR related options will be ignored if used. Angular focused HMR capabilities are currently planned and will be introduced in a future version. +開発者プレビューでは現在HMRをサポートしておらず、HMR関連のオプションは使用されても無視されます。AngularにフォーカスしたHMR機能は現在計画中で、将来のバージョンで導入される予定です。
-### Unimplemented options and behavior +### 未実装のオプションと動作 -Several build options are not yet implemented but will be added in the future as the build system moves towards a stable status. If your application uses these options, you can still try out the build system without removing them. Warnings will be issued for any unimplemented options but they will otherwise be ignored. However, if your application relies on any of these options to function, you may want to wait to try. +いくつかのオプションはまだ実装されていませんが、ビルドシステムが安定段階に向かうにつれて、将来的に追加される予定です。もしあなたのアプリケーションがこれらのオプションを使用しているのであれば、それらを削除せずにビルドシステムを試すことができます。未実装のオプションに対しては警告が出されますが、無視されます。しかし、あなたのアプリケーションがこれらのオプションのどれかに依存して動作しているのであれば、試すのを待ったほうがよいかもしれません。 - [Bundle budgets](https://github.com/angular/angular-cli/issues/25100) (`budgets`) - [Localization](https://github.com/angular/angular-cli/issues/25099) (`localize`/`i18nDuplicateTranslation`/`i18nMissingTranslation`) - [Web workers](https://github.com/angular/angular-cli/issues/25101) (`webWorkerTsConfig`) -- [WASM imports](https://github.com/angular/angular-cli/issues/25102) -- WASM can still be loaded manually via [standard web APIs](https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running). +- [WASM imports](https://github.com/angular/angular-cli/issues/25102) -- WASMは[標準ウェブAPI](https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running)を介して手動でロードすることができます。 -Building libraries with the new build system via `ng-packagr` is also not yet possible but library build support will be available in a future release. +`ng-packagr`を使った新しいビルドシステムでのライブラリのビルドもまだできませんが、ライブラリのビルドサポートは将来のリリースで利用可能になる予定です。 -### ESM default imports vs. namespace imports +### ESM のデフォルトインポートと名前空間インポートの比較 -TypeScript by default allows default exports to be imported as namespace imports and then used in call expressions. This is unfortunately a divergence from the ECMAScript specification. The underlying bundler (`esbuild`) within the new build system expects ESM code that conforms to the specification. The build system will now generate a warning if your application uses an incorrect type of import of a package. However, to allow TypeScript to accept the correct usage, a TypeScript option must be enabled within the application's `tsconfig` file. When enabled, the [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) option provides better alignment with the ECMAScript specification and is also recommended by the TypeScript team. Once enabled, you can update package imports where applicable to an ECMAScript conformant form. +TypeScriptのデフォルトでは、デフォルトエクスポートを名前空間インポートとしてインポートし、それを呼び出し式で使用することができます。これは残念ながらECMAScriptの仕様から逸脱しています。新しいビルドシステムの基礎となるバンドラー(`esbuild`)は、仕様に準拠したESMコードを期待しています。ビルドシステムは、アプリケーションが不正なタイプのパッケージのインポートを使用した場合に警告を生成するようになりました。しかし、TypeScriptが正しい使い方を認めるようにするには、アプリケーションの`tsconfig`ファイルでTypeScriptオプションを有効にする必要があります。[`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop)オプションを有効にすると、ECMAScriptの仕様との整合性が良くなり、TypeScriptチームもこれを推奨しています。有効にすると、パッケージのインポートをECMAScriptに準拠した形に更新することができます。 -Using the [`moment`](https://npmjs.com/package/moment) package as an example, the following application code will cause runtime errors: +[`moment`](https://npmjs.com/package/moment)パッケージを例にとると、次のようなアプリケーションコードは実行時エラーを引き起こします: ```ts import * as moment from 'moment'; @@ -95,7 +95,7 @@ import * as moment from 'moment'; console.log(moment().format()); ``` -The build will generate a warning to notify you that there is a potential problem. The warning will be similar to: +ビルドは、潜在的な問題があることを知らせる警告を生成します。警告は以下のようなものです: ▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace] @@ -113,7 +113,7 @@ Consider changing "moment" to a default import instead: -However, you can avoid the runtime errors and the warning by enabling the `esModuleInterop` TypeScript option for the application and changing the import to the following: +しかし、アプリケーションの `esModuleInterop` TypeScriptオプションを有効にし、importを以下のように変更することで、ランタイムエラーと警告を回避できます: ```ts import moment from 'moment'; @@ -121,25 +121,25 @@ import moment from 'moment'; console.log(moment().format()); ``` -## Vite as a development server +## 開発用サーバーとしてのVite -The usage of Vite in the Angular CLI is currently only within a _development server capacity only_. Even without using the underlying Vite build system, Vite provides a full-featured development server with client side support that has been bundled into a low dependency npm package. This makes it an ideal candidate to provide comprehensive development server functionality. The current development server process uses the new build system to generate a development build of the application in memory and passes the results to Vite to serve the application. The usage of Vite, much like the Webpack-based development server, is encapsulated within the Angular CLI `dev-server` builder and currently cannot be directly configured. +Angular CLIでのViteの使用は、現在のところ_開発用サーバーとしての機能のみ_です。基盤となるViteビルドシステムを使わなくても、Viteはクライアントサイドをサポートしたフル機能の開発サーバーを提供し、依存オブジェクトの少ないnpmパッケージにバンドルされています。このため、包括的な開発用サーバー機能を提供する理想的な候補となります。現在の開発用サーバーのプロセスでは、新しいビルドシステムを使ってアプリケーションの開発用ビルドをメモリ上に生成し、その結果をViteに渡してアプリケーションをサーブします。Viteの使用方法は、Webpackベースの開発サーバーと同様に、Angular CLIの `dev-server` ビルダー内にカプセル化されており、現在のところ直接設定する事ができません。 -## Known Issues +## 既知の問題 -There are currently several known issues that you may encounter when trying the new build system. This list will be updated to stay current. If any of these issues are currently blocking you from trying out the new build system, please check back in the future as it may have been solved. +現在、新しいビルドシステムを試す際に遭遇する可能性のある既知の問題がいくつかあります。このリストは最新のものに更新される予定です。もしこれらの問題のどれかが、現在新しいビルドシステムを試すことを妨げているのであれば、将来それが解決されているかもしれませんので、またチェックしてください。 -### Runtime-evaluated dynamic import expressions +### 実行時に評価されるダイナミックインポート式 -Dynamic import expressions that do not contain static values will be kept in their original form and not processed at build time. This is a limitation of the underlying bundler but is [planned](https://github.com/evanw/esbuild/pull/2508) to be implemented in the future. In many cases, application code can be made to work by changing the import expressions into static strings with some form of conditional statement such as an `if` or `switch` for the known potential files. +静的な値を含まないダイナミックインポート式は、元の形式のまま保持され、ビルド時に処理されません。これは基礎となるバンドラーの制限ですが、将来実装される[予定](https://github.com/evanw/esbuild/pull/2508)です。多くの場合、アプリケーションコードは、既知の潜在的なファイルに対して `if` や `switch` などの何らかの形式の条件文を使って、インポート式を静的な文字列に変更することで動作させることができます。 -Unsupported: +未対応: ```ts return await import(`/abc/${name}.json`); ``` -Supported: +対応済: ```ts switch (name) { @@ -152,28 +152,28 @@ switch (name) { } ``` -### Order-dependent side-effectful imports in lazy modules +### 遅延モジュールにおける順序依存の副作用のあるインポート -Import statements that are dependent on a specific ordering and are also used in multiple lazy modules can cause top-level statements to be executed out of order. -This is not common as it depends on the usage of side-effectful modules and does not apply to the `polyfills` option. -This is caused by a [defect](https://github.com/evanw/esbuild/issues/399) in the underlying bundler but will be addressed in a future update. +特定の順序に依存し、複数の遅延モジュールでも使用されるインポート文は、トップレベルの文が順番通りに実行されないことがあります。 +これは副作用のあるモジュールの使い方に依存するもので、一般的なものではなく、 `polyfills` オプションには当てはまりません。 +これは基礎となるバンドラーの [不具合](https://github.com/evanw/esbuild/issues/399) が原因であり、将来のアップデートで対処される予定です。
-Avoiding the use of modules with non-local side effects (outside of polyfills) is recommended whenever possible regardless of the build system being used and avoids this particular issue. Modules with non-local side effects can have a negative effect on both application size and runtime performance as well. +非ローカルな副作用を持つモジュールの使用は（ポリフィル以外では）、使用するビルドシステムに関係なく、可能な限り避けることが推奨され、この特定の問題を回避することができます。非ローカルな副作用を持つモジュールは、アプリケーションのサイズと実行時のパフォーマンスの両方に悪影響を及ぼします。
-### Long build times when using Sass combined with pnpm or yarn PnP +### Sassとpnpmまたはyarn PnPを組み合わせて使用した場合の長いビルド時間 -Applications may have increased build times due to the need to workaround Sass resolution incompabilities when using either the pnpm or Yarn PnP package managers. -Sass files with `@import` or `@use` directives referencing a package when using either of these package managers can trigger the performance problem. +pnpm または Yarn PnP パッケージ・マネージャーを使用している場合、Sass 解決の非互換性を回避する必要があるため、アプリケーションのビルド時間が長くなる可能性があります。 +これらのパッケージ・マネージャーを使用している場合、パッケージを参照する `@import` ディレクティブまたは `@use` ディレクティブを持つ Sass ファイルがパフォーマンスの問題を引き起こす可能性があります。 -An alternative workaround that alleviates the build time increases is in development and will be available before the build system moves to stable status. -Both the Yarn package manager in node modules mode and the `npm` package manager are not affected by this problem. +ビルド時間の増加を緩和する回避策は現在開発中で、ビルドシステムが安定版になる前に利用可能になる予定です。 +node_modules モードの Yarn パッケージマネージャと `npm` パッケージマネージャはこの問題の影響を受けません。 -## Bug reports +## 不具合報告 -Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues). +問題点や機能のリクエストは [GitHub](https://github.com/angular/angular-cli/issues) で報告してください。 -Please provide a minimal reproduction where possible to aid the team in addressing issues. +チームが問題に対処できるよう、可能な限り最小限の再現例を記載してください。 From 55b73a5fff985e428e3bdaacac024c359def7231 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 8 Sep 2023 22:22:37 +0900 Subject: [PATCH 2/3] lint fix --- aio-ja/content/guide/esbuild.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/aio-ja/content/guide/esbuild.md b/aio-ja/content/guide/esbuild.md index 8b5bed6d83..e891b3d9a0 100644 --- a/aio-ja/content/guide/esbuild.md +++ b/aio-ja/content/guide/esbuild.md @@ -3,7 +3,7 @@
esbuildベースのECMAScriptモジュール(ESM)アプリケーションビルドシステム機能は[開発者プレビュー](/guide/releases#developer-preview)で利用可能です。 -試すことはできますが、安定版になる前に変更される可能性があり、本番環境でのビルドはまだおすすめできません。 +試すことはできますが、安定版になる前に変更される可能性があり、本番環境でのビルドはまだお勧めできません。
@@ -95,7 +95,7 @@ import * as moment from 'moment'; console.log(moment().format()); ``` -ビルドは、潜在的な問題があることを知らせる警告を生成します。警告は以下のようなものです: +ビルドは、潜在的な問題があることを知らせる警告を生成します。警告は次のようなものです: ▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace] @@ -113,7 +113,7 @@ Consider changing "moment" to a default import instead: -しかし、アプリケーションの `esModuleInterop` TypeScriptオプションを有効にし、importを以下のように変更することで、ランタイムエラーと警告を回避できます: +しかし、アプリケーションの `esModuleInterop` TypeScriptオプションを有効にし、importを次のように変更することで、ランタイムエラーと警告を回避できます: ```ts import moment from 'moment'; @@ -123,7 +123,7 @@ console.log(moment().format()); ## 開発用サーバーとしてのVite -Angular CLIでのViteの使用は、現在のところ_開発用サーバーとしての機能のみ_です。基盤となるViteビルドシステムを使わなくても、Viteはクライアントサイドをサポートしたフル機能の開発サーバーを提供し、依存オブジェクトの少ないnpmパッケージにバンドルされています。このため、包括的な開発用サーバー機能を提供する理想的な候補となります。現在の開発用サーバーのプロセスでは、新しいビルドシステムを使ってアプリケーションの開発用ビルドをメモリ上に生成し、その結果をViteに渡してアプリケーションをサーブします。Viteの使用方法は、Webpackベースの開発サーバーと同様に、Angular CLIの `dev-server` ビルダー内にカプセル化されており、現在のところ直接設定する事ができません。 +Angular CLIでのViteの使用は、現在のところ_開発用サーバーとしての機能のみ_です。基盤となるViteビルドシステムを使わなくても、Viteはクライアントサイドをサポートしたフル機能の開発サーバーを提供し、依存オブジェクトの少ないnpmパッケージにバンドルされています。このため、包括的な開発用サーバー機能を提供する理想的な候補となります。現在の開発用サーバーのプロセスでは、新しいビルドシステムを使ってアプリケーションの開発用ビルドをメモリ上に生成し、その結果をViteに渡してアプリケーションをサーブします。Viteの使用方法は、Webpackベースの開発サーバーと同様に、Angular CLIの `dev-server` ビルダー内にカプセル化されており、現在のところ直接設定することができません。 ## 既知の問題 @@ -154,23 +154,23 @@ switch (name) { ### 遅延モジュールにおける順序依存の副作用のあるインポート -特定の順序に依存し、複数の遅延モジュールでも使用されるインポート文は、トップレベルの文が順番通りに実行されないことがあります。 +特定の順序に依存し、複数の遅延モジュールでも使用されるインポート文は、トップレベルの文が順番に実行されないことがあります。 これは副作用のあるモジュールの使い方に依存するもので、一般的なものではなく、 `polyfills` オプションには当てはまりません。 これは基礎となるバンドラーの [不具合](https://github.com/evanw/esbuild/issues/399) が原因であり、将来のアップデートで対処される予定です。
-非ローカルな副作用を持つモジュールの使用は（ポリフィル以外では）、使用するビルドシステムに関係なく、可能な限り避けることが推奨され、この特定の問題を回避することができます。非ローカルな副作用を持つモジュールは、アプリケーションのサイズと実行時のパフォーマンスの両方に悪影響を及ぼします。 +非ローカルな副作用をもつモジュールの使用は（ポリフィル以外では）、使用するビルドシステムに関係なく、可能な限り避けることが推奨され、この特定の問題を回避することができます。非ローカルな副作用をもつモジュールは、アプリケーションのサイズと実行時のパフォーマンスの両方に悪影響を及ぼします。
### Sassとpnpmまたはyarn PnPを組み合わせて使用した場合の長いビルド時間 pnpm または Yarn PnP パッケージ・マネージャーを使用している場合、Sass 解決の非互換性を回避する必要があるため、アプリケーションのビルド時間が長くなる可能性があります。 -これらのパッケージ・マネージャーを使用している場合、パッケージを参照する `@import` ディレクティブまたは `@use` ディレクティブを持つ Sass ファイルがパフォーマンスの問題を引き起こす可能性があります。 +これらのパッケージ・マネージャーを使用している場合、パッケージを参照する `@import` ディレクティブまたは `@use` ディレクティブをもつ Sass ファイルがパフォーマンスの問題を引き起こす可能性があります。 ビルド時間の増加を緩和する回避策は現在開発中で、ビルドシステムが安定版になる前に利用可能になる予定です。 -node_modules モードの Yarn パッケージマネージャと `npm` パッケージマネージャはこの問題の影響を受けません。 +node_modules モードの Yarn パッケージマネージャーと `npm` パッケージマネージャーはこの問題の影響を受けません。 ## 不具合報告 From 98b85227a5760d10fa6eb7829494ae637e71c873 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 8 Sep 2023 22:43:32 +0900 Subject: [PATCH 3/3] update navigation --- aio-ja/content/navigation.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/aio-ja/content/navigation.json b/aio-ja/content/navigation.json index a83171f359..fc4250fa5a 100644 --- a/aio-ja/content/navigation.json +++ b/aio-ja/content/navigation.json @@ -485,8 +485,9 @@ }, { "url": "guide/esbuild", - "title": "esbuild-based Builds", - "tooltip": "Getting started with the CLI's esbuild-based build system." + "title": "esbuildベースのビルド", + "tooltip": "CLIのesbuildベースビルドシステムを使い始める。", + "translated": true }, { "title": "HTTPクライアント",