# umi-plugin-locale

> A umi plugin for provide internationalization function.

Latest version **2.11.7** (published 2022-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install umi-plugin-locale
pnpm add umi-plugin-locale
yarn add umi-plugin-locale
bun add umi-plugin-locale
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.11.7 |
| Published | 2022-05-25 |
| First published | 2018-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16049 |
| Maintainers | sorrycc, ikobe, yutingzhao1991, ycjcl868 |
| Keywords | umi |

## Links

- npm: https://www.npmjs.com/package/umi-plugin-locale
- Repository: https://github.com/umijs/umi.git#master
- Homepage: https://github.com/umijs/umi/tree/master/packages/umi-plugin-locale
- Issues: https://github.com/umijs/umi/issues
- npm.io page: https://npm.io/package/umi-plugin-locale

## Dependencies (9)

- [intl](https://npm.io/package/intl.md) 1.2.5
- [globby](https://npm.io/package/globby.md) 7.1.1
- [moment](https://npm.io/package/moment.md) 2.x
- [mustache](https://npm.io/package/mustache.md) 3.0.1
- [umi-utils](https://npm.io/package/umi-utils.md) 1.7.3
- [prop-types](https://npm.io/package/prop-types.md) 15.6.2
- [react-intl](https://npm.io/package/react-intl.md) 2.7.2
- [lodash.groupby](https://npm.io/package/lodash.groupby.md) 4.6.0
- [@ant-design/create-react-context](https://npm.io/package/@ant-design/create-react-context.md) 0.2.4

## Recent versions

- 2.11.7 (latest) — 2022-05-25
- 2.10.0-beta.2 (next) — 2019-08-31
- 2.11.6 — 2020-04-14
- 2.11.5 — 2020-03-27
- 2.11.4 — 2019-12-31
- 2.11.3 — 2019-11-01
- 2.11.2 — 2019-10-21
- 2.11.1 — 2019-10-10
- 2.11.0 — 2019-09-29
- 2.10.1 — 2019-09-17
- 2.10.0 — 2019-09-12
- 2.10.0-beta.1 — 2019-08-23
- 2.9.13 — 2019-08-22
- 2.9.12 — 2019-08-22
- 2.9.11 — 2019-08-14
- … 90 more at https://npm.io/package/umi-plugin-locale/versions

## README

# umi-plugin-locale

i18n plugin for umi.

---

Suggest to use together with umi-plugin-react, see our website [umi-plugin-react](https://umijs.org/plugin/umi-plugin-react.html) for more.

---

## 配置

**.umirc.js**

```js
export default {
  plugins: [
    [
      'umi-plugin-react',
      {
        locale: {
          default: 'zh-CN', //默认语言 zh-CN，如果 baseSeparator 设置为 _，则默认为 zh_CN
          baseNavigator: true, // 为true时，用navigator.language的值作为默认语言
          antd: true, // 是否启用antd的<LocaleProvider />
          baseSeparator: '-', // 语言默认分割符 -
        },
      },
    ],
  ],
};
```

Other: You can setDefaultLocal in `src/app.js`

```js
export const locale = {
  default: 'en-US', //默认语言 zh-CN，如果 baseSeparator 设置为 _，则默认为 zh_CN
};
```

## 目录及约定

```
.
├── dist/
├── mock/
└── src/
    ├── layouts/index.js
    ├── pages/
    └── locales               // 多语言文件存放目录，里面的文件会被umi自动读取
        ├── zh-CN.js
        └── en-US.js
├── .umirc.js
├── .env
└── package.json
```

> 如果`.umirc.js`里配置了`singular: true`，`locales`要改成`locale`

## 多语言文件约定

多语言文件的命名规范：`<lang><分割符（通过 baseSeparator 配置）><COUNTRY>.{ts,js,json}`

多语言文件的内容规范：键-值组成的字面量，如下：

zh-CN.js

```javascript
export default {
  WELCOME_TO_UMI_WORLD: '{name}，欢迎光临umi的世界',
};
```

en-US.js

```javascript
export default {
  WELCOME_TO_UMI_WORLD: "{name}, welcome to umi's world",
};
```

### 支持多格式的语言文件

支持 ts、js 和 json 格式的语言文件。

zh-CN.js, zh-CN.ts

```javascript
export default {
  WELCOME_TO_UMI_WORLD: '{name}，欢迎光临umi的世界',
};
```

zh-CN.json

```javascript
{
  "WELCOME_TO_UMI_WORLD": "{name}，欢迎光临umi的世界"
}
```

## 扩展 API

使用本插件后，你可以从 umi-plugin-locale 引入国际化相关的 API，获得关于多语言功能在编程上的便利。

```javascript
import { formatMessage, setLocale, getLocale, FormattedMessage } from 'umi-plugin-locale';

// 获取指定文字的多语言版本
const formatedText = formatMessage(
  {
    id: 'WELCOME_TO_UMI_WORLD',
  },
  {
    name: '小伙子',
  },
);

console.log(formatedText === '小伙子，欢迎光临umi的世界');

// 设置为 en-US
setLocale('en-US');

// 获取当前语言
console.log(getLocale() === 'en-US');

// 渲染一个文字标签
function Example() {
  return <FormattedMessage id="WELCOME_TO_UMI_WORLD" values={{ name: '小伙子' }} />;
}
```

---
_Source: https://npm.io/package/umi-plugin-locale · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._