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/5] 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/5] 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 编译器来为用户提供经过优化的库代码。 From 31499a8a9dc91fdc29f48d1d4aa09ccb058f24ae Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Sun, 26 Oct 2025 21:41:06 +0800 Subject: [PATCH 3/5] Update src/content/reference/react-compiler/compiling-libraries.md Co-authored-by: Xleine --- 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 6de04b5eb2..ad2d94e655 100644 --- a/src/content/reference/react-compiler/compiling-libraries.md +++ b/src/content/reference/react-compiler/compiling-libraries.md @@ -93,7 +93,7 @@ npm install react-compiler-runtime@rc ### 找不到运行时模块 {/*runtime-module-not-found*/} -如果用户遇到“Cannot find module 'react-compiler-runtime'”错误: +如果用户遇到 “Cannot find module 'react-compiler-runtime'” 错误: 1. 确保该运行时包被列在 `dependencies` 中，而不是 `devDependencies` 2. 检查您的打包工具是否将该运行时包含在了输出中 From 011f0fb421ed83e3b59204afeb6b616b6802e611 Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Sun, 26 Oct 2025 21:41:15 +0800 Subject: [PATCH 4/5] Update src/content/reference/react-compiler/compiling-libraries.md Co-authored-by: Xleine --- 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 ad2d94e655..03804aabb8 100644 --- a/src/content/reference/react-compiler/compiling-libraries.md +++ b/src/content/reference/react-compiler/compiling-libraries.md @@ -87,7 +87,7 @@ npm install react-compiler-runtime@rc 某些 Babel 插件可能与 React 编译器存在冲突： -1. 将 `babel-plugin-react-compiler` 放在插件列表的靠前位置 +1. 将 `babel-plugin-react-compiler` 放在插件列表的靠前位置 2. 在其他插件中禁用可能引起冲突的优化选项 3. 对你的构建输出进行彻底的测试 From f25809cc04d6fdb57a41aea702c5483571c7f76d Mon Sep 17 00:00:00 2001 From: WuMingDao <146366930+WuMingDao@users.noreply.github.com> Date: Sun, 26 Oct 2025 21:46:07 +0800 Subject: [PATCH 5/5] =?UTF-8?q?all=20=E2=80=9C=E6=82=A8=E2=80=9D=20to=20?= =?UTF-8?q?=E2=80=9C=E4=BD=A0=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-compiler/compiling-libraries.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md index 03804aabb8..ef4d10054d 100644 --- a/src/content/reference/react-compiler/compiling-libraries.md +++ b/src/content/reference/react-compiler/compiling-libraries.md @@ -10,21 +10,21 @@ title: 编译库 ## 为什么要发布编译后的代码？{/*why-ship-compiled-code*/} -作为库作者，您可以在将代码发布到 npm 之前编译。这样做有几个好处： +作为库作者，你可以在将代码发布到 npm 之前编译。这样做有几个好处： -- **为所有用户提升性能** —— 即使用户尚未使用 React 编译器，他们也能从您的库中获得优化后的代码。 +- **为所有用户提升性能** —— 即使用户尚未使用 React 编译器，他们也能从你的库中获得优化后的代码。 - **用户无需配置** —— 这些优化开箱即用 - **行为一致** —— 无论用户的构建设置如何，他们都能获得相同版本的优化代码 ## 设置编译 {/*setting-up-compilation*/} -将 React 编译器添加到您库的构建过程中： +将 React 编译器添加到你的库的构建过程中： npm install -D babel-plugin-react-compiler@rc -配置您的构建工具来编译您的库。例如，使用 Babel： +配置你的构建工具来编译你的库。例如，使用 Babel： ```js // babel.config.js @@ -38,7 +38,7 @@ module.exports = { ## 向下兼容性 {/*backwards-compatibility*/} -如果您的库需要支持 React 19 以下的版本，您需要进行额外的配置： +如果你的库需要支持 React 19 以下的版本，你需要进行额外的配置： ### 1. 安装运行时包 {/*install-runtime-package*/} @@ -61,7 +61,7 @@ npm install react-compiler-runtime@rc ### 2. 配置目标版本 {/*configure-target-version*/} -设置您的库所支持的最低 React 版本： +设置你的库所支持的最低 React 版本： ```js { @@ -71,17 +71,17 @@ npm install react-compiler-runtime@rc ## 测试策略 {/*testing-strategy*/} -为了确保兼容性，您应该对编译和未编译两种情况下的库都进行测试。在编译后的代码上运行您现有的测试套件，并创建一个绕过编译器的独立测试配置。这有助于捕获任何可能由编译过程引起的问题，并确保您的库在所有场景下都能正常工作 +为了确保兼容性，你应该对编译和未编译两种情况下的库都进行测试。在编译后的代码上运行你现有的测试套件，并创建一个绕过编译器的独立测试配置。这有助于捕获任何可能由编译过程引起的问题，并确保你的库在所有场景下都能正常工作 ## 故障排除 {/*troubleshooting*/} ### 库在旧版 React 中无法工作 {/*library-doesnt-work-with-older-react-versions*/} -如果您编译后的库在 React 17 或 18 中抛出错误： +如果你编译后的库在 React 17 或 18 中抛出错误： -1. 确认您已将 `react-compiler-runtime` 安装为生产依赖 -2. 检查你的 `target` 配置是否与您支持的最低 React 版本匹配 -3. 确保运行时包已包含在您最终发布的打包中 +1. 确认你已将 `react-compiler-runtime` 安装为生产依赖 +2. 检查你的 `target` 配置是否与你支持的最低 React 版本匹配 +3. 确保运行时包已包含在你最终发布的打包中 ### 编译过程与其他 Babel 插件冲突 {/*compilation-conflicts-with-other-babel-plugins*/} @@ -96,7 +96,7 @@ npm install react-compiler-runtime@rc 如果用户遇到 “Cannot find module 'react-compiler-runtime'” 错误: 1. 确保该运行时包被列在 `dependencies` 中，而不是 `devDependencies` -2. 检查您的打包工具是否将该运行时包含在了输出中 +2. 检查你的打包工具是否将该运行时包含在了输出中 3. 确认这个包已经和你的库一起成功发布到了 npm ## Next Steps {/*next-steps*/}