1

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

这在开发模式下运行良好，但是当我尝试发布 Android .apk 文件时cd android && ./gradlew assembleRelease && cd ..出现错误：

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",

提前致谢。

4

2 回答 2

1

好吧，只是我有点傻。看看我的 .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"
      }
    }]
  ]
}
于 2018-02-27T14:09:17.833 回答
1

我怀疑那是因为当你执行 gradle taskassembleRelease时，它也会调用里面的 gradle 文件node_modules/react-native/react.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"

根据这个家伙的说法，这个奇怪的 projectRoots 可能会成功。

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

于 2018-02-26T13:11:01.170 回答