JavaScript动态导入不支持模板字符串拼接变量路径，推荐用预定义映射表、import.meta.glob()或条件分支实现安全动态加载。
JavaScript 中动态导入（import()）不支持直接在模板字符串中拼接变量作为模块路径，因为模块解析必须在编译时（或至少是静态分析阶段）可确定。但你可以通过几种安全、实用的方式实现“用变量控制导入路径”的效果。
✅ 使用预定义的映射表替代硬编码拼接
这是最推荐、最安全的做法。避免运行时任意路径拼接带来的安全风险（如路径遍历）和打包工具无法分析的问题。
- 把合法的模块路径预先写死在对象或 Map 中，用变量作为键去查表
- 构建工具（如 Webpack、Vite）能静态识别这些路径，正常进行代码分割和预加载
示例：
const moduleMap = {
'chart': './modules/chart.js',
'table': './modules/table.js',
'form': './modules/form.js'
};
<p>async function loadModule(type) {
const path = moduleMap[type];
if (!path) throw new Error(<code>Unknown module type: ${type}</code>);
const mod = await import(path);
return mod.default || mod;
}</p><p>// 使用
loadModule('chart').then(Chart => { /<em> ... </em>/ });✅ 利用 Webpack/Vite 的 require.context（仅限构建时已知目录）
如果你要导入的是某个固定目录下的多个模块（比如 locales、components），可以用构建工具提供的上下文机制。
立即学习“Java免费学习笔记（深入）”；
- Webpack：使用
require.context()（仅 CommonJS 环境，且需配合import()的字符串字面量） - Vite：推荐用
import.meta.glob()预先收集模块，再按需调用
Vite 示例：
// 预先收集所有 ./locales/*.js 模块
const modules = import.meta.glob('./locales/*.js');
<p>async function loadLocale(lang) {
const mod = modules[<code>./locales/${lang}.js</code>];
if (!mod) throw new Error(<code>Locale ${lang} not found</code>);
return (await mod()).default;
}❌ 不要这样做：直接拼接变量（危险且无效）
以下写法无法工作，会被打包工具忽略或报错：
// ❌ 错误：路径不是字符串字面量，Webpack/Vite 无法分析
const lang = 'zh';
await import(`./locales/${lang}.js`); // → 构建时被跳过，运行时报错或 404
<p>// ❌ 更危险：用户输入参与路径
const userInput = '../secret/config';
await import(<code>./${userInput}.js</code>); // → 路径遍历漏洞！✅ 动态选择 + 字符串字面量兜底（适合有限枚举）
如果变量取值范围小且确定，可用 switch 或条件判断，每条分支都写明确定的 import() 字符串。
async function loadByEnv(env) {
switch (env) {
case 'dev':
return import('./config/dev.js');
case 'prod':
return import('./config/prod.js');
case 'test':
return import('./config/test.js');
default:
throw new Error('Unknown env');
}
}这种方式完全静态可分析，无安全隐患，适合配置、环境、主题等有限场景。
