From b94bd3a14f67cd0cb382ec12239be55ff47afc4b Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Thu, 25 Sep 2025 10:07:50 +0800 Subject: [PATCH 1/2] docs(cn): translate compiling-libraries.md into Chinese [translate page link](https://zh-hans.react.dev/reference/react-compiler/compiling-libraries) --- .../react-compiler/compiling-libraries.md | 78 +++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md index f09ffcb725..cccb3cbf89 100644 --- a/src/content/reference/react-compiler/compiling-libraries.md +++ b/src/content/reference/react-compiler/compiling-libraries.md @@ -1,30 +1,30 @@ --- -title: Compiling Libraries +title: 编译库 --- -This guide helps library authors understand how to use React Compiler to ship optimized library code to their users. +本指南旨在帮助库作者理解如何使用 React Compiler 来为用户提供经过优化的库代码。 -## 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 编译器添加到您库的构建过程中： npm install -D babel-plugin-react-compiler@rc -Configure your build tool to compile your library. For example, with Babel: +配置您的构建工具来编译您的库。例如，使用 Babel： ```js // babel.config.js @@ -32,17 +32,17 @@ 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 作为直接依赖安装： npm install react-compiler-runtime@rc @@ -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 \ No newline at end of file +- 学习针对已编译代码的 [调试技巧](/learn/react-compiler/debugging) +- 查看 [配置选项](/reference/react-compiler/configuration) 以了解所有编译器选项 +- 探索用于选择性优化的 [编译模式](/reference/react-compiler/compilationMode) From dd182df99d0f2f731a555e707aa5db3de6b3ab25 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Thu, 25 Sep 2025 02:12:30 +0000 Subject: [PATCH 2/2] add translate --- src/content/reference/react-compiler/compiling-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md index cccb3cbf89..6de04b5eb2 100644 --- a/src/content/reference/react-compiler/compiling-libraries.md +++ b/src/content/reference/react-compiler/compiling-libraries.md @@ -3,7 +3,7 @@ title: 编译库 --- -本指南旨在帮助库作者理解如何使用 React Compiler 来为用户提供经过优化的库代码。 +本指南旨在帮助库作者理解如何使用 React 编译器来为用户提供经过优化的库代码。