如何在babel-plugin-module-resolver中使用root选项？

问题描述

我正在尝试在本机应用程序中使用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',alias: {
          utils: 'utils',// already tried '/utils' and './utils'
        },

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

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

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

解决方法

好吧，我找到了一种解决方案，它不能真正解决问题，但是可以解决问题。

我正在使用打字稿和babel进行编译。

我的文件结构是这样的：

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

当babel编译我的代码时，db/connect中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不会影响需求路径，所以我只是删除了它。

这不能解决问题，但可以解决问题。

希望有帮助，祝您好运！ ：）