无需使用import()实现静态导入资源的条件调用方法咨询

方案1：手动构建语言映射（最稳妥无依赖） #

该方案不依赖任何打包工具特性，也不需要挂载全局变量，完全符合你的需求。你只需要把所有静态导入的语言包统一放到映射对象中，直接通过语言key取值即可：

// 原有静态导入逻辑不变
import { en } from './langs/en.json';
import { fr } from './langs/fr.json';

// 手动构建语言映射表
const langMap = {
  en,
  fr
}

// 按条件获取对应语言资源
const selectedLang = "en";
const lang = langMap[selectedLang];

该方案写法简单无兼容问题，适合语言数量较少的场景，所有导入都是静态逻辑，不会触发异步加载。

方案2：批量静态导入（适合多语言扩展场景） #

如果你后续需要支持的语言数量较多，每次手动新增导入和映射太麻烦，可以用打包工具的批量静态导入能力，全程不需要写await import异步逻辑：

Vite 环境写法 #

// 批量导入langs目录下所有json文件，eager设为true表示直接静态加载，无需异步等待
const langModules = import.meta.glob('./langs/*.json', { eager: true });
// 自动构建映射表：从文件名提取语言标识
const langMap = Object.fromEntries(
  Object.entries(langModules).map(([path, module]) => {
    const langKey = path.match(/\/langs\/(\w+)\.json$/)[1];
    return [langKey, module[langKey]]
  })
)

// 取值逻辑和方案1完全一致
const selectedLang = "en";
const lang = langMap[selectedLang];

Webpack 环境写法 #

const langContext = require.context('./langs', false, /\.json$/);
const langMap = {};
langContext.keys().forEach(path => {
  const langKey = path.match(/\/(\w+)\.json$/)[1];
  langMap[langKey] = langContext(path)[langKey];
})

const selectedLang = "en";
const lang = langMap[selectedLang];

该方案的优势是新增语言时只需要往langs目录添加对应json文件即可，不需要修改导入逻辑，适合中大型项目使用。

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