前端项目国际化 i18n 怎么工程化？

Question

前端项目国际化 i18n 怎么工程化？

仓乃文 · Accepted Answer

i18n 工程化的核心挑战不是技术实现，而是翻译文件的管理、缺失翻译的检测、以及动态切换语言时的性能优化。没有工程化约束的 i18n 项目，翻译遗漏和 key 混乱是迟早的事。

Vue 项目方案（vue-i18n）：
```typescript
import { createI18n } from "vue-i18n";
import zhCN from "./locales/zh-CN";
import enUS from "./locales/en-US";

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem("locale") || "zh-CN",
  fallbackLocale: "zh-CN",
  messages: { "zh-CN": zhCN, "en-US": enUS },
});

export default i18n;
```

翻译文件组织：
```
src/i18n/locales/
├── zh-CN/
│   ├── common.json
│   ├── user.json
│   └── order.json
```

按需加载翻译（性能优化）：
```typescript
const messages = import.meta.glob("./locales/**/*.json");

async function loadLocaleMessages(locale: string) {
  const keys = Object.keys(messages).filter((key) => key.includes(`/${locale}/`));
  const loaded = await Promise.all(keys.map((key) => messages[key]()));
  keys.forEach((key, i) => {
    const moduleName = key.split("/").pop()?.replace(".json", "");
    i18n.global.mergeLocaleMessage(locale, { [moduleName!]: loaded[i].default });
  });
}
```

工程化保障：
```javascript
// scripts/check-i18n.js - 检测翻译遗漏
const fs = require("fs");
const zhCN = require("../src/i18n/locales/zh-CN/common.json");
const enUS = require("../src/i18n/locales/en-US/common.json");

const missing = findMissingKeys(zhCN, enUS);
if (missing.length > 0) {
  console.error("缺失的英文翻译：", missing);
  process.exit(1);
}
```

补充说明：
- 翻译 key 建议用模块前缀：user.login.title 而非 title，避免冲突
- 数字、日期、货币格式化用 Intl API，不要自己写
- 检测脚本加到 CI 中，防止翻译遗漏上线
- 大型项目推荐 i18next + react-i18next（React）或 vue-i18n（Vue）