国际化接入流程

常规工作流

参考 粤工惠后台国际化说明

配置 i18n

以原语言为中文，需支持英文翻译为例：

依赖安装

pnpm add dos2unix-cli gettext-parser narp react-gettext-parser@github:ifanrx/react-gettext-parser#e0bc169909c44f8a1a558fe2ce2e104155eca64d

TIP

react-gettext-parser 使用的是 ifanrX 二次封装的版本

如果未加入 ifanrX Team，请联系 @xunuo 加入，否则会下载失败

新建 narp 配置文件

在根目录下创建 .narprc 文件

.narprc

{
  "vendor": {
    "name": "poeditor",
    "credentials": {
      "token": ""
    },
    "options": {
      "project": "your_project_id",
      "sourceLanguage": "zh-CN"
    }
  },
  "extract": {
    "source": ["./src/**/*.jsx", "./src/**/*.js"],
    "funcArgumentsMap": {
      "gettext": ["msgid"],
      "ngettext": ["msgid", "msgid_plural"],
      "pgettext": ["msgctxt", "msgid"],
      "npgettext": ["msgctxt", "msgid", "msgid_plural"]
    }
  },
  "output": "./src/i18n/locales.json",
  "verbose": true
}

配置可用语言

@/constants/i18n.js

export default {
  ZH_CN: 'zh-CN',
  EN_US: 'en-us',
}

配置 scripts

在 package.json 内增加以下配置

package.json

{
  "scripts": {
    "dos2unix:narp": "dos2unix ./node_modules/narp/bin/narp.js",
    "narp-push": "pnpm dos2unix:narp && narp push --token=$NARP_VENDOR_TOKEN --fresh",
    "narp-pull": "pnpm dos2unix:narp && narp pull --token=$NARP_VENDOR_TOKEN && split-locales-json"
  }
}

初始化 locales

在任意文件内调用 gettext（如果有其他地方已经调用过 gettext，可以忽略这个步骤）

如：

@/App.jsx

// ...
gettext('hello world')
// ...

在命令行运行

pnpm narp-push

到 POEditor 对应的项目内能够看到刚刚提交的文本，即表示上传成功

再回到命令行，运行

pnpm narp-pull

回到 src 目录，若已生成 i18n 文件夹，且文件夹内包含 locale 文件夹和 locales.json 文件，即表示国际化内容已经初始化成功

src
├── i18n
│   ├── locale
│   │   ├── en-us.json
│   │   └── zh-CN.json
│   └── locales.json

配置 translations

在 i18n 文件夹下新建 locale.js 文件，并写入以下内容

locale.js

import {initI18n} from '@ifanrx/dashboard'

import I18N_LANG from '@/constants/i18n'

import zhCN from './locale/zh-CN.json'
import enUS from './locale/en-us.json'

const TRANSLATIONS = {
  [I18N_LANG.ZH_CN]: zhCN,
  [I18N_LANG.EN_US]: enUS,
}

initI18n(TRANSLATIONS, I18N_LANG.ZH_CN)

在 main.jsx 内引入 locale.js，确保在业务代码运行之前初始化 i18n

@/main.jsx

import ReactDOM from 'react-dom/client'
import 'virtual:uno.css'

import '@/i18n/locale'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

至此，i18n 已经接入完成，只需要再切换语言时调用 setLocale 即可

其他拓展

Dayjs 国际化

改变全局语言配置

可在调用 setLocale 切换语言时，同时切换 dayjs 语言

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import 'dayjs/locale/en'

import I18N_LANG from '@/constants/i18n'

const DAYJS_LOCALES = {
  [I18N_LANG.ZH_CN]: 'zh-cn',
  [I18N_LANG.EN_US]: 'en',
}

function setDayjsLocale(locale) {
  dayjs.locale(DAYJS_LOCALES[locale])
}

function onClick(locale) {
  setLocale(locale)
  setDayjsLocale(locale)
}

Antd 组件国际化

国际化

import zhCN from 'antd/es/locale/zh_CN'
import enUS from 'antd/es/locale/en_US'

import I18N_LANG from '@/constants/i18n'

const antdLocales = {
  [I18N_LANG.ZH_CN]: zhCN,
  [I18N_LANG.EN_US]: enUS,
}

export default function App() {
  const {locale} = useProxy(i18n)

  return (
    <ProProvider.Provider>
      <ConfigProvider locale={antdLocales[locale]}>/** ... */</ConfigProvider>
    </ProProvider.Provider>
  )
}