动态导入中正确传递字符串字面量路径参数

本文讲解如何解决动态 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 里传递“调用方视角”的相对路径；二是让工具模块基于自己的物理位置计算路径，或者直接采用成熟的国际化框架。这样既能彻底规避路径歧义，又能让代码的可读性和长期可维护性提升一个台阶。