如何正确传递字符串字面量导入路径至函数参数，适配调用方路径

问题场景 #

文件结构 #

/root
  |--foo.js
  |--path
  |     |--to
  |         |--utils
  |              |--translation.js
  |
  |--path
        |--to
            |--dictionary
                 |--en.json
                 |--de.json
                 |--fr.json

现有代码 #

./path/to/utils/translation.js中的函数：

export const loadTranslationFiles = (pathname) => {
  ["en", "de", "fr"].forEach(async (lang) => {
    const translationValue = (await import(`${pathname}/${lang}.json`)).default;

    // ... 其他处理逻辑
  })
};

./foo.js中的调用：

import { loadTranslationFiles } from "./path/to/utils/translation";

loadTranslationFiles("./path/to/dictionary"); // 报错：无法找到模块...
loadTranslationFiles("../../../path/to/dictionary"); // 可行！

当前问题：loadTranslationFiles要求传入的路径必须相对于自身所在的translation.js，而非调用方foo.js，导致函数复用需要反复计算相对层级，非常麻烦。希望能让调用方传递相对于自身的路径（比如./path/to/dictionary）来正常调用。

解决方案 #

方案1：利用import.meta.url转换路径（ES模块环境） #

通过获取当前模块的绝对路径，将调用方传入的相对路径转换为绝对路径，规避相对路径的层级问题。

修改translation.js：

import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

// 获取当前模块的绝对路径
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export const loadTranslationFiles = (callerRelativePath) => {
  // 将调用方的相对路径拼接为绝对路径
  const absoluteDictPath = join(__dirname, callerRelativePath);
  
  ["en", "de", "fr"].forEach(async (lang) => {
    // Node.js环境下使用file协议导入，前端打包工具可直接用绝对路径
    const translationValue = (await import(`file://${absoluteDictPath}/${lang}.json`)).default;

    // ... 其他处理逻辑
  })
};

此时foo.js中直接调用即可：

loadTranslationFiles("./path/to/dictionary"); // 正常工作

说明：该方案适用于Node.js环境，或Vite、Rollup等支持import.meta.url的前端打包工具。Webpack环境可调整路径处理逻辑，核心思路一致。

方案2：基于项目根目录的绝对路径 #

约定路径基于项目根目录，调用方传入根相对路径，函数内部拼接为绝对路径。

Node.js环境示例

// translation.js
import { join } from 'path';

export const loadTranslationFiles = (rootRelativePath) => {
  // 基于项目根目录拼接绝对路径
  const absolutePath = join(process.cwd(), rootRelativePath);
  
  ["en", "de", "fr"].forEach(async (lang) => {
    const translationValue = (await import(`file://${absolutePath}/${lang}.json`)).default;

    // ... 其他处理逻辑
  })
};

调用时（foo.js）：

loadTranslationFiles("path/to/dictionary"); // 路径相对于项目根目录/root

前端打包工具示例

如果使用Webpack/Vite等工具，可配置根路径别名，比如将/映射为项目根目录，调用方直接传入/path/to/dictionary即可，函数内无需额外处理。

方案3：静态资源HTTP请求（前端场景） #

如果是前端项目，可将翻译文件作为静态资源，通过fetch加载，路径基于网站根目录，彻底脱离模块系统的路径解析限制。

// translation.js
export const loadTranslationFiles = (staticPath) => {
  ["en", "de", "fr"].forEach(async (lang) => {
    const response = await fetch(`${staticPath}/${lang}.json`);
    const translationValue = await response.json();

    // ... 其他处理逻辑
  })
};

调用时（foo.js）：

loadTranslationFiles("/path/to/dictionary"); // 路径相对于网站根目录

内容的提问来源于stack exchange，提问作者Huy