react-native - 在 bazel 构建中运行 react-native cli

Question

我正在为 React-Native Android 项目设置 Bazel 构建。由于我不会使用 Android Studio 和 Gradle，因此我需要调用 react-native cli 来创建 RN 包。我尝试了 genrule 的几种组合和 nodejs_binary规则以及对 react-native 的调用, npx react-native , 和 react-native\cli.js .这些尝试以两个错误之一结束:

1)

error Unrecognized command "bundle".
debug We couldn't find a package.json in your project. Are you sure you are running it inside a React Native project?

2)

Error: EPERM: operation not permitted, chmod '/private/var/tmp/_bazel_joshnunez/bfd4b860cd0c2d2f0e40baa90bf393fd/sandbox/darwin-sandbox/471/execroot/native_modules/bazel-out/host/bin/external/androi
d_sample/src/rncli.sh.runfiles/npm/node_modules/@react-native-community/cli/build/commands/server/external/xsel'

这是我正在使用的 bazel 规则(许多排列用 # 注释掉):

nodejs_binary(
    name = "rncli",
    entry_point = "@npm//:node_modules/react-native/local-cli/cli.js",
    node_modules = "@npm//:node_modules"
)

genrule (
  name = "rnAndroidBundle",
  outs = [ "main/assets/index.android.bundle" ],
  cmd = "$(location :rncli) bundle --verbose --entry-file $(location :appEntry) --platform android --bundle-output $@",
  #cmd = "npm run react-native bundle --verbose --entry-file $(location :appEntry) --platform android --bundle-output $@",
  #cmd = "npx react-native bundle --verbose --entry-file $(location :appEntry) --platform android --bundle-output $@",
  #cmd = "$(location @npm//:node_modules/react-native/cli.js) bundle --verbose --entry-file $(location :appEntry) --platform android --bundle-output $@",
  #cmd = "node node_modules/react-native/local-cli/cli.js bundle --verbose --entry-file $(location :appEntry) --platform android --bundle-output $@",
  #cmd = "node $(location @npm//react-native:node_modules/react-native/cli.js) bundle --verbose --entry-file external/android_sample/src/app.tsx --platform android --bundle-output $@",
  #srcs = [ "@npm//react-native" ],
  srcs = [ "appEntry" ],
  #tools = [ "@npm//:node_modules/react-native/cli.js" ]
  tools = [ ":rncli" ]
)

filegroup (
  name = "appEntry",
  srcs = [ "app.tsx" ]
)

Answer 1

你有没有得到这个的有效实现？对于新的 node_rules，我使用的是 npm_package_bin 示例，它与您在此处拥有的非常相似。我可以让 bundle 命令运行，但在此之后我遇到了其他问题，所以不能确定它是否能解决您的问题。

你可以按照这个实现的思路尝试一些东西:

package(default_visibility = ["//visibility:public"])

load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary","npm_package_bin", "copy_to_bin")
load("@bazel_skylib//rules:write_file.bzl", "write_file")
# note that @npm has been provided in the workspace by a yarn-install command

nodejs_binary(
    name = "android_build_bin",
    entry_point = "@npm//:node_modules/react-native/local-cli/cli.js",
    templated_args = ["bundle --platform android" +
        "--config ../../../../cli.config.js"],
    data = [
        "@npm//:node_modules",
        ":cli.config.js",
    ],
)

nodejs_binary(
    name = "ios_build_bin",
    entry_point = "@npm//:node_modules/react-native/local-cli/cli.js",
    templated_args = ["bundle --platform ios" +
        "--config ../../../../cli.config.js"],
    data = [
        "@npm//:node_modules",
        ":cli.config.js",
    ],
)

# bring across source files into the bin folder (note your paths would differ)
copy_to_bin(
    name = "sources",
    srcs = glob(
        include = [
            "src/**",
            "*",
        ],
        exclude = [],
        exclude_directories = 1,
    )
)

write_file(
    name = "write_chdir_script",
    out = "chdir.js",
    content = ["process.chdir(__dirname)"],
)

npm_package_bin(
    name = "android_build",
    outs = [
        "build/android/index.android.bundle",
        "build/android/index.android.bundle.map",
        "build/android/index.android.bundle.meta",
    ],
    args = ["--node_options=--require=./$(execpath chdir.js)"],
    tool = ":android_build_bin",
    data = [":sources", "chdir.js"],
)

npm_package_bin(
    name = "ios_build",
    outs = [
        "build/ios/index.ios.bundle",
        "build/ios/index.ios.bundle.map",
        "build/ios/index.ios.bundle.meta",
    ],
    args = ["--node_options=--require=./$(execpath chdir.js)"],
    tool = ":ios_build_bin",
    data = [":sources", "chdir.js"],
)