配置

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

编译控制

🌐 Compilation Control

这些选项控制编译器优化的内容以及它如何选择要编译的组件和钩子。

🌐 These options control what the compiler optimizes and how it selects components and hooks to compile.

• compilationMode 控制选择要编译函数的策略（例如，所有函数、仅注释的函数，或智能检测）。

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

版本兼容性

🌐 Version Compatibility

React 版本配置可确保编译器生成与你的 React 版本兼容的代码。

🌐 React version configuration ensures the compiler generates code compatible with your React version.

target 指定你正在使用的 React 版本（17、18 或 19）。

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

错误处理

🌐 Error Handling

这些选项控制编译器如何响应不符合 React 规则 的代码。

🌐 These options control how the compiler responds to code that doesn’t follow the Rules of React.

[panicThreshold](/reference/react-compiler/panicThreshold) 决定是让构建失败还是跳过有问题的组件。

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

调试

🌐 Debugging

日志和分析选项可帮助你了解编译器正在执行的操作。

🌐 Logging and analysis options help you understand what the compiler is doing.

logger 提供用于编译事件的自定义日志记录。

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

功能标志

🌐 Feature Flags

条件编译允许你控制何时使用优化代码。

🌐 Conditional compilation lets you control when optimized code is used.

[gating](/reference/react-compiler/gating) 使 A/B 测试或逐步推出的运行时功能标志成为可能。

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

常见配置模式

🌐 Common Configuration Patterns

默认配置

🌐 Default configuration

对于大多数 React 19 应用，编译器无需配置即可运行：

🌐 For most React 19 applications, the compiler works without configuration:

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

React 17/18 项目

🌐 React 17/18 projects

旧版本的 React 需要运行时包和目标配置：

🌐 Older React versions need the runtime package and target configuration:

npm install react-compiler-runtime@latest

{
  target: '18' // or '17'
}

增量采用

🌐 Incremental adoption

从特定目录开始，然后逐步扩展：

🌐 Start with specific directories and expand gradually:

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