11---
2- title : Compiling Libraries
2+ title : ライブラリのコンパイル
33---
44
55<Intro >
6- This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
6+ このガイドでは、ライブラリの作者が React Compiler を使用して、最適化されたライブラリコードをユーザに配布する方法を説明します。
77</Intro >
88
99<InlineToc />
1010
11- ## Why Ship Compiled Code? {/* why-ship-compiled-code* /}
11+ ## コンパイル済みコードを配布する理由 {/* why-ship-compiled-code* /}
1212
13- As a library author, you can compile your library code before publishing to npm. This provides several benefits:
13+ ライブラリの作者は、 npm に公開する前にライブラリのコードを事前コンパイルできます。これには次のような利点があります。
1414
15- - ** Performance improvements for all users ** - Your library users get optimized code even if they aren't using React Compiler yet
16- - ** No configuration required by users ** - The optimizations work out of the box
17- - ** Consistent behavior ** - All users get the same optimized version regardless of their build setup
15+ - ** すべてのユーザのパフォーマンスが向上 ** - ライブラリのユーザが React Compiler をまだ使用していない場合でも最適化されたコードが利用できる
16+ - ** ユーザによる設定が不要 ** - 最適化がそのまま機能する
17+ - ** 一貫した動作 ** - ユーザのビルド環境にかかわらず、すべてのユーザが同じ最適化済みバージョンを利用できる
1818
19- ## Setting Up Compilation {/* setting-up-compilation* /}
19+ ## コンパイルのセットアップ {/* setting-up-compilation* /}
2020
21- Add React Compiler to your library's build process:
21+ ライブラリのビルドプロセスに React Compiler を追加します。
2222
2323<TerminalBlock >
2424npm install -D babel-plugin-react-compiler@latest
2525</TerminalBlock >
2626
27- Configure your build tool to compile your library. For example, with Babel:
27+ ライブラリをコンパイルするようにビルドツールを設定します。例えば Babel では次のようにします。
2828
2929``` js
3030// babel.config.js
@@ -36,13 +36,13 @@ module.exports = {
3636};
3737```
3838
39- ## Backwards Compatibility {/* backwards-compatibility* /}
39+ ## 後方互換性 {/* backwards-compatibility* /}
4040
41- If your library supports React versions below 19, you'll need additional configuration:
41+ ライブラリが React 19 未満のバージョンをサポートする場合は、追加の設定が必要です。
4242
43- ### 1. Install the runtime package {/* install-runtime-package* /}
43+ ### 1. ランタイムパッケージをインストール {/* install-runtime-package* /}
4444
45- We recommend installing react-compiler-runtime as a direct dependency:
45+ react-compiler-runtime を直接の依存ライブラリとしてインストールすることを推奨します。
4646
4747<TerminalBlock >
4848npm install react-compiler-runtime@latest
@@ -59,48 +59,48 @@ npm install react-compiler-runtime@latest
5959}
6060```
6161
62- ### 2. Configure the target version {/* configure-target-version* /}
62+ ### 2. ターゲットバージョンを設定 {/* configure-target-version* /}
6363
64- Set the minimum React version your library supports:
64+ ライブラリがサポートする最小の React バージョンを設定します。
6565
6666``` js
6767{
6868 target: ' 17' , // Minimum supported React version
6969}
7070```
7171
72- ## Testing Strategy {/* testing-strategy* /}
72+ ## テスト戦略 {/* testing-strategy* /}
7373
74- Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
74+ 互換性を確認するため、コンパイルありとなしの両方でライブラリをテストしてください。コンパイル済みコードに対して既存のテストスイートを実行し、コンパイラを通さない別のテスト設定も作成します。これにより、コンパイルプロセスから生じる可能性のある問題を検出し、あらゆる状況でライブラリが正しく動作することを確認できます。
7575
76- ## Troubleshooting {/* troubleshooting* /}
76+ ## トラブルシューティング {/* troubleshooting* /}
7777
78- ### Library doesn't work with older React versions {/* library-doesnt-work-with-older-react-versions* /}
78+ ### 古い React バージョンでライブラリが動作しない {/* library-doesnt-work-with-older-react-versions* /}
7979
80- If your compiled library throws errors in React 17 or 18:
80+ コンパイル済みライブラリが React 17 または 18 でエラーをスローする場合があります。
8181
82- 1 . Verify you've installed ` react-compiler-runtime ` as a dependency
83- 2 . Check that your ` target ` configuration matches your minimum supported React version
84- 3 . Ensure the runtime package is included in your published bundle
82+ 1 . ` react-compiler-runtime ` が依存ライブラリとしてインストールされていることを確認してください。
83+ 2 . ` target ` の設定がサポート対象の最小 React バージョンと一致していることを確認してください。
84+ 3 . 公開したバンドルにランタイムパッケージが含まれていることを確認してください。
8585
86- ### Compilation conflicts with other Babel plugins {/* compilation-conflicts-with-other-babel-plugins* /}
86+ ### コンパイルが他の Babel プラグインと競合する {/* compilation-conflicts-with-other-babel-plugins* /}
8787
88- Some Babel plugins may conflict with React Compiler:
88+ 一部の Babel プラグインは React Compiler と競合する可能性があります。
8989
90- 1 . Place ` babel-plugin-react-compiler ` early in your plugin list
91- 2 . Disable conflicting optimizations in other plugins
92- 3 . Test your build output thoroughly
90+ 1 . ` babel-plugin-react-compiler ` をプラグインリストの先頭付近に配置してください。
91+ 2 . 他のプラグインで競合する最適化を無効化してください。
92+ 3 . ビルド出力を十分にテストしてください。
9393
94- ### Runtime module not found {/* runtime-module-not-found* /}
94+ ### ランタイムモジュールが見つからない {/* runtime-module-not-found* /}
9595
96- If users see "Cannot find module 'react-compiler-runtime'":
96+ ユーザに "Cannot find module 'react-compiler-runtime'" と表示される場合があります。
9797
98- 1 . Ensure the runtime is listed in ` dependencies ` , not ` devDependencies `
99- 2 . Check that your bundler includes the runtime in the output
100- 3 . Verify the package is published to npm with your library
98+ 1 . ランタイムが ` devDependencies ` ではなく ` dependencies ` に記載されていることを確認してください。
99+ 2 . バンドラの出力にランタイムが含まれていることを確認してください。
100+ 3 . パッケージがライブラリに含まれた状態で npm に公開されていることを確認してください。
101101
102- ## Next Steps {/* next-steps* /}
102+ ## 次のステップ {/* next-steps* /}
103103
104- - Learn about [ debugging techniques ] ( /learn/react-compiler/debugging ) for compiled code
105- - Check the [ configuration options ] ( /reference/react-compiler/configuration ) for all compiler options
106- - Explore [ compilation modes ] ( /reference/react-compiler/compilationMode ) for selective optimization
104+ - コンパイル済みコードの [ デバッグ手法 ] ( /learn/react-compiler/debugging ) について学ぶ
105+ - 利用できるすべてのコンパイラオプションを [ 設定オプション ] ( /reference/react-compiler/configuration ) で確認する
106+ - 選択的に最適化するための [ コンパイルモード ] ( /reference/react-compiler/compilationMode ) を確認する
0 commit comments