国际化
本项目单独维护了一个多语言子库,该库内置了简洁的多语言处理脚本及运行时工具,可满足大部分场景下的多语言处理需求。多语言库运行时无第三方库依赖,开发者可自由选择第三方处理工具,当前 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
命名规范
为避免多语言文案的命名冲突,我们约定了一套统一的命名规范:
- 文案 key 命名必须为小写、下划线(
_
) 拼接的字符,格式为{一级}.{二级}.{...}.{具体功能}
,命名层级最多不应超过 4 级,如:auth.free_trial.tip
; - 文案中若有变量,则必须使用整型的数字占位,比如:
"common.label.edit_title": "Edit {1}"
; - 若为全局文案,约定以
common
作为 key 的一级命名; - 若为后端错误码文案,约定命名规则为
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
进行扩展。