---
order: 8
title: 国际化
---

`@enos/dpl` 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。

## Locale

DPL提供一个工具类 `Locale` 用于全局配置DPL组件的国际化文案。

```jsx
import { Locale } from '@enos/dpl';
import zhCN from '@enos/dpl/lib/locale/lang/zh_CN';

Locale.use(zhCN);

return (
  <App />
);
```

注意：`zh_CN` 是文件名，以下表格也遵循同样的规则。

目前支持以下语言：

|语言|文件名|
|---|---|
|英语（美式）|en_US|
|简体中文|zh_CN|

## Locale工具

DPL提供了一个独立工具类 `localeUtils` ，用于配置和使用整个项目的国际化文案资源，支持资源自动合并和格式化的文案。

- 国际化文案资源编写

全局资源以语言为key统一放置在项目的`locale`文件夹下

```
locale
  - en-US.js
  - zh-CN.js
```

具体的语言文件内，可自定义嵌套结构填写具体文案值，最终的文案key将组合路径上的所有字段名，用`.`分隔，如下例中，`title`的最终key将为`user.title`

```js
const locale = {
  user: {
    title: '---User---'
  }
};

export default locale;
```

- 初始化全局资源

在项目入口处通过`init`方法初始化全局资源：

```js
import { init, collectResource } from '@enos/dpl/lib/locale/localeUtils';

init(collectResource(require.context('./locale', false, /\.js$/)));
```

DPL提供了工具方法`collectResource`，可通过webpack的require.context自动合并资源，但也可手动传入，如：

```js
import { init } from '@enos/dpl/lib/locale/localeUtils';
import enUS from './locale/en-US';
import zhCN from './locale/zh-CN';

const res = {
  'en-US': enUS,
  'zh-CN': zhCN
};

init(res);
```

- 通过key获取国际化文案

```jsx
import localeText from '@enos/dpl/lib/locale/localeUtils';

ReactDOM.render(<div>{localeText('user.title')}</div>, mountNode);
```

- 格式化文案支持，可使用位置占位符或key占位符

```js
// en-US.js
const locale = {
  user: {
    date: 'Current Date:{0}, Time:{1}',
    time: 'Current Time:{time}',
    welcome: 'Hello {name}, you have {count} unread messages'
  }
};

export default locale;

// Usage
import localeText from '@enos/dpl/lib/locale/localeUtils';

ReactDOM.render(
  <div>
    <div>{localeText('user.date', new Date().toDateString(), new Date().toTimeString())}</div>
    <div>{localeText('user.time', { time: new Date().toTimeString() })}</div>
    <div>{localeText('user.welcome', { name: 'Jason', count: 25 })}</div>
  </div>, mountNode);
```

- 局部自定义文案支持

```js
import { localeTextFromRes } from '@enos/dpl/lib/locale/localeUtils';

const localRes = {
  'en-US': {
    info: 'Locale Text {0}'
  },
  'zh-CN': {
    info: '局部文字 {0}'
  }
};

ReactDOM.render(<div>{localeTextFromRes('info', localRes)}</div>, mountNode);
```

工具类支持的方法如下：

|方法名|参数|描述|
|---|---|---|
| localeText | key: 国际化文案的key | 根据key获取文案值，支持格式化文字，参数可按位置或key映射，此方法为默认导出方法
| localeTextFromRes | key: 国际化文案的key <br /> localeResource: 指定的国际化资源，将在此资源对象中搜索key对应的文字 | 根据key在指定资源中获取文案值，支持格式化文字，参数可按位置或key映射
| getLocale | | 获取当前Locale
| setLocale | locale: 需要设置的Locale | 设置当前Locale
| setLocaleToCookie | locale: 需要设置的Locale <br /> options: Cookie的配置 | 设置Locale到Cookie中
| init | globalResource: 全局国际化资源 <br /> customDefaultLocale: 自定义的默认Locale，如不设置默认为`en-US` | 初始化全局国际化资源
| collectResource | context: 通过require.context获取的结果 | 通过require.context自动合并所有的国际化资源，以文件名为Locale key