如何让Express/Fastify支持绝对路径导入及无扩展名ESM导入？

方案一：基于Babel配置（兼容广泛场景） #

1. 安装依赖 #

npm install --save-dev @babel/core @babel/node @babel/preset-env babel-plugin-module-resolver

2. 配置Babel规则 #

在项目根目录新建.babelrc文件，配置路径别名与扩展名解析：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "models": "./models"
        },
        "extensions": [".js", ".mjs", ".json"]
      }
    ]
  ]
}

3. 调整启动脚本 #

修改package.json中的启动命令，用babel-node运行项目入口文件：

{
  "scripts": {
    "start": "babel-node --experimental-specifier-resolution=node src/index.js"
  }
}

--experimental-specifier-resolution=node参数用于让Node.js支持省略扩展名的ESM导入。

方案二：Node.js原生加载器方案（无需Babel） #

如果不想引入Babel生态，可使用Node.js实验性加载器实现：

1. 安装依赖 #

npm install --save-dev @node-loader/resolver

2. 配置加载规则 #

在项目根目录新建node-loader-resolver.config.js：

{
  "alias": {
    "models": "./models"
  },
  "extensions": [".js", ".json"]
}

3. 调整启动脚本 #

{
  "scripts": {
    "start": "node --experimental-loader @node-loader/resolver src/index.js"
  }
}

额外配置：VS Code智能提示 #

为了让编辑器识别别名并提供智能提示，在项目根目录创建jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "models/*": ["./models/*"]
    }
  },
  "include": ["src/**/*", "models/**/*"]
}

完成以上配置后，你就能像在Next.js中一样，通过import UserModel from "models/UserModel"导入模块，无需相对路径和扩展名。

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