如何通过文件名变量导入JavaScript代码？

首先可以明确：你写的这种静态import写法是无法实现的。
ES 模块的静态导入语法要求导入路径必须是固定的字符串字面量，会在代码编译/解析阶段提前处理，不支持传入运行时才能确定值的变量作为路径。

如果你确实需要在运行时根据变量动态加载模块，可以使用下面两种方案：

方案1：使用动态import()（浏览器、Node.js ES 模块环境通用） #

ES2020 引入了动态导入语法import()，支持传入动态路径参数，返回值是 Promise，属于异步加载逻辑，用法示例：

const mydir = "./bobs_pictures.js";

// Promise 链式调用写法
import(mydir)
  .then(module => {
    // 加载完成后从模块中取出默认导出
    const pictures = module.default;
    // 此处即可正常使用pictures
  })
  .catch(err => {
    // 处理路径不存在、模块报错等加载异常
    console.error("模块加载失败：", err);
  });

如果你的运行环境支持async/await，也可以写成更简洁的形式：

async function loadModule() {
  const mydir = "./bobs_pictures.js";
  try {
    const module = await import(mydir);
    const pictures = module.default;
    return pictures;
  } catch(err) {
    console.error("加载失败：", err);
  }
}

方案2：Node.js CommonJS 环境用require() #

如果你用的是 Node.js 的 CommonJS 模块规范，require本身就支持传入动态变量作为路径，是同步加载逻辑：

const mydir = "./bobs_pictures.js";
const pictures = require(mydir);

注意事项 #

• 如果你在前端项目中用打包工具（Webpack、Vite 等）处理动态导入，完全没有固定前缀的纯变量路径会导致打包工具无法做静态分析，可能会把全部 js 文件都打包进产物，建议给路径加上固定前缀缩小范围，比如import(./modules/${filename}.js)。
• 动态导入的模块会被单独拆分为分包，不会和主代码打包在一起，需要注意网络加载延迟的问题。

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