当产品需要面向不同的语种客户的时候,这就需要做国际化了!
本篇文章主要是为了 在 umi 使用国际化
核心:
- 使用 react-intl 导出的 defineMessages 定义 intel 配置
- 其他使用 umi max 的工具函数和组件进行 intl 的国际化功能
开始使用
- 在配置文件[.umrc.ts 或者 config/config.(ts | js) ] 中配置 (通常就只需要一次性配置即可)
- Umi 配置文件更改
- package.json 中添加 script 配置
- 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
- 在组件或者 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;
}
参考链接:
咨询方案 获取更多方案详情