Skip to content

configuration.md

Latest commit

 

History

History
151 lines (106 loc) · 3.77 KB

configuration.md

File metadata and controls

151 lines (106 loc) · 3.77 KB
title 設定

このページでは、React Compiler で利用可能な設定オプションをすべてリストアップしています。

ほとんどのアプリでは、デフォルトの設定で問題なく動作します。特別な要件がある場合は、後述する詳細な設定を利用できます。

// babel.config.js
module.exports = {
  plugins: [
    [
      'babel-plugin-react-compiler', {
        // compiler options
      }
    ]
  ]
};

コンパイル制御 {/compilation-control/}

これらのオプションは、コンパイラが何を最適化し、どのようにコンポーネントとフックを選択してコンパイルするかを制御します。

  • compilationMode は、コンパイルする関数を選択する方法を制御します（例：すべての関数、アノテーション付きのもののみ、インテリジェント検出など）。
{
  compilationMode: 'annotation' // Only compile "use memo" functions
}

バージョン互換性 {/version-compatibility/}

React バージョンの設定により、使用中の React バージョンと互換性のあるコードをコンパイラが生成することが保証されます。

target は、使用中の React バージョン（17、18、19）を指定します。

// For React 18 projects
{
  target: '18' // Also requires react-compiler-runtime package
}

エラーハンドリング {/error-handling/}

これらのオプションは、コンパイラが React のルールに従わないコードをどのように処理するか制御します。

panicThreshold は、ビルドを失敗させるか、問題のあるコンポーネントをスキップするかを決定します。

// Recommended for production
{
  panicThreshold: 'none' // Skip components with errors instead of failing the build
}

デバッグ {/debugging/}

ログと解析オプションは、コンパイラが何を行っているのか理解するのに役立ちます。

logger は、コンパイルイベントに対するカスタムのロギング手段を指定します。

{
  logger: {
    logEvent(filename, event) {
      if (event.kind === 'CompileSuccess') {
        console.log('Compiled:', filename);
      }
    }
  }
}

フィーチャーフラグ {/feature-flags/}

条件付きコンパイルにより、最適化されたコードがいつ使用されるか制御することができます。

gating は、A/B テストや段階的ロールアウトのためのランタイムフィーチャーフラグを有効にします。

{
  gating: {
    source: 'my-feature-flags',
    importSpecifierName: 'isCompilerEnabled'
  }
}

一般的な設定パターン {/common-patterns/}

デフォルト設定 {/default-configuration/}

ほとんどの React 19 アプリケーションで、コンパイラは設定なしで動作します。

// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-react-compiler'
  ]
};

React 17/18 プロジェクト {/react-17-18/}

古い React バージョンでは、ランタイムパッケージとターゲット設定が必要です。

npm install react-compiler-runtime@latest
{
  target: '18' // or '17'
}

段階的な導入 {/incremental-adoption/}

特定のディレクトリから始めて、段階的に拡張することができます。

{
  compilationMode: 'annotation' // Only compile "use memo" functions
}