如何在 babel-plugin-module-resolver 中使用 root 選項？

Question

我正在嘗試在 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選項的正確方法是什么？

Answer 1

好吧，我找到了一個解決方案，它不能真正解決問題，但可以使它起作用。

我正在使用打字稿和 babel 來編譯它。

我的文件結構是這樣的：

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

當 babel 編譯我的代碼時， src/index.ts中db/connect的導入，從這個開始：

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不會影響需要路徑，所以我只是將其刪除。

這不能解決問題，但可以使它起作用。

希望能幫到你，祝你好運！ :)

Answer 2

檢查文件 bable.config.js 並刪除插件模塊解析器，root 對我有幫助