React Native项目使用babel-plugin-module-resolver无法实现绝对导入求助

项目文件结构 #

|--node_modules
|--src
|--App.js
|--Splash.js

配置与操作 #

为在App.js中通过绝对导入引入Splash.js，安装了babel-plugin-module-resolver，并配置babel.config.js如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module-resolver", {
      "root": ["./"]
    }]
  ]
};

App.js中的导入语句：

import Splash from 'Splash.js';

报错信息 #

error: Error: Unable to resolve module Splash.js from C:\Users\<userName>\Desktop\<AppName>\App.js: Splash.js could not be found within the project or in these directories:
  node_modules

疑问：

• 报错原因是什么？
• baseUrl的工作原理是怎样的？
• 是否使用方式有误？

1. 报错原因 #

当前配置存在两个核心问题：

• 仅配置root: ['./']不够，babel-plugin-module-resolver需要明确指定extensions来识别可解析的文件后缀，否则React Native的Metro bundler不会自动匹配带.js后缀的导入请求；
• 导入语句里写了.js后缀，会绕过resolver的解析逻辑，直接让Metro查找，而Metro默认不会把项目根目录加入模块搜索路径，自然找不到目标文件。

2. baseUrl的工作原理 #

babel-plugin-module-resolver里的root配置对应常规的baseUrl，作用是设定模块解析的起始目录。配置root: ['./']后，绝对导入会从项目根目录开始查找文件，不用再写./或../这类相对路径。但要注意，它只是告诉Babel如何转换路径，最终还要和React Native的Metro bundler解析规则兼容，两者配合才能生效。

3. 正确配置与使用方式 #

方案一：调整Babel配置+修改导入语句 #

修改babel.config.js，添加extensions配置指定可解析的文件后缀：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module-resolver", {
      "root": ["./"],
      "extensions": ['.js', '.jsx', '.ts', '.tsx'] // 包含项目中用到的所有文件后缀
    }]
  ]
};

然后修改App.js的导入语句，去掉.js后缀：

import Splash from 'Splash';

方案二：补充Metro配置（可选，保留后缀导入） #

如果想保留.js后缀的导入，需要新建/修改metro.config.js，将项目根目录加入Metro的搜索路径：

const path = require('path');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    extraNodeModules: {
      '.': path.resolve(__dirname)
    }
  },
  watchFolders: [path.resolve(__dirname)]
};

推荐方案一，符合前端模块导入的常规写法。

内容的提问来源于stack exchange，提问作者ath