如何通过构造的字符串路径在JavaScript中实现模块导入？

首先明确：ES模块的静态import语句不支持动态路径，比如字符串拼接、变量、process.cwd()这类动态表达式都不能直接写在静态import的路径里，你给出的两种写法都会报错。下面是几种可行的解决方案：

1. 使用动态import()（支持动态路径） #

动态import()是异步的，支持传入动态生成的路径，返回一个Promise，你可以用async/await或者.then()处理结果：

// 深层嵌套模块中的代码
async function loadTargetModule() {
  // 拼接目标模块路径
  const targetPath = `${process.cwd()}/folder_name/module_name.js`;
  // 动态导入并解构默认导出
  const { default: class_name } = await import(targetPath);
  // 在这里使用导入的class_name
}

// 调用函数执行导入
loadTargetModule();

注意：

• 动态导入是异步操作，所有依赖该模块的代码都要放在异步逻辑里
• 如果是Node.js环境，需要确保你的文件是ES模块（通过package.json设置"type": "module"）

2. 配置模块别名（更推荐的方案） #

针对「深层嵌套模块导入根目录附近模块」的场景，配置模块别名是更简洁、符合静态导入规范的方案，不用写冗长的相对路径或动态拼接：

Node.js ES模块环境 #

在项目根目录的package.json中添加imports字段：

{
  "type": "module",
  "imports": {
    "#root/*": "./folder_name/*"
  }
}

之后在任意嵌套深度的模块中，直接用别名导入：

import class_name from '#root/module_name.js';

构建工具环境（Webpack/Vite等） #

• Webpack：在webpack.config.js中配置别名

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@root': path.resolve(__dirname, 'folder_name')
    }
  }
};

• Vite：在vite.config.js中配置别名

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@root': path.resolve(__dirname, 'folder_name')
    }
  }
});

配置完成后，直接用别名导入即可：

import class_name from '@root/module_name.js';

3. 用CommonJS的require()（仅适用于CommonJS环境） #

如果你的项目未启用ES模块（package.json没有"type": "module"），可以直接用require()，它支持动态路径：

const class_name = require(`${process.cwd()}/folder_name/module_name.js`);

但注意ES模块文件不能混用require()，这种情况优先用动态import()。

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