android - 构建 react-native .apk 时无法解析模块，babel-plugin-module-resolver 别名

Question

我正在使用 babel-plugin-module-resolver处理../../../ hell 。在我的 .babelrc 我有:

{
  "presets": [
    "react-native",
    "babel-preset-react-native-stage-0/decorator-support",
    "react-native-dotenv"
  ],
  "env": {
    "development": {
      "plugins": [
        ["module-resolver", {
          "cwd": "babelrc",
          "extensions": [
            ".js",
            ".ios.js",
            ".android.js"
          ],
          "alias": {
            "@assets": "./src/assets",
            "@features": "./src/features",
            "@common": "./src/common",
            "@config": "./src/config",
            "@services": "./src/services"
          }
        }],
        "transform-react-jsx-source"
      ]
    }
  }
}

用法示例:import { Text } from '@common'

这在开发模式下运行良好，但是当我尝试使用 cd android && ./gradlew assembleRelease && cd .. 发布 Android .apk 文件时我得到一个错误:

Unable to resolve module @common from /home/ppozniak/Projects/project-name/src/Root.js: Module does not exist in the module map

gradlew 似乎没有使用我的 .babelrc？

版本

   "babel-plugin-module-resolver": "^3.0.0",
   "babel-preset-react-native": "^4.0.0",
   "react-native": "0.50.3",
   "react": "16.0.0",

提前致谢。

Answer 1

我怀疑这是因为当您执行 gradle 任务 assembleRelease 时，它还会调用 node_modules/react-native/react.gradle 中的 gradle 文件。这意味着当您处于开发模式(通过服务器提供 js 包)时，您使用 .babelrc 文件，但当您在 Release模式下执行时，它实际上根本没有使用 babel。 React Native 使用它自己的 polyfill。

我的想法是将一些额外的命令参数传递给 react-native bundle 命令，以尝试通过修改项目根来识别根 .babelrc 文件:

所以:

在您的根项目中创建一个新文件夹并将 babelrc 放入其中(我们称此文件夹为 native-config)

然后，在您的 ./android/app/build.gradle 中，添加以下内容:

project.ext.react = [
    entryFile: "index.android.js", /* Your entry file */
    extraPackagerArgs: "--projectRoots ../../native-config,../../"
]

/* 
 * Make sure this next line is AFTER the above 
 * also, the line below is the command that runs react-native bundle
 * and don't use babel. Each key in the array above is an extra
 * CLI arg 
 */
apply from: "../../node_modules/react-native/react.gradle"

根据to this guy ，这个奇怪的 projectRoots 可能会成功。

祝你好运，希望它至少能让你了解正在发生的事情。