本文深入探讨动态 import() 因相对路径解析基准固定（以模块定义位置为准）而引发的路径传递混乱问题，提供基于 __dirname 与 path.join 的可靠解决方案，并介绍现代化工程化替代方案。
在使用 ES 模块的动态导入（import(...)）时，开发者常常遇到一个棘手限制：路径参数必须为静态字符串字面量，且其解析基准始终是 import() 语句所在模块的文件位置，而非调用方的位置。这一细节正是众多路径混乱问题的根源。
通俗来说，假设在 foo.js 中调用 loadTranslationFiles("./path/to/dictionary")，而实际执行 import(`${pathname}/${lang}.json`) 的代码位于 translation.js 内部。此时，pathname 变量将被解释为相对于 translation.js 所在目录——即 ./path/to/utils/translation.js。这会导致以下情况：
- 你传递的 "./path/to/dictionary" 在 translation.js 的视角下无法正确定位；
- 而反直觉的 "../../../path/to/dictionary" 反而能指向正确路径。
归根结底，问题根源在于路径解析基准，而非路径字符串本身出错。
✅ 正确解法：让被调用模块自行计算路径
最稳健的解法是：避免被调用模块猜测调用方的位置，而是固定自身的坐标系。具体而言，让 translation.js 利用 Node.js 的 __dirname（需确保环境支持）与 path.join 自行构造绝对路径：
// ./path/to/utils/translation.js
import { join } from 'path';
export const loadTranslationFiles = async (baseDirName) => {
const baseDir = join(__dirname, '..', '..', baseDirName); // 从 translation.js 出发向上定位
const languages = ['en', 'de', 'fr'];
const translations = {};
for (const lang of languages) {
try {
const module = await import(`${baseDir}/${lang}.json`);
translations[lang] = module.default;
} catch (err) {
console.warn(`Failed to load ${lang}.json:`, err.message);
}
}
return translations;
};
这样一来，调用方的代码变得简洁明了：
// ./foo.js
import { loadTranslationFiles } from './path/to/utils/translation';
// 传入相对于 project root 的子路径（逻辑上更直观）
const translations = await loadTranslationFiles('path/to/dictionary');
⚠️ 注意事项：
- __dirname 在纯 ESM 环境中不可用（ESM 无 __dirname），若项目使用 .mjs 或 type: "module"，则应改用 fileURLToPath(import.meta.url)：
import { dirname, join } from 'path'; import { fileURLToPath } from 'url'; const __dirname = dirname(fileURLToPath(import.meta.url));- 动态 import() 的路径不能包含变量（如 ${baseDir}/...），但通过 join() 生成的字符串是静态可分析的，Webpack/Vite 等构建工具能够正确打包 JSON 文件；
- 建议添加 try/catch 处理缺失的语言文件，避免单点失败导致全部加载中断。
? 更优实践：采用成熟的国际化方案
不过，手动管理多语言 JSON 文件的加载确实容易出错且扩展困难。在生产环境中，强烈推荐直接使用专业的 i18n 库：
- formatjs.io：行业标准，支持 ICU 消息格式、编译时提取、服务端渲染；
- next-translate（Next.js 专用）：零配置多语言支持，自动按路由加载对应翻译；
- i18next：高度可定制，插件生态丰富，兼容 SSR/CSR。
这些库已内置路径解析、缓存、语言回退、格式化等功能，比手写 import() 更可靠，维护性也提升一个档次。
总而言之，核心要点有两个：一是避免在动态 import 中传递“调用方视角”的相对路径；二是让工具模块基于自身的物理位置计算路径，或者直接采用成熟的国际化框架。这样既能彻底规避路径歧义，又能提升代码的可读性与长期可维护性。
