如何基于Babel/Node/NPM实现ES6从项目根目录导入模块？

我之前也碰到过这种嵌套层级深到让人崩溃的相对导入问题，太懂你的痛苦了！结合你试过的方案都没奏效的情况，给你几个不用Webpack、能兼容Jest的实用思路：

方案1：利用Node.js的package.json exports字段（通用型） #

如果你的项目基于Node.js 12+（或现代构建工具支持），可以直接通过package.json的exports字段配置路径映射，完全不需要额外插件：

// 项目根目录的package.json
{
  "exports": {
    "#utilities/*": "./src/utilities/*"
  }
}

之后导入就能简化成：

import * as stuff from '#utilities/stuff'

Jest 28+版本对exports的支持很完善，不需要额外配置就能识别这个映射，完美避开之前的Babel插件冲突问题。

方案2：TypeScript的baseUrl + paths（TS项目专属） #

如果是TypeScript项目，这是最稳妥的方案，我自己在多个项目里验证过兼容Jest：

1. 先在tsconfig.json里配置基础路径和别名：

{
  "compilerOptions": {
    "baseUrl": "./src", // 把src设为基础路径
    "paths": {
      "@utilities/*": ["utilities/*"] // 别名映射
    }
  }
}

2. 然后在jest.config.js里同步配置Jest的模块映射：

module.exports = {
  moduleNameMapper: {
    '^@utilities/(.*)$': '<rootDir>/src/utilities/$1'
  }
};

之后导入就可以写成：

import * as stuff from '@utilities/stuff'

这个方案完全绕开了Babel插件，从TS编译和Jest解析两层做适配，不会有兼容性问题。

方案3：ES模块原生Import Maps（浏览器端项目） #

如果你的项目是纯浏览器端（无需Node.js构建），可以用浏览器原生支持的Import Maps：
在HTML入口文件里添加：

<script type="importmap">
  {
    "imports": {
      "@utilities/": "./src/utilities/"
    }
  }
</script>

之后在JS文件里就能这样导入：

import * as stuff from '@utilities/stuff.js'

注意：这个方案需要浏览器支持ES模块Import Maps（现代浏览器基本都支持，比如Chrome 89+），不需要任何构建工具，非常轻量化。

方案4：module-alias包（Node.js项目兼容CommonJS/ES模块） #

如果上面的方案都不适用，可以试试专门解决Node.js模块别名的module-alias包：

1. 安装包：

npm install module-alias --save-dev

2. 在项目入口文件顶部添加注册代码：

// CommonJS
require('module-alias/register');

// ES模块（需要在package.json里加"type": "module"）
import 'module-alias/register';

3. 在package.json里配置别名：

{
  "_moduleAliases": {
    "@utilities": "./src/utilities"
  }
}

4. 最后在jest.config.js里同步Jest的映射：

module.exports = {
  moduleNameMapper: {
    '^@utilities/(.*)$': '<rootDir>/src/utilities/$1'
  }
};

这个包直接修改Node.js的模块解析逻辑，不会和Babel产生冲突，对CommonJS和ES模块都支持。

额外注意事项 #

• 不管选哪个方案，都要在项目README里说明配置方式，确保团队成员的开发环境兼容（比如Node版本、Jest版本）。
• 如果是混合环境项目，优先选择方案1或方案4，适配性更强。

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