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

Question

我正在用babel-plugin-module-resolver来对付../../../地狱。在我的 .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 文件，但是当您在发布模式下执行时，它实际上根本没有使用 babel。 React Native 使用它自己的 polyfills。

我的想法是将一些额外的命令参数传递给 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，这个奇怪的项目 Roots 可能会成功。

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

Answer 2

好吧，只是我有点傻。查看我的 .babelrc 你可以

"env": {
    "development": {

这就是问题所在。在此之后，其他一些错误随着 Android 弹出，但最终我设法修复了所有这些错误。

所以未来的教训：注意你的环境。

我的 babelrc 现在：

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

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

Unable to resolve module when building react-native .apk, babel-plugin-module-resolver aliases

android

alias

babeljs

react-native

babel-plugin