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

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