Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions src/content/reference/react-compiler/configuration.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
title: Configuration
title: 配置
---

<Intro>

This page lists all configuration options available in React Compiler.
本页列出 React 编译器的所有可用配置项。

</Intro>

<Note>

For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options.
对于大多数应用,默认选项开箱即用即可满足需求。如果你有特殊需求,你可以使用这些高级选项。

</Note>

Expand All @@ -29,55 +29,55 @@ module.exports = {

---

## Compilation Control {/*compilation-control*/}
## 编译控制 {/*compilation-control*/}

These options control *what* the compiler optimizes and *how* it selects components and hooks to compile.
这些选项用于控制编译器优化的 **内容**,以及它 **如何** 选择要编译的组件和 hook。

* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).
* [`compilationMode`](/reference/react-compiler/compilationMode) 控制选择要编译的函数的策略(例如:全部函数、仅带注解的函数,或自动检测)。

```js
{
compilationMode: 'annotation' // Only compile "use memo" functions
compilationMode: 'annotation' // 仅编译 “use memo” 函数
}
```

---

## Version Compatibility {/*version-compatibility*/}
## 版本兼容性 {/*version-compatibility*/}

React version configuration ensures the compiler generates code compatible with your React version.
React 版本配置可确保编译器生成的代码与你的 React 版本兼容。

[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19).
[`target`](/reference/react-compiler/target) 指定你正在使用的 React 版本(17、18 或 19)。

```js
// For React 18 projects
// 对于 React 18 项目
{
target: '18' // Also requires react-compiler-runtime package
target: '18' // 还需要 react-compiler-runtime
}
```

---

## Error Handling {/*error-handling*/}
## 错误处理 {/*error-handling*/}

These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules).
这些选项控制编译器如何处理不遵循 [React 规则](/reference/rules) 的代码。

[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components.
[`panicThreshold`](/reference/react-compiler/panicThreshold) 决定是让构建失败还是跳过存在问题的组件。

```js
// Recommended for production
// 推荐用于生产环境
{
panicThreshold: 'none' // Skip components with errors instead of failing the build
panicThreshold: 'none' // 跳过有错误的组件,而不是导致构建失败
}
```

---

## Debugging {/*debugging*/}
## 调试 {/*debugging*/}

Logging and analysis options help you understand what the compiler is doing.
日志和分析选项有助于你理解编译器在做什么。

[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events.
[`logger`](/reference/react-compiler/logger) 为编译事件提供自定义日志功能。

```js
{
Expand All @@ -95,9 +95,9 @@ Logging and analysis options help you understand what the compiler is doing.

## Feature Flags {/*feature-flags*/}

Conditional compilation lets you control when optimized code is used.
条件式编译使你控制何时使用优化后的代码。

[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts.
[`gating`](/reference/react-compiler/gating) 启用运行环境 feature flags,用于 A/B 测试或渐进式发布。

```js
{
Expand All @@ -110,11 +110,11 @@ Conditional compilation lets you control when optimized code is used.

---

## Common Configuration Patterns {/*common-patterns*/}
## 常见配置模式 {/*common-patterns*/}

### Default configuration {/*default-configuration*/}
### 默认配置 {/*default-configuration*/}

For most React 19 applications, the compiler works without configuration:
对于大多数 React 19 应用,编译器无需配置即可工作:

```js
// babel.config.js
Expand All @@ -125,9 +125,9 @@ module.exports = {
};
```

### React 17/18 projects {/*react-17-18*/}
### React 17/18 项目 {/*react-17-18*/}

Older React versions need the runtime package and target configuration:
较旧的 React 版本需要安装运行环境包并设置 target

```bash
npm install react-compiler-runtime@rc
Expand All @@ -139,13 +139,13 @@ npm install react-compiler-runtime@rc
}
```

### Incremental adoption {/*incremental-adoption*/}
### 渐进式接入 {/*incremental-adoption*/}

Start with specific directories and expand gradually:
从特定目录开始并逐步扩大范围:

```js
{
compilationMode: 'annotation' // Only compile "use memo" functions
compilationMode: 'annotation' 仅编译 “use memo” 函数
}
```