Skip to content
Open
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
78 changes: 39 additions & 39 deletions src/content/reference/react-compiler/compiling-libraries.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
---
title: Compiling Libraries
title: 编译库
---

<Intro>
This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
本指南旨在帮助库作者理解如何使用 React 编译器来为用户提供经过优化的库代码。
</Intro>

<InlineToc />

## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
## 为什么要发布编译后的代码?{/*why-ship-compiled-code*/}

As a library author, you can compile your library code before publishing to npm. This provides several benefits:
作为库作者,您可以在将代码发布到 npm 之前编译。这样做有几个好处:

- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
- **No configuration required by users** - The optimizations work out of the box
- **Consistent behavior** - All users get the same optimized version regardless of their build setup
- **为所有用户提升性能** —— 即使用户尚未使用 React 编译器,他们也能从您的库中获得优化后的代码。
- **用户无需配置** —— 这些优化开箱即用
- **行为一致** —— 无论用户的构建设置如何,他们都能获得相同版本的优化代码

## Setting Up Compilation {/*setting-up-compilation*/}
## 设置编译 {/*setting-up-compilation*/}

Add React Compiler to your library's build process:
React 编译器添加到您库的构建过程中:

<TerminalBlock>
npm install -D babel-plugin-react-compiler@rc
</TerminalBlock>

Configure your build tool to compile your library. For example, with Babel:
配置您的构建工具来编译您的库。例如,使用 Babel

```js
// babel.config.js
module.exports = {
plugins: [
'babel-plugin-react-compiler',
],
// ... other config
// ... 其他配置
};
```

## Backwards Compatibility {/*backwards-compatibility*/}
## 向下兼容性 {/*backwards-compatibility*/}

If your library supports React versions below 19, you'll need additional configuration:
如果您的库需要支持 React 19 以下的版本,您需要进行额外的配置:

### 1. Install the runtime package {/*install-runtime-package*/}
### 1. 安装运行时包 {/*install-runtime-package*/}

We recommend installing react-compiler-runtime as a direct dependency:
我们推荐将 react-compiler-runtime 作为直接依赖安装:

<TerminalBlock>
npm install react-compiler-runtime@rc
Expand All @@ -59,48 +59,48 @@ npm install react-compiler-runtime@rc
}
```

### 2. Configure the target version {/*configure-target-version*/}
### 2. 配置目标版本 {/*configure-target-version*/}

Set the minimum React version your library supports:
设置您的库所支持的最低 React 版本:

```js
{
target: '17', // Minimum supported React version
target: '17', // 最低支持的 React 版本
}
```

## Testing Strategy {/*testing-strategy*/}
## 测试策略 {/*testing-strategy*/}

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.
为了确保兼容性,您应该对编译和未编译两种情况下的库都进行测试。在编译后的代码上运行您现有的测试套件,并创建一个绕过编译器的独立测试配置。这有助于捕获任何可能由编译过程引起的问题,并确保您的库在所有场景下都能正常工作

## Troubleshooting {/*troubleshooting*/}
## 故障排除 {/*troubleshooting*/}

### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
### 库在旧版 React 中无法工作 {/*library-doesnt-work-with-older-react-versions*/}

If your compiled library throws errors in React 17 or 18:
如果您编译后的库在 React 17 18 中抛出错误:

1. Verify you've installed `react-compiler-runtime` as a dependency
2. Check that your `target` configuration matches your minimum supported React version
3. Ensure the runtime package is included in your published bundle
1. 确认您已将 `react-compiler-runtime` 安装为生产依赖
2. 检查你的 `target` 配置是否与您支持的最低 React 版本匹配
3. 确保运行时包已包含在您最终发布的打包中

### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
### 编译过程与其他 Babel 插件冲突 {/*compilation-conflicts-with-other-babel-plugins*/}

Some Babel plugins may conflict with React Compiler:
某些 Babel 插件可能与 React 编译器存在冲突:

1. Place `babel-plugin-react-compiler` early in your plugin list
2. Disable conflicting optimizations in other plugins
3. Test your build output thoroughly
1. `babel-plugin-react-compiler` 放在插件列表的靠前位置
2. 在其他插件中禁用可能引起冲突的优化选项
3. 对你的构建输出进行彻底的测试

### Runtime module not found {/*runtime-module-not-found*/}
### 找不到运行时模块 {/*runtime-module-not-found*/}

If users see "Cannot find module 'react-compiler-runtime'":
如果用户遇到“Cannot find module 'react-compiler-runtime'”错误:

1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
2. Check that your bundler includes the runtime in the output
3. Verify the package is published to npm with your library
1. 确保该运行时包被列在 `dependencies` 中,而不是 `devDependencies`
2. 检查您的打包工具是否将该运行时包含在了输出中
3. 确认这个包已经和你的库一起成功发布到了 npm

## Next Steps {/*next-steps*/}

- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
- 学习针对已编译代码的 [调试技巧](/learn/react-compiler/debugging)
- 查看 [配置选项](/reference/react-compiler/configuration) 以了解所有编译器选项
- 探索用于选择性优化的 [编译模式](/reference/react-compiler/compilationMode)