11---
2- title : Compiling Libraries
2+ title : 编译库
33---
44
55<Intro >
6- This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
6+ 本指南旨在帮助库作者理解如何使用 React Compiler 来为用户提供经过优化的库代码。
77</Intro >
88
99<InlineToc />
1010
11- ## Why Ship Compiled Code? {/* why-ship-compiled-code* /}
11+ ## 为什么要发布编译后的代码? {/* why-ship-compiled-code* /}
1212
13- As a library author, you can compile your library code before publishing to npm. This provides several benefits:
13+ 作为库作者,您可以在将代码发布到 npm 之前编译。这样做有几个好处:
1414
15- - ** Performance improvements for all users ** - Your library users get optimized code even if they aren't using React Compiler yet
16- - ** No configuration required by users ** - The optimizations work out of the box
17- - ** Consistent behavior ** - All users get the same optimized version regardless of their build setup
15+ - ** 为所有用户提升性能 ** —— 即使用户尚未使用 React 编译器,他们也能从您的库中获得优化后的代码。
16+ - ** 用户无需配置 ** —— 这些优化开箱即用
17+ - ** 行为一致 ** —— 无论用户的构建设置如何,他们都能获得相同版本的优化代码
1818
19- ## Setting Up Compilation {/* setting-up-compilation* /}
19+ ## 设置编译 {/* setting-up-compilation* /}
2020
21- Add React Compiler to your library's build process:
21+ 将 React 编译器添加到您库的构建过程中:
2222
2323<TerminalBlock >
2424npm install -D babel-plugin-react-compiler@rc
2525</TerminalBlock >
2626
27- Configure your build tool to compile your library. For example, with Babel:
27+ 配置您的构建工具来编译您的库。例如,使用 Babel:
2828
2929``` js
3030// babel.config.js
3131module .exports = {
3232 plugins: [
3333 ' babel-plugin-react-compiler' ,
3434 ],
35- // ... other config
35+ // ... 其他配置
3636};
3737```
3838
39- ## Backwards Compatibility {/* backwards-compatibility* /}
39+ ## 向下兼容性 {/* backwards-compatibility* /}
4040
41- If your library supports React versions below 19, you'll need additional configuration:
41+ 如果您的库需要支持 React 19 以下的版本,您需要进行额外的配置:
4242
43- ### 1. Install the runtime package {/* install-runtime-package* /}
43+ ### 1. 安装运行时包 {/* install-runtime-package* /}
4444
45- We recommend installing react-compiler-runtime as a direct dependency:
45+ 我们推荐将 react-compiler-runtime 作为直接依赖安装:
4646
4747<TerminalBlock >
4848npm install react-compiler-runtime@rc
@@ -59,48 +59,48 @@ npm install react-compiler-runtime@rc
5959}
6060```
6161
62- ### 2. Configure the target version {/* configure-target-version* /}
62+ ### 2. 配置目标版本 {/* configure-target-version* /}
6363
64- Set the minimum React version your library supports:
64+ 设置您的库所支持的最低 React 版本:
6565
6666``` js
6767{
68- target: ' 17' , // Minimum supported React version
68+ target: ' 17' , // 最低支持的 React 版本
6969}
7070```
7171
72- ## Testing Strategy {/* testing-strategy* /}
72+ ## 测试策略 {/* testing-strategy* /}
7373
74- 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.
74+ 为了确保兼容性,您应该对编译和未编译两种情况下的库都进行测试。在编译后的代码上运行您现有的测试套件,并创建一个绕过编译器的独立测试配置。这有助于捕获任何可能由编译过程引起的问题,并确保您的库在所有场景下都能正常工作
7575
76- ## Troubleshooting {/* troubleshooting* /}
76+ ## 故障排除 {/* troubleshooting* /}
7777
78- ### Library doesn't work with older React versions {/* library-doesnt-work-with-older-react-versions* /}
78+ ### 库在旧版 React 中无法工作 {/* library-doesnt-work-with-older-react-versions* /}
7979
80- If your compiled library throws errors in React 17 or 18:
80+ 如果您编译后的库在 React 17 或 18 中抛出错误:
8181
82- 1 . Verify you've installed ` react-compiler-runtime ` as a dependency
83- 2 . Check that your ` target ` configuration matches your minimum supported React version
84- 3 . Ensure the runtime package is included in your published bundle
82+ 1 . 确认您已将 ` react-compiler-runtime ` 安装为生产依赖
83+ 2 . 检查你的 ` target ` 配置是否与您支持的最低 React 版本匹配
84+ 3 . 确保运行时包已包含在您最终发布的打包中
8585
86- ### Compilation conflicts with other Babel plugins {/* compilation-conflicts-with-other-babel-plugins* /}
86+ ### 编译过程与其他 Babel 插件冲突 {/* compilation-conflicts-with-other-babel-plugins* /}
8787
88- Some Babel plugins may conflict with React Compiler:
88+ 某些 Babel 插件可能与 React 编译器存在冲突:
8989
90- 1 . Place ` babel-plugin-react-compiler ` early in your plugin list
91- 2 . Disable conflicting optimizations in other plugins
92- 3 . Test your build output thoroughly
90+ 1 . 将 ` babel-plugin-react-compiler ` 放在插件列表的靠前位置
91+ 2 . 在其他插件中禁用可能引起冲突的优化选项
92+ 3 . 对你的构建输出进行彻底的测试
9393
94- ### Runtime module not found {/* runtime-module-not-found* /}
94+ ### 找不到运行时模块 {/* runtime-module-not-found* /}
9595
96- If users see " Cannot find module 'react-compiler-runtime'" :
96+ 如果用户遇到“ Cannot find module 'react-compiler-runtime'”错误 :
9797
98- 1 . Ensure the runtime is listed in ` dependencies ` , not ` devDependencies `
99- 2 . Check that your bundler includes the runtime in the output
100- 3 . Verify the package is published to npm with your library
98+ 1 . 确保该运行时包被列在 ` dependencies ` 中,而不是 ` devDependencies `
99+ 2 . 检查您的打包工具是否将该运行时包含在了输出中
100+ 3 . 确认这个包已经和你的库一起成功发布到了 npm
101101
102102## Next Steps {/* next-steps* /}
103103
104- - Learn about [ debugging techniques ] ( /learn/react-compiler/debugging ) for compiled code
105- - Check the [ configuration options ] ( /reference/react-compiler/configuration ) for all compiler options
106- - Explore [ compilation modes ] ( /reference/react-compiler/compilationMode ) for selective optimization
104+ - 学习针对已编译代码的 [ 调试技巧 ] ( /learn/react-compiler/debugging )
105+ - 查看 [ 配置选项 ] ( /reference/react-compiler/configuration ) 以了解所有编译器选项
106+ - 探索用于选择性优化的 [ 编译模式 ] ( /reference/react-compiler/compilationMode )
0 commit comments