|
1 | | -# Custom build pipeline |
| 1 | +# カスタムビルドパイプライン |
2 | 2 |
|
3 | | -When building an Angular app we strongly recommend you to use the Angular CLI to leverage its structure-dependent update functionality and build system abstraction. This way your projects benefit from the latest security, performance, and API improvements and transparent build improvements. |
| 3 | +Angularアプリケーションを構築する際、Angular CLIを使用して、その構造に依存した更新機能とビルドシステムの抽象化を活用することを強くおすすめします。これにより、プロジェクトは最新のセキュリティ、パフォーマンス、APIの改善、および透過的なビルドの改善の恩恵を受けることができます。 |
4 | 4 |
|
5 | | -This page explores the **rare use cases** when you need a custom build pipeline that does not use the Angular CLI. All listed tools below are open source build plugins that are maintained by members of the Angular community. To learn more about their support model and maintenance status look at their documentation and GitHub repository URLs. |
| 5 | +このページでは、Angular CLIを使用しないカスタムビルドパイプラインが必要となる**まれなユースケース**について説明します。以下にリストされているすべてのツールは、Angularコミュニティのメンバーによってメンテナンスされているオープンソースのビルドプラグインです。サポートモデルとメンテナンス状況の詳細については、ドキュメントとGitHubリポジトリのURLを参照してください。 |
6 | 6 |
|
7 | | -## When should you use a custom build pipeline? |
| 7 | +## カスタムビルドパイプラインはいつ使用すべきですか？ |
8 | 8 |
|
9 | | -There are some niche use cases when you may want to maintain a custom build pipeline. For example: |
| 9 | +カスタムビルドパイプラインを維持したいニッチなユースケースがいくつかあります。次に例を示します。 |
10 | 10 |
|
11 | | -* You have an existing app using a different toolchain and you’d like to add Angular to it |
12 | | -* You’re strongly coupled to [module federation](https://module-federation.io/) and unable to adopt bundler-agnostic [native federation](https://www.npmjs.com/package/@angular-architects/native-federation) |
13 | | -* You’d like to create an short-lived experiment using your favorite build tool |
| 11 | +* 異なるツールチェーンを使用している既存のアプリケーションがあり、それにAngularを追加したい場合 |
| 12 | +* [モジュールフェデレーション](https://module-federation.io/)に強く結びついており、バンドラーに依存しない[ネイティブフェデレーション](https://www.npmjs.com/package/@angular-architects/native-federation)を採用できない場合 |
| 13 | +* お気に入りのビルドツールを使用して、短期間の実験を作成したい場合 |
14 | 14 |
|
15 | | -## What are the options? |
| 15 | +## どのような選択肢がありますか？ |
16 | 16 |
|
17 | | -Currently, there are two well supported community tools that enable you to create a custom build pipeline with a [Vite plugin](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) and [Rspack plugin](https://www.npmjs.com/package/@ng-rspack/build). Both of them use underlying abstractions that power the Angular CLI. They allow you to create a flexible build pipeline and require manual maintenance and no automated update experience. |
| 17 | +現在、[Vite プラグイン](https://www.npmjs.com/package/@analogjs/vite-plugin-angular)と[Rspack プラグイン](https://www.npmjs.com/package/@ng-rspack/build)を使用してカスタムビルドパイプラインを作成できる、十分にサポートされた2つのコミュニティツールがあります。どちらも、Angular CLIを強化する基盤となる抽象レイヤを使用しています。これらにより、柔軟なビルドパイプラインを作成できますが、手動でのメンテナンスが必要であり、自動化された更新の体験は得られません。 |
18 | 18 |
|
19 | 19 | ### Rspack |
20 | 20 |
|
21 | | -Rspack is a Rust-based bundler that aims to provide compatibility with the webpack plugin ecosystem. |
| 21 | +Rspackは、webpackプラグインエコシステムとの互換性を提供することを目的としたRustベースのバンドラーです。 |
22 | 22 |
|
23 | | -If your project is tightly coupled to the webpack ecosystem, heavily relying on a custom webpack configuration you can leverage Rspack to improve your build times. |
| 23 | +プロジェクトがwebpackエコシステムに密接に結合されており、カスタムwebpack構成に大きく依存している場合は、Rspackを活用してビルド時間を改善できます。 |
24 | 24 |
|
25 | | -You can find more about Angular Rspack on the project’s [documentation website](https://angular-rspack.dev/guide/migration/from-webpack). |
| 25 | +Angular Rspackの詳細については、プロジェクトの[ドキュメントWebサイト](https://angular-rspack.dev/guide/migration/from-webpack)を参照してください。 |
26 | 26 |
|
27 | 27 | ### Vite |
28 | 28 |
|
29 | | -Vite is a frontend build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is also extensible through its plugin system that allows ecosystems to build integrations with Vite, such as Vitest for unit and browser testing, Storybook for authoring components in isolation, and more. The Angular CLI also uses Vite as its development server. |
| 29 | +Viteは、最新のWebプロジェクト向けに、より高速で無駄のない開発エクスペリエンスを提供することを目的としたフロントエンドビルドツールです。Viteはプラグインシステムを通じて拡張可能で、エコシステムは、ユニットテストおよびブラウザテスト用のVitest、コンポーネントを分離して作成するためのStorybookなど、Viteとの統合を構築できます。Angular CLIは、Viteを開発サーバーとしても使用します。 |
30 | 30 |
|
31 | | -The [AnalogJS Vite plugin for Angular](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) enables the adoption of Angular with a project or framework that uses or is built on top of Vite. This can consist of developing and building an Angular project with Vite directly, or adding Angular to an existing project or pipeline. One example is integrating Angular UI components into a documentation website using [Astro and Starlight](https://analogjs.org/docs/packages/astro-angular/overview). |
| 31 | +[Angular用AnalogJS Viteプラグイン](https://www.npmjs.com/package/@analogjs/vite-plugin-angular)を使用すると、Viteを使用または上に構築されたプロジェクトまたはフレームワークでAngularを採用できます。これには、Viteを使用してAngularプロジェクトを直接開発および構築したり、既存のプロジェクトまたはパイプラインにAngularを追加したりすることが含まれます。1つの例は、[Astro and Starlight](https://analogjs.org/docs/packages/astro-angular/overview)を使用して、Angular UIコンポーネントをドキュメントWebサイトに統合することです。 |
32 | 32 |
|
33 | | -You can learn more about AnalogJS and how to use the plugin through its [documentation page](https://analogjs.org/docs/packages/vite-plugin-angular/overview). |
| 33 | +AnalogJSの詳細とプラグインの使用方法については、[ドキュメントページ](https://analogjs.org/docs/packages/vite-plugin-angular/overview)を参照してください。 |
0 commit comments