Skip to main content

Codegen CLI

调用 Gradle 或手动调用脚本可能很难记住,而且需要很多仪式。

¥Calling Gradle or manually calling a script might be hard to remember and it requires a lot of ceremony.

为了简化,我们创建了一个 CLI 工具来帮助你运行这些任务:Codegen cli。此命令为你的项目运行 @react-native/codegen。以下选项可用:

¥To simplify it, we created a CLI tool that can help you running those tasks: the Codegen cli. This command runs @react-native/codegen for your project. The following options are available:

sh
npx @react-native-community/cli codegen --help
Usage: rnc-cli codegen [options]

Options:
--verbose Increase logging verbosity
--path <path> Path to the React Native project root. (default: "/Users/MyUsername/projects/my-app")
--platform <string> Target platform. Supported values: "android", "ios", "all". (default: "all")
--outputPath <path> Path where generated artifacts will be output to.
-h, --help display help for command

示例

¥Examples

  • 从当前工作目录读取 package.json,根据其 codegenConfig 生成代码。

    ¥Read package.json from the current working directory, generate code based on its codegenConfig.

shell
npx @react-native-community/cli codegen
  • 从当前工作目录读取 package.json,在 codegenConfig 中定义的位置生成 iOS 代码。

    ¥Read package.json from the current working directory, generate iOS code in the location defined in the codegenConfig.

shell
npx @react-native-community/cli codegen --platform ios
  • third-party/some-library 读取 package.json,在 third-party/some-library/android/generated 中生成 Android 代码。

    ¥Read package.json from third-party/some-library, generate Android code in third-party/some-library/android/generated.

shell
npx @react-native-community/cli codegen \
--path third-party/some-library \
--platform android \
--outputPath third-party/some-library/android/generated

将生成的代码包含到库中

¥Including Generated Code into Libraries

Codegen CLI 是库开发者的绝佳工具。它可用于预览生成的代码,以查看需要实现哪些接口。

¥The Codegen CLI is a great tool for library developers. It can be used to take a sneak-peek at the generated code to see which interfaces you need to implement.

通常,生成的代码不包含在库中,使用该库的应用负责在构建时运行 Codegen。对于大多数情况来说,这是一个很好的设置,但 Codegen 还提供了一种通过 includesGeneratedCode 属性将生成的代码包含在库本身中的机制。

¥Normally the generated code is not included in the library, and the app that uses the library is responsible for running the Codegen at build time. This is a good setup for most cases, but Codegen also offers a mechanism to include the generated code in the library itself via the includesGeneratedCode property.

了解使用 includesGeneratedCode = true 的含义非常重要。包括生成的代码有几个好处,例如:

¥It's important to understand what are the implications of using includesGeneratedCode = true. Including the generated code comes with several benefits such as:

  • 无需依赖应用为你运行 Codegen,生成的代码始终存在。

    ¥No need to rely on the app to run Codegen for you, the generated code is always there.

  • 实现文件始终与生成的接口一致(这使你的库代码更能抵御代码生成中的 API 更改)。

    ¥The implementation files are always consistent with the generated interfaces (this makes your library code more resilient against API changes in codegen).

  • 无需包含两组文件来支持 Android 上的两种架构。你只能保留新架构,并且保证向后兼容。

    ¥No need to include two sets of files to support both architectures on Android. You can only keep the New Architecture one, and it is guaranteed to be backwards compatible.

  • 由于所有原生代码都在那里,因此可以将库的原生部分作为预构建发送。

    ¥Since all native code is there, it is possible to ship the native part of the library as a prebuild.

另一方面,你还需要注意一个缺点:

¥On the other hand, you also need to be aware of one drawback:

  • 生成的代码将使用库中定义的 React Native 版本。因此,如果你的库附带 React Native 0.76,则生成的代码将基于该版本。这可能意味着生成的代码与使用该应用使用的先前 React Native 版本的应用不兼容(例如,在 React Native 0.75 上运行的应用)。

    ¥The generated code will use the React Native version defined inside your library. So if your library is shipping with React Native 0.76, the generated code will be based on that version. This could mean that the generated code is not compatible with apps using previous React Native version used by the app (e.g. an App running on React Native 0.75).

启用 includesGeneratedCode

¥Enabling includesGeneratedCode

要启用此设置:

¥To enable this setup:

  • includesGeneratedCode 属性添加到 package.json 文件中库的 codegenConfig 字段中。将其值设置为 true

    ¥Add the includesGeneratedCode property into your library's codegenConfig field in the package.json file. Set its value to true.

  • 使用 codegen CLI 在本地运行 Codegen。

    ¥Run Codegen locally with the codegen CLI.

  • 更新你的 package.json 以包含生成的代码。

    ¥Update your package.json to include the generated code.

  • 更新你的 podspec 以包含生成的代码。

    ¥Update your podspec to include the generated code.

  • 更新你的 build.Gradle 文件以包含生成的代码。

    ¥Update your build.Gradle file to include the generated code.

  • react-native.config.js 中更新 cmakeListsPath,以便 Gradle 不会在构建目录中查找 CMakeLists 文件,而是在 outputDir 中查找。

    ¥Update cmakeListsPath in react-native.config.js so that Gradle doesn't look for CMakeLists file in the build directory but instead in your outputDir.