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

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

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

核心：

使用 react-intl 导出的 defineMessages 定义 intel 配置

其他使用 umi max 的工具函数和组件进行 intl 的国际化功能

怎么开始使用Umi国际化配置？

在配置文件[.umrc.ts 或者 config/config.(ts | js) ] 中配置（通常就只需要一次性配置即可）
1. Umi 配置文件更改
2. package.json 中添加 script 配置
3. gen-i18n.js 的内容为
从 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}',
 },
});

提取页面的 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": "适用于表格形式图片的识别和文字提取"
}

使用 @umijs/max 中的方法来保证可以适配 antd
1. 在组件或者 page 文件中使用 @umijs/max 的 useIntl 或 FormattedMessage 可以保证 antd 国际化进行同步
切换语言，检查页面是否渲染 okay

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

其他

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;
}

参考链接：

延展阅读：

淘宝2024双11商家有必要入驻“加价选顺丰”吗？“加价选顺丰”未履约赔付15元对淘宝商家有什么影响？

淘宝京东电商客服如何更好地催单、跟单提升询单转化率和顾客体验？

从事客服工作的真实体验是什么样的？未来人工客服将如何发展？