このページでは、React Compiler で利用可能な設定オプションをすべてリストアップしています。
// babel.config.js
module.exports = {
plugins: [
[
'babel-plugin-react-compiler', {
// compiler options
}
]
]
};コンパイル制御
これらのオプションは、コンパイラが何を最適化し、どのようにコンポーネントとフックを選択してコンパイルするかを制御します。
compilationModeは、コンパイルする関数を選択する方法を制御します。（例：すべての関数、注釈付きのもののみ、インテリジェント検出など）
{
compilationMode: 'annotation' // Only compile "use memo" functions
}バージョン互換性
React のバージョン設定により、コンパイラが使用中の React バージョンと互換性のあるコードが生成されることが保証されます。
target は、使用中の React バージョン（17、18、19）を指定します。
// For React 18 projects
{
target: '18' // Also requires react-compiler-runtime package
}エラーハンドリング
これらのオプションは、コンパイラが Rules of React に従わないコードに対し、どのように応答するか制御します。
panicThreshold は、ビルドを失敗させるか、問題のあるコンポーネントをスキップするかを決定します。
// Recommended for production
{
panicThreshold: 'none' // Skip components with errors instead of failing the build
}デバック
ログと解析オプションは、コンパイラが何を行っているのか理解するのに役立ちます。
logger は、コンパイルイベントのカスタムログを提供します。
{
logger: {
logEvent(filename, event) {
if (event.kind === 'CompileSuccess') {
console.log('Compiled:', filename);
}
}
}
}フィーチャーフラグ
条件付きコンパイルにより、最適化されたコードがいつ使用されるか制御することができます。
gating は、A/B テストや段階的ロールアウトのためのランタイムフィーチャーフラグを有効にします。
{
gating: {
source: 'my-feature-flags',
importSpecifierName: 'isCompilerEnabled'
}
}一般的な設定パターン
デフォルト設定
ほとんどの React 19 アプリケーションで、コンパイラは設定なしで動作します。
// babel.config.js
module.exports = {
plugins: [
'babel-plugin-react-compiler'
]
};React 17/18 プロジェクト
古い React バージョンでは、ランタイムパッケージとターゲット設定が必要です。
npm install react-compiler-runtime@latest{
target: '18' // or '17'
}段階的な導入
特定のディレクトリから始めて、段階的に拡張することができます。
{
compilationMode: 'annotation' // Only compile "use memo" functions
}