如何在 Umi 中实现高效的国际化配置?

当产品需要面向不同的语种客户的时候,这就需要做国际化了!

本篇文章主要是为了 在 umi 使用国际化

核心:

  1. 使用 react-intl 导出的 defineMessages 定义 intel 配置
  2. 其他使用 umi max 的工具函数和组件进行 intl 的国际化功能

文章导航

开始使用

  1. 在配置文件[.umrc.ts 或者 config/config.(ts | js) ] 中配置 (通常就只需要一次性配置即可)
    1. Umi 配置文件更改
    2. package.json 中添加 script 配置
    3. gen-i18n.js 的内容为
  2. 从 react-intl 导出的 defineMessages 才可以将 intl-id 生成到对应的 src/locales/$locale.json 中

因为我们需要用到 https://www.npmjs.com/package/@formatjs/cli 将定义好的 intl 配置自动提取到 src/locales/$locale.json

// locales.tsx
import { defineMessages } from 'react-intl' // 提前 install

export const intlObj = defineMessages({ 
  suitTablePicAndTextPic: {
    id: 'suitTablePicAndTextPic',
    defaultMessage: '适用于表格形式图片的识别和文字提取',
  },
  addOrDragImgToUpload: {
    id: 'addOrDragImgToUpload',
    defaultMessage: '添加或拖拽图片上传',
  },
  picMaxSize: {
    id: 'picMaxSize',
    defaultMessage: '图片大小不能超过{maxSize}',
 },
});
  1. 提取页面的 locale 配置信息并 merge 到 src/locales/$locale.json
npm run gen-i18n.js   // 自动提取在 tsx 文件中的国际化定义

// gen-i18n 脚本大概会生成这样的文件和 log

你需要使用 gpt 将:  {
  "addOrDragImgToUpload": "添加或拖拽图片上传",
  "hello": "你好",
  "suitTablePicAndTextPic": "适用于表格形式图片的识别和文字提取"
} 

翻译为 en-US 语言并 放在 src/locales/en-US.json 文件中

// en-US 在你未放置翻译文件时大概是这样的, 除了默认语言外,都需要人工识别一下
{
  "hello": "hello",
  "picMaxSize": "picMaxSize",
  "suitTablePicAndTextPic": "suitTablePicAndTextPic"
}

// zh-CN 默认生成
{
   "addOrDragImgToUpload": "添加或拖拽图片上传",
  "hello": "你好",
  "picMaxSize": "图片大小不能超过{maxSize}",
  "suitTablePicAndTextPic": "适用于表格形式图片的识别和文字提取"
}
  1. 使用 @umijs/max 中的方法来保证可以适配 antd
    1. 在组件或者 page 文件中使用 @umijs/max 的 useIntl 或 FormattedMessage 可以保证 antd 国际化进行同步
  2. 切换语言,检查页面是否渲染 okay

umi 国际化 – 语言切换 SelectLang 点击之后内部会做切换

如何在 Umi 中实现高效的国际化配置?
如何在 Umi 中实现高效的国际化配置?

其他

export declare interface IntlFormatters {
    formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
    formatTime(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
    formatDateToParts(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): Intl.DateTimeFormatPart[];
    formatTimeToParts(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): Intl.DateTimeFormatPart[];
    formatRelativeTime(value: Parameters<IntlRelativeTimeFormat['format']>[0], unit?: Parameters<IntlRelativeTimeFormat['format']>[1], opts?: FormatRelativeTimeOptions): string;
    formatNumber(value: Parameters<Intl.NumberFormat['format']>[0], opts?: FormatNumberOptions): string;
    formatNumberToParts(value: Parameters<Intl.NumberFormat['format']>[0], opts?: FormatNumberOptions): Intl.NumberFormatPart[];
    formatPlural(value: Parameters<Intl.PluralRules['select']>[0], opts?: FormatPluralOptions): ReturnType<Intl.PluralRules['select']>;
    formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
    formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>): string | React.ReactNodeArray;
    formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
    formatList(values: Array<string>, opts?: FormatListOptions): string;
    formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
}

参考链接:

  1. Umi Max 国际化
  2. umi 中 配置文件 locale 的常用配置说明
  3. CLI | Format.JS
咨询方案 获取更多方案详情                        
(0)
研发专家-小柯研发专家-小柯
上一篇 2024年6月29日 下午8:01
下一篇 2024年7月2日 上午11:45

相关推荐