2

我正在尝试在 react-native 应用程序中使用babel-plugin-module-resolver 。当我在其中使用这样的插件配置时，babel.config.js它可以完美运行。

plugins: [
    [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.js', '.json'],
        alias: {
          utils: './src/utils',
        },
      },
    ],
  ],

但问题是我必须在每个别名路径中写入 ./src 。所以我尝试使用root选项。这是我尝试过的代码

plugins: [
    [
      'module-resolver',
      {
        root: './src', // I also tried ['./src']
        extensions: ['.ios.js', '.android.js', '.js', '.json'],
        alias: {
          utils: 'utils', // already tried '/utils' and './utils'
        },
      },
    ],
  ],

但这对我不起作用，我收到此错误：

error: Error: Unable to resolve module '../../../utils/Themes' from 'src/components/shared/Container.js':

那么使用root选项的正确方法是什么？

4

2 回答 2

1

好吧，我找到了一个解决方案，它并不能真正解决问题，但可以让它发挥作用。

我正在使用打字稿和 babel 来编译它。

我的文件结构是这样的：

|-dist
|-src
  |-db
     |-connect
        |-index.ts
  |-index.ts
|-.babelrc
|-etc...

当 babel 编译我的代码时，db/connectin的导入src/index.ts，从这里开始：

import ... from "db/connect"

对此：

var _connect = require("../db/connect");

应该是这样的：

var _connect = require("./db/connect");

你怎么看，babel 支持一个文件夹，不管我怎么尝试，这仍然缺少 require 路径。

所以，为了解决这个问题，我只需添加/dist到路径中.babelrc

前：

[
   "module-resolver",
      {
         "root": ["./"], # or ["src"] or "src" or ["./src"] or "./src" or any way you can imagine
         "alias": {
            "db": "./db",
         }
      }
   }
]

后：

[
   "module-resolver",
      {
         "alias": {
            "db": "./dist/db",
         }
      }
   }
]

正如你所说，这root不会影响 require 路径，所以我只是删除了它。

这并不能解决问题，但可以使其正常工作。

希望对你有帮助，祝你好运！:)

于 2020-11-28T02:20:45.820 回答
0

检查文件 bable.config.js 并删除插件模块解析器，根它对我有帮助

于 2021-11-25T15:57:07.237 回答