require()拼接或插值字符串加载i18n资源报无法找到模块错误如何解决

核心原因 #

你遇到的问题是Browserify打包工具的静态依赖扫描机制导致的：

• Browserify、Webpack这类前端预打包工具，都会在构建阶段静态扫描所有require()语句的路径。只有路径是完全固定的字面量字符串时，工具才会识别到对应依赖，把目标JSON文件提前打包到最终产物里，运行时才能正常加载。
• 不带插值的纯静态模板字符串会被识别为固定路径，所以你的第一种写法可以正常运行。一旦路径中加入模板插值、字符串拼接逻辑，就会被工具判定为运行时才能确定的动态路径，构建阶段不会把对应的i18n JSON文件打入产物，运行时自然抛出找不到模块的错误。

可行解决方案 #

方案1：用Node文件API读取（推荐用于e2e场景） #

e2e测试一般运行在Node环境中，直接用fs模块读取文件即可绕过Browserify的require打包限制：

const fs = require('fs');
const path = require('path');
// lang可以从配置中动态读取
const lang = 'en';
const i18nFilePath = path.resolve(__dirname, `../../../../web/src/assets/i18n/${lang}.json`);
const i18nAsset = JSON.parse(fs.readFileSync(i18nFilePath, 'utf-8'));

方案2：提前预加载所有语言包 #

如果你的项目支持的语言数量不多，可以提前显式引入所有语言包，运行时按语言取值即可：

// 构建阶段会把所有声明的语言包都打入产物
const i18nMap = {
  en: require('../../../../web/src/assets/i18n/en.json'),
  zh: require('../../../../web/src/assets/i18n/zh.json'),
  // 其他需要支持的语言依次添加
};
// lang从配置动态读取
const lang = 'en';
const i18nAsset = i18nMap[lang];

方案3：配置Browserify插件支持动态require #

可以安装brfs等Browserify插件，开启动态路径的扫描支持，同时要配置打包规则把所有i18n目录下的JSON文件都纳入打包范围。

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