JavaScript动态导入模块报错，如何正确实现按需导入指定模块？

静态import语句的模块路径必须是静态字面量字符串，不能使用变量、模板字符串这类动态生成的内容——这是ES模块语法的硬性规则，所以你之前的写法会触发SyntaxError。

要实现根据变量动态导入指定模块，需要使用动态import()函数，它支持传入动态路径，返回Promise对象，可通过async/await或.then()处理加载结果。

结合你的目录结构，正确代码示例如下：

使用async/await（推荐） #

async function loadAndUseModule(libName) {
  try {
    // 拼接lib目录下的模块路径
    const module = await import(`./lib/${libName}.js`);
    // 调用模块中的bar函数
    module.bar();
  } catch (err) {
    console.error('模块加载失败:', err);
  }
}

// 示例：导入并使用myLib0.js
loadAndUseModule('myLib0');

使用.then()链式调用 #

const targetLib = 'myLib1';
import(`./lib/${targetLib}.js`)
  .then(module => {
    module.bar();
  })
  .catch(err => {
    console.error('模块加载出错:', err);
  });

注意事项 #

• 动态import()需要在支持ES模块的环境中运行（现代浏览器、Node.js 14.8+）
• 务必添加错误捕获逻辑，避免因模块不存在或加载失败导致程序崩溃
• 若使用打包工具（如Webpack、Vite），动态导入会被自动处理为代码分割，优化加载性能

内容的提问来源于stack exchange，提问作者Linda Tabatha Forester