跳到主要内容

国际化

本项目单独维护了一个多语言子库,该库内置了简洁的多语言处理脚本及运行时工具,可满足大部分场景下的多语言处理需求。多语言库运行时无第三方库依赖,开发者可自由选择第三方处理工具,当前 Web 应用使用 react-intl-universal处理系统的多语言。

多语言库

多语言库位于 packages/locales 目录中,结构如下:

locales
├── import # 待导入多语言文案
│ ├── en.json # 英文文案
│ └── zh.json # 中文文案

├── scripts # 脚本工具
├── src # 应用目录
│ ├── lang # 语言模块
│ ├── helper.ts # 工具函数
│ └── index.ts # 入口文件

├── README.md
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

命名规范

为避免多语言文案的命名冲突,我们约定了一套统一的命名规范:

  1. 文案 key 命名必须为小写、下划线(_ 拼接的字符,格式为 {一级}.{二级}.{...}.{具体功能},命名层级最多不应超过 4 级,如:auth.free_trial.tip
  2. 文案中若有变量,则必须使用整型的数字占位,比如:"common.label.edit_title": "Edit {1}"
  3. 若为全局文案,约定以 common 作为 key 的一级命名;
  4. 若为后端错误码文案,约定命名规则为 error.http.{error_code},其中 error_code 为后端返回的错误码,如:error.http.data_no_found

开发维护

多语言库维护了大仓所有项目的多语言文案,为避免各应用在运行时载入冗余资源,我们约定以文案 key 的一级命名作为模块拆分依据,开发时可基于此规则进行文件模块拆分,具体可参考 src/lang/en 目录下的文件模块拆分。

在拆分模块的同时,我们也允许将多类一级 key 合并为一个模块,如当前配置中将 common, valid, auth 合并如 global.json 中,作为一个模块。具体可参考 scripts/local.config.json 配置文件。

常用命令:

# 从 `import` 目录导入并拆分国际化文案
pnpm run import

# 导出文案到 `.export` 目录,并检验
pnpm run export

i18n 服务

Web 应用界面未开放多语言切换入口,但项目中已内置了 i18n 服务,开发者仅需处理简单的 UI 界面逻辑,调用 i18n 服务即可实现多语言切换。

i18n 服务作为通用服务,是在 packages/shared 库中维护,涉及 shared/src/services/i18n.ts, shared/src/hooks/useI18n.ts, shared/src/stores/global.ts 三个文件。若仅需在 Web 应用中使用 i18n 服务,shared/src/hooks/useI18n.ts 已可满足需求,若需定制处理,则可参考 shared/src/services/i18n.ts 进行扩展。