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

【问题标题】：Unable to resolve module when building react-native .apk, babel-plugin-module-resolver aliases构建 react-native .apk 时无法解析模块，babel-plugin-module-resolver 别名
【发布时间】：2018-02-26 11:00:04
【问题描述】：

我正在使用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",

提前致谢。

【问题讨论】：

标签： android react-native alias babeljs babel-plugin

【解决方案1】：

我怀疑这是因为当您执行 gradle 任务 assembleRelease 时，它还会调用 node_modules/react-native/react.gradle 中的 gradle 文件。这意味着当您处于开发模式（通过服务器提供 js 包）时，您使用 .babelrc 文件，但是当您在发布模式下执行时，它实际上根本没有使用 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 可能会成功。

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

【讨论】：

感谢您的回复。然而，遗憾的是这不起作用。似乎 projectRoots 选项可能消失了？不太确定，运行react-native -h 不会在列表中显示它。 error: unknown option --projectRoots'` 被抛出。 extraPackagerArgs: ["--projectRoots", "native-config"] 这就是我尝试的方式。

【解决方案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"
      }
    }]
  ]
}

【讨论】：