Skip to content

国际化

Jump to bottom
赵鹏程(珵之) edited this page Nov 15, 2023 · 1 revision

国际化

@alifd/next 目前的默认文案是中文，如果需要使用其他语言，可以参考下面的方案：

组件国际化

组件内置文案国际化能力由 ConfigProvider提供,目前支持以下语言:

语言名称 文件名
简体中文 zh-cn
繁体中文(香港) zh-hk
繁体中文 zh-tw
美式英语 en-us
日文 ja-jp
越南语 vi-vn
意大利语 it-it
葡萄牙语(葡萄牙) pt-pt
韩语(韩国) ko-kr
马来语(马来西亚) ms-my
泰语 th-th
印度尼西亚语 id-id

指定多语言文案

目前 Fusion 内置的 locale 库支持上述几种语言，覆盖各组件的简单词汇，例如：确定、取消、展开、收起、下一页等， 简单词汇映射表可参考 https://unpkg.com/@alifd/next/lib/locale/

可通过两种方式设置多语言文案，两种方式接收的对象格式略有不同:

  1. 设置组件自身 locale 属性
const localeDatePicker = {
    key1: value1,
    key2: value2
}
<DatePicker locale={localeDatePicker}>
  1. ConfigProvider 的 locale 属性 (推荐)
const localeObj = {
    component1: {
        key1: value1,
        key2: value2
    },
    component2: {
        key1: value1,
        key2: value2
    }
}

<ConfigProvider locale={localeObj}>

优先级顺序为: 组件自身 locale > 最近 ConfigProvider 的 locale > 更远父级 ConfigProvider 的 locale

import { ConfigProvider, DatePicker } from '@alifd/next';

const localeDatePicker = {
  placeholder: 'localeDatePicker placeholder'
};

const localeGlobal = {
  DatePicker: {
    placeholder: 'localeGlobal placeholder'
  }
};

class App extends React.Component {
    render() {
        return (
            <div>
                <ConfigProvider locale={localeGlobal}>
                    <DatePicker /> will be 'localeGlobal placeholder'
                </ConfigProvider>
                <br />
                <br />
                <ConfigProvider locale={localeGlobal}>
                    <DatePicker locale={localeDatePicker} /> will be 'localeDatePicker placeholder'
                </ConfigProvider>
            </div>
        );
    }
}

根据引入组件库方式的不同(CDN直接引用、作为依赖引用)，使用语言包的方式略有差异，具体见如下代码：

import { ConfigProvider, DatePicker } from '@alifd/next';
import enUS from '@alifd/next/lib/locale/en-us';
// import zhCN from '@alifd/next/lib/locale/zh-cn';
// import zhHK from '@alifd/next/lib/locale/zh-hk';
// import zhTW from '@alifd/next/lib/locale/zh-tw';
// import jaJP from '@alifd/next/lib/locale/ja-jp';

// 如果应用中直接引入的是 cdn 上的 next-with-locales.js 文件
// 需要按照下面的方式引入国际化文案文件
// const { ConfigProvider, DatePicker, locales } = window.Next;
// const enUS = locales['en-us'];


class App extends React.Component {
    render() {
        return (
            <ConfigProvider locale={enUS}>
                <DatePicker />
            </ConfigProvider>
        );
    }
}

如果内置的 locale 库不满足你的需求(比如想支持法语、德语、西班牙语)，你也可以参考 https://unpkg.com/@alifd/next/lib/locale/ 来自定义语言包。欢迎大家提交PR,增加语种

{
    DatePicker: {
        datePlaceholder: 'Select date',
        monthPlaceholder: 'Select month',
        yearPlaceholder: 'Select year',
        rangeStartPlaceholder: 'Start date',
        rangeEndPlaceholder: 'End date',
        ok: 'OK',
        clear: 'Clear'
    },
    Dialog: {
        // ...
    },
    // ...
}

日期国际化

@alifd/next 在处理日期时间相关组件逻辑时，使用了 moment 库，自带国际化相关能力，我们将其作为 peerDependencies，所以用户需要自己在应用中引入 moment 的 cdn 文件 moment-with-locales.js 或者本地安装 moment 打包进自己的应用。 对于后者，由于 moment 在引入 locale 文件时存在这样的代码：require('./locale/' + name)，如果用 webpack 构建，会打包进所有的 locale 文件，增加构建后文件的体积，目前社区比较主流的解决方案有以下两种：

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    // 打包指定需要的语言文件
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|ja/)
    // 只打包有过引用的语言文件，应用中需要添加如：`import 'moment/locale/zh-cn';`
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

内容国际化

除了组件本身和日期,还有货币,文案等内容需要国际化。这部分内容的国际化内容比较麻烦,React生态圈做的好一点的方案有Yahoo的react-intl、react-intl-universal、react-i18next。使用起来都不容易。

以下推荐以下几篇文章: 5分钟前端国际化 - 蚂蚁金服·数据体验技术团队 前端国际化 react-intl 实现 React 国际化多语言

Alibaba Fusion Design

Clone this wiki locally