{"owner":"umijs","repo":"plugins","hasSkills":true,"totalSkillsCount":31,"totalTokensCount":6744,"categories":["plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["packages/plugin-access/README.md","packages/plugin-analytics/README.md","packages/plugin-ant-design-pro-block/README.md","packages/plugin-ant-design-pro-block/docs/README.md","packages/plugin-antd-dayjs/README.md","packages/plugin-antd-mobile/README.md","packages/plugin-antd/README.md","packages/plugin-block-devtool/README.md","packages/plugin-block-devtool/docs/README.md","packages/plugin-crossorigin/README.md","packages/plugin-dev-externals/README.md","packages/plugin-dva/README.md","packages/plugin-esbuild/README.md","packages/plugin-helmet/README.md","packages/plugin-initial-state/README.md","packages/plugin-layout/README.md","packages/plugin-locale/README.md","packages/plugin-locale/docs/README.en-US.md","packages/plugin-locale/docs/README.md","packages/plugin-model/README.md","packages/plugin-openapi/README.md","packages/plugin-preact/README.md","packages/plugin-qiankun/README.md","packages/plugin-request/README.md","packages/plugin-sass/README.md","packages/plugin-stylus/README.md","packages/plugin-test/README.md","packages/plugin-test/docs/README.md","packages/preset-ant-design-pro/README.md","packages/preset-react/README.md","packages/preset-umi2-compatible/README.md"],"skills":{"packages/plugin-access/README.md":"# @umijs/plugin-access\n\n> Umi plugin for access management..\n\nSee our website [@umijs/plugin-access](https://umijs.org/plugins/plugin-access) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-access\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-access --dev\n```\n","packages/plugin-analytics/README.md":"# @umijs/plugin-analytics\n\n> analytics for baidu tongji and google analytics.\n\nSee our website [@umijs/plugin-analytics](https://umijs.org/plugins/plugin-analytics) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-analytics\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-analytics --dev\n```\n","packages/plugin-ant-design-pro-block/README.md":"# @umijs/plugin-ant-design-pro-block\n\n> @umijs/plugin-ant-design-pro-block.\n\nSee our website [@umijs/plugin-ant-design-pro-block](https://umijs.org/plugins/plugin-ant-design-pro-block) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-ant-design-pro-block\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-ant-design-pro-block --dev\n```\n","packages/plugin-ant-design-pro-block/docs/README.md":"# @umijs/plugin-ant-design-pro-block\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-pro-block) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-ant-design-pro-block)\n\nA plugin for deliver umi block files like ant design pro structure.\n\nWhen you use `umi block demo` to download a block, if you did not use this plugin, you will get:\n\n```diff\n- src\n - mock\n - pages\n+ - demo\n+ - index.js\n+ - _mock.js\n+ - service.js\n```\n\nAnd if you use it, you will get:\n\n```diff\n- src\n - mock\n+ - demo.js\n - service.js\n+ - demo.js\n - pages\n+ - demo\n+ - index.js\n```\n\nAnt will replace `umi-request` to `util(s)/request.js` if it exist.\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: ['@umijs/plugin-blocks', '@umijs/plugin-ant-design-pro-block'],\n};\n```\n\n## Options\n\n```js\n{\n moveMock: false, // whether move _mock.js to mock, default to true\n moveService: false, // whether move service.js to src/services/, default to true\n modifyRequest: false, // whether modify umi-request to util(s)/request (if it exist), default to true\n autoAddMenu: false, // whether add name and icon config to route config when download a pro, default to true\n}\n```\n\n## LICENSE\n\nMIT\n","packages/plugin-antd-dayjs/README.md":"# @umijs/plugin-antd-dayjs\n\n用于在 umi 中代替 antd-dayjs-webpack-plugin.\n\n> @umijs/plugin-antd-dayjs\n\nSee our website [@umijs/plugin-antd-dayjs](https://umijs.org/plugins/plugin-antd-dayjs) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-dayjs\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-dayjs --dev\n```\n","packages/plugin-antd-mobile/README.md":"# @umijs/plugin-antd-mobile\n\n> @umijs/plugin-antd-mobile.\n\nSee our website [@umijs/plugin-antd-mobile](https://umijs.org/plugins/plugin-antd-mobile) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-mobile\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-mobile --dev\n```\n","packages/plugin-antd/README.md":"# @umijs/plugin-antd\n\n> @umijs/plugin-antd.\n\nSee our website [@umijs/plugin-antd](https://umijs.org/plugins/plugin-antd) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd --dev\n```\n","packages/plugin-block-devtool/README.md":"# @umijs/plugin-block-devtool\n\n> @umijs/plugin-block-devtool.\n\nSee our website [@umijs/plugin-block-devtool](https://umijs.org/plugins/plugin-block-devtool) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-block-devtool\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-block-devtool --dev\n```\n","packages/plugin-block-devtool/docs/README.md":"# umi-plugin-block-dev\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev)\n\nA umi plugin for develop a umi block with umi\n\n## Layout\n\n### blankLayout\n\n![image](https://user-images.githubusercontent.com/8186664/59409733-83d23a80-8de9-11e9-9a0b-e41b8b4ce5a8.png)\n\n### ant-design-pro\n\n![image](https://user-images.githubusercontent.com/8186664/59409669-52f20580-8de9-11e9-8f4f-23ee873efe1b.png)\n\n### ant-design-pro-user\n\n![image](https://user-images.githubusercontent.com/8186664/59409597-1f16e000-8de9-11e9-8993-e68ec1b4da0e.png)\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: [['umi-plugin-block-dev', options]],\n};\n```\n\nAnd you can use `create-umi` to create a umi block automatically:\n\n```sh\n$ yarn create umi --block\n```\n\n## options\n\n```js\n{\n layout: 'ant-design-pro', // or ant-design-pro-user\n menu: {\n name: 'demo',\n icon: 'home',\n },\n mockUmiRequest: true // whether to build mock data . _mock.js\n}\n```\n\n### env\n\n- BLOCK_DEV_PATH: custom block preview path\n- BLOCK_DEV_MOCK_UMI_REQUEST: package mock data to build result, for build static preview site\n- BLOCK_PAGES_LAYOUT: custom block Layout\n\n## LICENSE\n\nMIT\n","packages/plugin-crossorigin/README.md":"# @umijs/plugin-crossorigin\n\n> @umijs/plugin-crossorigin.\n\nSee our website [@umijs/plugin-crossorigin](https://umijs.org/plugins/plugin-crossorigin) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-crossorigin\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-crossorigin --dev\n```\n","packages/plugin-dev-externals/README.md":"# @umijs/plugin-dev-externals\n\n> @umijs/plugin-dev-externals.\n\nSee our website [@umijs/plugin-dev-externals](https://umijs.org/plugins/plugin-dev-externals) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dev-externals\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dev-externals --dev\n```\n","packages/plugin-dva/README.md":"# @umijs/plugin-dva\n\n> @umijs/plugin-dva.\n\nSee our website [@umijs/plugin-dva](https://umijs.org/plugins/plugin-dva) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dva\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dva --dev\n```\n","packages/plugin-esbuild/README.md":"# @umijs/plugin-esbuild\n\n> @umijs/plugin-esbuild.\n\nSee our website [@umijs/plugin-esbuild](https://umijs.org/plugins/plugin-esbuild) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-esbuild\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-esbuild --dev\n```\n","packages/plugin-helmet/README.md":"# @umijs/plugin-helmet\n\n> @umijs/plugin-ssr-helmet.\n\nSee our website [@umijs/plugin-helmet](https://umijs.org/plugins/plugin-helmet) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-helmet\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-helmet --dev\n```\n","packages/plugin-initial-state/README.md":"# @umijs/plugin-initial-state\n\n> @umijs/plugin-initial-state.\n\nSee our website [@umijs/plugin-initial-state](https://umijs.org/plugins/plugin-initial-state) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-initial-state\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-initial-state --dev\n```\n","packages/plugin-layout/README.md":"# @umijs/plugin-layout\n\n> @umijs/plugin-layout.\n\nSee our website [@umijs/plugin-layout](https://umijs.org/plugins/plugin-layout) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-layout\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-layout --dev\n```\n","packages/plugin-locale/README.md":"# @umijs/plugin-locale\n\n> @umijs/plugin-locale.\n\nSee our website [@umijs/plugin-locale](https://umijs.org/plugins/plugin-locale) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-locale\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-locale --dev\n```\n","packages/plugin-locale/docs/README.en-US.md":"# @umijs/plugin-locale\n\n## Use\n\ninstallation\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\nConfigure in `umirc.js`, or `config/config.js|ts`\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\nConfiguration:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // Dynamically add new languages\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // refresh the list\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

Current language:{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n`@umijs/plugin-locale` is based on react-intl package and supports all its APIs. For details, see [here](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。For the convenience of use, we have also added some other functions. Here we will list all the APIs and show their functions.\n\n### addLocale\n\nAdd languages dynamically. After adding languages, you can get the list by `getAllLocales`. `addLocale` three parameters.\n\n- name The key of the language. E.g zh-TW\n- message A list of ids for the language. E.g:{ // id 列表 name: '妳好，{name}', }\n- extraLocales Corresponding `momentLocale` and `antd` configuration\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// Adding new languages dynamically\naddLocale(\n // name\n 'zh-TW',\n // message\n {\n // id 列表\n name: '妳好，{name}',\n },\n // extraLocales\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\nGet the current list of all internationalization files. By default, it looks for `en-US.(js|json|ts)` files in the locales folder.\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` will get the currently selected language.\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl is the most commonly used API, and it can obtain APIs such as formatMessage for specific value binding.\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\nSet the switching language. The page will be refreshed by default. You can dynamically switch by setting the second parameter to false.\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n## Extension antd internationalization\n\nSuch as a component library based on antd ant-c, can be extended antd internationalization by the following way:\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\nAfter enabling `locale: { antd: true }`, antd's [ConfigProvider](https://ant.design/components/config-provider/) will be the `antd` and `ant-c` internationalization。\n\n## FAQ\n\n### Why no use formatMessage?\n\nAlthough formatMessage is very convenient to use, it is out of the react life cycle. The most serious problem is that it cannot trigger dom re-rendering when switching languages. In order to solve this problem, we will refresh the browser when switching languages. The user experience is poor, so it is recommended that you use [`useIntl`](./#useIntl) or [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc), can achieve the same thing.\n","packages/plugin-locale/docs/README.md":"[English](README.en-US.md)\n\n# @umijs/plugin-locale\n\n## Use\n\n安装\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\n在 umirc.js，或 config/config.js 中配置\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\n配置:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // 动态增加新语言\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // 刷新列表\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

当前语言：{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n@umijs/plugin-locale 基于 react-intl 封装，支持其所有的 api，详情可以看[这里](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。为了方便使用我们也添加了一些其他的功能，这里将会列举所有的 api，并且展示它的功能。\n\n### addLocale\n\n动态的增加语言，增加语言之后可以通过 getAllLocales 获得列表。addLocale 三个参数。\n\n- name 语言的 key。例如 zh-TW\n- message 语言的 id 列表。 例如：{ // id 列表 name: '妳好，{name}', }\n- extraLocales 相应的 `momentLocale` 和 `antd` 配置\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// 动态增加新语言\naddLocale(\n 'zh-TW',\n {\n // id 列表\n name: '妳好，{name}',\n },\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\n获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 en-US.(js|json|ts) 文件。\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` 将获得当前选择的语言。\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl 是最常用的 api,它可以获得 formatMessage 等 api 来进行具体的值绑定。\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\n设置切换语言，默认会刷新页面，可以通过设置第二个参数为 false，来动态切换。\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n### \n\n选择语言的展示组件。可以通过开启 locale 插件，从 umi 中获取该组件。只有当项目依赖 antd, 同时项目 /locales 文件夹下有超过两个语言文件时才会显示。可配置的属性有：\n\n- postLocaleData, 默认包含 \"简体中文\" 、\"繁体中文\"、 \"英文\" 、\"葡萄牙语\"四种语言配置,当需要展示其他语言时，可以通过配置 postLocaleData 来扩展，格式如下所示。\n- globalIconClassName, 全球图标的样式。\n- onItemClick, 切换语言时的回掉函数，默认会 setLocale。\n- <[Dropdown/](https://ant.design/components/dropdown-cn/#API)> 的所有 API。\n\n```tsx\nimport { SelectLang } from 'umi';\n\n ([\n ...locales,\n {\n lang: 'nl-NL', // 语言的 key 与 antd & locales 下的文件名保持一致\n label: 'Nederlands', // 下拉菜单中展示的语言名\n icon: '🇳🇱', // 下拉菜单中展示的 icon （一般为国旗\n title: 'Taal', // 鼠标浮上全球图标时展示的文案（一般为“语言”这个词的各种翻译\n }\n ])}\n onItemClick={({ key }) => alert(key)}\n>\n```\n\n### 运行时配置\n\n支持运行时对国际化做一些扩展与定制，例如自定义语言识别等。\n\n#### getLocale\n\n自定义语言获取逻辑，比如识别链接 `?locale=${lang}` 当做当前页面的语言。\n\n```js\n// src/app.js\nimport qs from 'qs';\n\nexport const locale = {\n getLocale() {\n const { search } = window.location;\n const { locale = 'zh-CN' } = qs.parse(search, { ignoreQueryPrefix: true });\n return locale;\n },\n};\n```\n\n#### setLocale\n\n自定义语言切换逻辑。其中有三个参数：\n\n- lang: 需要切换的语言\n- realReload: 是否需要刷新页面，这个是由页面调用 `setLocale(lang, true)` 透传。\n- updater：是否触发组件 rerender 重渲染。\n\n```js\n// src/app.js\nexport const locale = {\n setLocale({ lang, realReload, updater }) {\n history.push(`/?locale=${lang}`);\n updater();\n },\n};\n```\n\n## 扩展 antd 国际化\n\n比如有一个基于 antd 的组件库 ant-c，可以通过以下方式扩展 antd 国际化：\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\n那么在开启 `locale: { antd: true }` 后，antd 的 [ConfigProvider](https://ant.design/components/config-provider-cn/) 就会有 `antd` 与 `ant-c` 的国际化了。\n\n## FAQ\n\n### 为什么不要使用 formatMessage 这个语法糖？\n\n虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 [`useIntl`](./#useIntl) 或者 [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc)，可以实现同样的功能。\n","packages/plugin-model/README.md":"# @umijs/plugin-model\n\n> @umijs/plugin-model.\n\nSee our website [@umijs/plugin-model](https://umijs.org/plugins/plugin-model) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-model\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-model --dev\n```\n","packages/plugin-openapi/README.md":"# @umijs/plugin-openapi\n\n> @umijs/plugin-openapi.\n\nSee our website [@umijs/plugin-openapi](https://umijs.org/plugins/plugin-openapi) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-openapi\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-openapi --dev\n```\n","packages/plugin-preact/README.md":"# @umijs/plugin-preact\n\n> @umijs/plugin-preact.\n\nSee our website [@umijs/plugin-preact](https://umijs.org/plugins/plugin-preact) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-preact\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-preact --dev\n```\n","packages/plugin-qiankun/README.md":"# @umijs/plugin-qiankun\n\n> umi plugin for [qiankun](https://qiankun.umijs.org/).\n\nSee our website [@umijs/plugin-qiankun](https://v3.umijs.org/plugins/plugin-qiankun) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-qiankun\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-qiankun --dev\n```\n","packages/plugin-request/README.md":"# @umijs/plugin-request\n\n> @umijs/plugin-request.\n\nSee our website [@umijs/plugin-request](https://umijs.org/plugins/plugin-request) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-request\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-request --dev\n```\n","packages/plugin-sass/README.md":"# @umijs/plugin-sass\n\n> @umijs/plugin-sass.\n\nSee our website [@umijs/plugin-sass](https://umijs.org/plugins/plugin-sass) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-sass\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-sass --dev\n```\n","packages/plugin-stylus/README.md":"# @umijs/plugin-stylus\n\n> @umijs/plugin-stylus.\n\nSee our website [@umijs/plugin-stylus](https://umijs.org/plugins/plugin-stylus) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-stylus\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-stylus --dev\n```\n","packages/plugin-test/README.md":"# @umijs/plugin-test\n\n> @umijs/plugin-test.\n\nSee our website [@umijs/plugin-test](https://umijs.org/plugins/plugin-test) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-test\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-test --dev\n```\n","packages/plugin-test/docs/README.md":"# @umijs/plugin-test\n\n## 启用方式\n\n默认开启。\n\n## 介绍\n\n基于 jest 提供 `umi test` 命令。\n\n包含以下特性，\n\n- 支持 lerna 包，可以针对子包测试和生成覆盖率\n- 支持 TypeScript\n- 内置以下补丁\n - core-js/stable\n - regenerator-runtime/runtime\n - whatwg-fetch\n- 支持通过 jest.config.json 和 package.json 中的 jest 属性进行配置，前者优先级更高\n- jest.config.json 中的配置项支持函数的形式\n\n## 使用\n\n```bash\n$ umi-test\n\n# watch mode\n$ umi-test -w\n$ umi-test --watch\n\n# collect coverage\n$ umi-test --coverage\n\n# print debug info\n$ umi-test --debug\n\n# test specified package for lerna package\n$ umi-test --package name\n\n# don't do e2e test\n$ umi-test --no-e2e\n```\n\n## 配置\n\n通过 jest.config.js 实现配置的目的，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper: {\n '^umi$': require.resolve('umi'),\n },\n};\n```\n\n但有时你会希望保留 umi-test 内置的配置，只做扩展，我们也函数的形式，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper(memo) {\n return {\n ...memo,\n '^umi$': require.resolve('umi'),\n };\n },\n};\n```\n","packages/preset-ant-design-pro/README.md":"# @umijs/preset-ant-design-pro\n\n> @umijs/preset-ant-design-pro.\n\nSee our website [@umijs/preset-ant-design-pro](https://umijs.org/plugins/preset-ant-design-pro) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-ant-design-pro\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-ant-design-pro --dev\n```\n","packages/preset-react/README.md":"# @umijs/preset-react\n\n> @umijs/preset-react.\n\nSee our website [@umijs/preset-react](https://umijs.org/plugins/preset-react) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-react\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-react --dev\n```\n","packages/preset-umi2-compatible/README.md":"# @umijs/preset-umi2-compatible\n\n> @umijs/preset-umi2-compatible.\n\nSee our website [@umijs/preset-umi2-compatible](https://umijs.org/plugins/preset-umi2-compatible) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-umi2-compatible\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-umi2-compatible --dev\n```\n"},"files":{"packages/plugin-access/README.md":"# @umijs/plugin-access\n\n> Umi plugin for access management..\n\nSee our website [@umijs/plugin-access](https://umijs.org/plugins/plugin-access) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-access\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-access --dev\n```\n","packages/plugin-analytics/README.md":"# @umijs/plugin-analytics\n\n> analytics for baidu tongji and google analytics.\n\nSee our website [@umijs/plugin-analytics](https://umijs.org/plugins/plugin-analytics) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-analytics\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-analytics --dev\n```\n","packages/plugin-ant-design-pro-block/README.md":"# @umijs/plugin-ant-design-pro-block\n\n> @umijs/plugin-ant-design-pro-block.\n\nSee our website [@umijs/plugin-ant-design-pro-block](https://umijs.org/plugins/plugin-ant-design-pro-block) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-ant-design-pro-block\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-ant-design-pro-block --dev\n```\n","packages/plugin-ant-design-pro-block/docs/README.md":"# @umijs/plugin-ant-design-pro-block\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-pro-block) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-ant-design-pro-block)\n\nA plugin for deliver umi block files like ant design pro structure.\n\nWhen you use `umi block demo` to download a block, if you did not use this plugin, you will get:\n\n```diff\n- src\n - mock\n - pages\n+ - demo\n+ - index.js\n+ - _mock.js\n+ - service.js\n```\n\nAnd if you use it, you will get:\n\n```diff\n- src\n - mock\n+ - demo.js\n - service.js\n+ - demo.js\n - pages\n+ - demo\n+ - index.js\n```\n\nAnt will replace `umi-request` to `util(s)/request.js` if it exist.\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: ['@umijs/plugin-blocks', '@umijs/plugin-ant-design-pro-block'],\n};\n```\n\n## Options\n\n```js\n{\n moveMock: false, // whether move _mock.js to mock, default to true\n moveService: false, // whether move service.js to src/services/, default to true\n modifyRequest: false, // whether modify umi-request to util(s)/request (if it exist), default to true\n autoAddMenu: false, // whether add name and icon config to route config when download a pro, default to true\n}\n```\n\n## LICENSE\n\nMIT\n","packages/plugin-antd-dayjs/README.md":"# @umijs/plugin-antd-dayjs\n\n用于在 umi 中代替 antd-dayjs-webpack-plugin.\n\n> @umijs/plugin-antd-dayjs\n\nSee our website [@umijs/plugin-antd-dayjs](https://umijs.org/plugins/plugin-antd-dayjs) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-dayjs\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-dayjs --dev\n```\n","packages/plugin-antd-mobile/README.md":"# @umijs/plugin-antd-mobile\n\n> @umijs/plugin-antd-mobile.\n\nSee our website [@umijs/plugin-antd-mobile](https://umijs.org/plugins/plugin-antd-mobile) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-mobile\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-mobile --dev\n```\n","packages/plugin-antd/README.md":"# @umijs/plugin-antd\n\n> @umijs/plugin-antd.\n\nSee our website [@umijs/plugin-antd](https://umijs.org/plugins/plugin-antd) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd --dev\n```\n","packages/plugin-block-devtool/README.md":"# @umijs/plugin-block-devtool\n\n> @umijs/plugin-block-devtool.\n\nSee our website [@umijs/plugin-block-devtool](https://umijs.org/plugins/plugin-block-devtool) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-block-devtool\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-block-devtool --dev\n```\n","packages/plugin-block-devtool/docs/README.md":"# umi-plugin-block-dev\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev)\n\nA umi plugin for develop a umi block with umi\n\n## Layout\n\n### blankLayout\n\n![image](https://user-images.githubusercontent.com/8186664/59409733-83d23a80-8de9-11e9-9a0b-e41b8b4ce5a8.png)\n\n### ant-design-pro\n\n![image](https://user-images.githubusercontent.com/8186664/59409669-52f20580-8de9-11e9-8f4f-23ee873efe1b.png)\n\n### ant-design-pro-user\n\n![image](https://user-images.githubusercontent.com/8186664/59409597-1f16e000-8de9-11e9-8993-e68ec1b4da0e.png)\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: [['umi-plugin-block-dev', options]],\n};\n```\n\nAnd you can use `create-umi` to create a umi block automatically:\n\n```sh\n$ yarn create umi --block\n```\n\n## options\n\n```js\n{\n layout: 'ant-design-pro', // or ant-design-pro-user\n menu: {\n name: 'demo',\n icon: 'home',\n },\n mockUmiRequest: true // whether to build mock data . _mock.js\n}\n```\n\n### env\n\n- BLOCK_DEV_PATH: custom block preview path\n- BLOCK_DEV_MOCK_UMI_REQUEST: package mock data to build result, for build static preview site\n- BLOCK_PAGES_LAYOUT: custom block Layout\n\n## LICENSE\n\nMIT\n","packages/plugin-crossorigin/README.md":"# @umijs/plugin-crossorigin\n\n> @umijs/plugin-crossorigin.\n\nSee our website [@umijs/plugin-crossorigin](https://umijs.org/plugins/plugin-crossorigin) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-crossorigin\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-crossorigin --dev\n```\n","packages/plugin-dev-externals/README.md":"# @umijs/plugin-dev-externals\n\n> @umijs/plugin-dev-externals.\n\nSee our website [@umijs/plugin-dev-externals](https://umijs.org/plugins/plugin-dev-externals) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dev-externals\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dev-externals --dev\n```\n","packages/plugin-dva/README.md":"# @umijs/plugin-dva\n\n> @umijs/plugin-dva.\n\nSee our website [@umijs/plugin-dva](https://umijs.org/plugins/plugin-dva) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dva\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dva --dev\n```\n","packages/plugin-esbuild/README.md":"# @umijs/plugin-esbuild\n\n> @umijs/plugin-esbuild.\n\nSee our website [@umijs/plugin-esbuild](https://umijs.org/plugins/plugin-esbuild) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-esbuild\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-esbuild --dev\n```\n","packages/plugin-helmet/README.md":"# @umijs/plugin-helmet\n\n> @umijs/plugin-ssr-helmet.\n\nSee our website [@umijs/plugin-helmet](https://umijs.org/plugins/plugin-helmet) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-helmet\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-helmet --dev\n```\n","packages/plugin-initial-state/README.md":"# @umijs/plugin-initial-state\n\n> @umijs/plugin-initial-state.\n\nSee our website [@umijs/plugin-initial-state](https://umijs.org/plugins/plugin-initial-state) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-initial-state\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-initial-state --dev\n```\n","packages/plugin-layout/README.md":"# @umijs/plugin-layout\n\n> @umijs/plugin-layout.\n\nSee our website [@umijs/plugin-layout](https://umijs.org/plugins/plugin-layout) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-layout\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-layout --dev\n```\n","packages/plugin-locale/README.md":"# @umijs/plugin-locale\n\n> @umijs/plugin-locale.\n\nSee our website [@umijs/plugin-locale](https://umijs.org/plugins/plugin-locale) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-locale\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-locale --dev\n```\n","packages/plugin-locale/docs/README.en-US.md":"# @umijs/plugin-locale\n\n## Use\n\ninstallation\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\nConfigure in `umirc.js`, or `config/config.js|ts`\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\nConfiguration:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // Dynamically add new languages\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // refresh the list\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

Current language:{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n`@umijs/plugin-locale` is based on react-intl package and supports all its APIs. For details, see [here](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。For the convenience of use, we have also added some other functions. Here we will list all the APIs and show their functions.\n\n### addLocale\n\nAdd languages dynamically. After adding languages, you can get the list by `getAllLocales`. `addLocale` three parameters.\n\n- name The key of the language. E.g zh-TW\n- message A list of ids for the language. E.g:{ // id 列表 name: '妳好，{name}', }\n- extraLocales Corresponding `momentLocale` and `antd` configuration\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// Adding new languages dynamically\naddLocale(\n // name\n 'zh-TW',\n // message\n {\n // id 列表\n name: '妳好，{name}',\n },\n // extraLocales\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\nGet the current list of all internationalization files. By default, it looks for `en-US.(js|json|ts)` files in the locales folder.\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` will get the currently selected language.\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl is the most commonly used API, and it can obtain APIs such as formatMessage for specific value binding.\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\nSet the switching language. The page will be refreshed by default. You can dynamically switch by setting the second parameter to false.\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n## Extension antd internationalization\n\nSuch as a component library based on antd ant-c, can be extended antd internationalization by the following way:\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\nAfter enabling `locale: { antd: true }`, antd's [ConfigProvider](https://ant.design/components/config-provider/) will be the `antd` and `ant-c` internationalization。\n\n## FAQ\n\n### Why no use formatMessage?\n\nAlthough formatMessage is very convenient to use, it is out of the react life cycle. The most serious problem is that it cannot trigger dom re-rendering when switching languages. In order to solve this problem, we will refresh the browser when switching languages. The user experience is poor, so it is recommended that you use [`useIntl`](./#useIntl) or [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc), can achieve the same thing.\n","packages/plugin-locale/docs/README.md":"[English](README.en-US.md)\n\n# @umijs/plugin-locale\n\n## Use\n\n安装\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\n在 umirc.js，或 config/config.js 中配置\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\n配置:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // 动态增加新语言\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // 刷新列表\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

当前语言：{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n@umijs/plugin-locale 基于 react-intl 封装，支持其所有的 api，详情可以看[这里](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。为了方便使用我们也添加了一些其他的功能，这里将会列举所有的 api，并且展示它的功能。\n\n### addLocale\n\n动态的增加语言，增加语言之后可以通过 getAllLocales 获得列表。addLocale 三个参数。\n\n- name 语言的 key。例如 zh-TW\n- message 语言的 id 列表。 例如：{ // id 列表 name: '妳好，{name}', }\n- extraLocales 相应的 `momentLocale` 和 `antd` 配置\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// 动态增加新语言\naddLocale(\n 'zh-TW',\n {\n // id 列表\n name: '妳好，{name}',\n },\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\n获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 en-US.(js|json|ts) 文件。\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` 将获得当前选择的语言。\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl 是最常用的 api,它可以获得 formatMessage 等 api 来进行具体的值绑定。\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\n设置切换语言，默认会刷新页面，可以通过设置第二个参数为 false，来动态切换。\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n### \n\n选择语言的展示组件。可以通过开启 locale 插件，从 umi 中获取该组件。只有当项目依赖 antd, 同时项目 /locales 文件夹下有超过两个语言文件时才会显示。可配置的属性有：\n\n- postLocaleData, 默认包含 \"简体中文\" 、\"繁体中文\"、 \"英文\" 、\"葡萄牙语\"四种语言配置,当需要展示其他语言时，可以通过配置 postLocaleData 来扩展，格式如下所示。\n- globalIconClassName, 全球图标的样式。\n- onItemClick, 切换语言时的回掉函数，默认会 setLocale。\n- <[Dropdown/](https://ant.design/components/dropdown-cn/#API)> 的所有 API。\n\n```tsx\nimport { SelectLang } from 'umi';\n\n ([\n ...locales,\n {\n lang: 'nl-NL', // 语言的 key 与 antd & locales 下的文件名保持一致\n label: 'Nederlands', // 下拉菜单中展示的语言名\n icon: '🇳🇱', // 下拉菜单中展示的 icon （一般为国旗\n title: 'Taal', // 鼠标浮上全球图标时展示的文案（一般为“语言”这个词的各种翻译\n }\n ])}\n onItemClick={({ key }) => alert(key)}\n>\n```\n\n### 运行时配置\n\n支持运行时对国际化做一些扩展与定制，例如自定义语言识别等。\n\n#### getLocale\n\n自定义语言获取逻辑，比如识别链接 `?locale=${lang}` 当做当前页面的语言。\n\n```js\n// src/app.js\nimport qs from 'qs';\n\nexport const locale = {\n getLocale() {\n const { search } = window.location;\n const { locale = 'zh-CN' } = qs.parse(search, { ignoreQueryPrefix: true });\n return locale;\n },\n};\n```\n\n#### setLocale\n\n自定义语言切换逻辑。其中有三个参数：\n\n- lang: 需要切换的语言\n- realReload: 是否需要刷新页面，这个是由页面调用 `setLocale(lang, true)` 透传。\n- updater：是否触发组件 rerender 重渲染。\n\n```js\n// src/app.js\nexport const locale = {\n setLocale({ lang, realReload, updater }) {\n history.push(`/?locale=${lang}`);\n updater();\n },\n};\n```\n\n## 扩展 antd 国际化\n\n比如有一个基于 antd 的组件库 ant-c，可以通过以下方式扩展 antd 国际化：\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\n那么在开启 `locale: { antd: true }` 后，antd 的 [ConfigProvider](https://ant.design/components/config-provider-cn/) 就会有 `antd` 与 `ant-c` 的国际化了。\n\n## FAQ\n\n### 为什么不要使用 formatMessage 这个语法糖？\n\n虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 [`useIntl`](./#useIntl) 或者 [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc)，可以实现同样的功能。\n","packages/plugin-model/README.md":"# @umijs/plugin-model\n\n> @umijs/plugin-model.\n\nSee our website [@umijs/plugin-model](https://umijs.org/plugins/plugin-model) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-model\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-model --dev\n```\n","packages/plugin-openapi/README.md":"# @umijs/plugin-openapi\n\n> @umijs/plugin-openapi.\n\nSee our website [@umijs/plugin-openapi](https://umijs.org/plugins/plugin-openapi) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-openapi\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-openapi --dev\n```\n","packages/plugin-preact/README.md":"# @umijs/plugin-preact\n\n> @umijs/plugin-preact.\n\nSee our website [@umijs/plugin-preact](https://umijs.org/plugins/plugin-preact) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-preact\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-preact --dev\n```\n","packages/plugin-qiankun/README.md":"# @umijs/plugin-qiankun\n\n> umi plugin for [qiankun](https://qiankun.umijs.org/).\n\nSee our website [@umijs/plugin-qiankun](https://v3.umijs.org/plugins/plugin-qiankun) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-qiankun\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-qiankun --dev\n```\n","packages/plugin-request/README.md":"# @umijs/plugin-request\n\n> @umijs/plugin-request.\n\nSee our website [@umijs/plugin-request](https://umijs.org/plugins/plugin-request) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-request\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-request --dev\n```\n","packages/plugin-sass/README.md":"# @umijs/plugin-sass\n\n> @umijs/plugin-sass.\n\nSee our website [@umijs/plugin-sass](https://umijs.org/plugins/plugin-sass) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-sass\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-sass --dev\n```\n","packages/plugin-stylus/README.md":"# @umijs/plugin-stylus\n\n> @umijs/plugin-stylus.\n\nSee our website [@umijs/plugin-stylus](https://umijs.org/plugins/plugin-stylus) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-stylus\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-stylus --dev\n```\n","packages/plugin-test/README.md":"# @umijs/plugin-test\n\n> @umijs/plugin-test.\n\nSee our website [@umijs/plugin-test](https://umijs.org/plugins/plugin-test) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-test\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-test --dev\n```\n","packages/plugin-test/docs/README.md":"# @umijs/plugin-test\n\n## 启用方式\n\n默认开启。\n\n## 介绍\n\n基于 jest 提供 `umi test` 命令。\n\n包含以下特性，\n\n- 支持 lerna 包，可以针对子包测试和生成覆盖率\n- 支持 TypeScript\n- 内置以下补丁\n - core-js/stable\n - regenerator-runtime/runtime\n - whatwg-fetch\n- 支持通过 jest.config.json 和 package.json 中的 jest 属性进行配置，前者优先级更高\n- jest.config.json 中的配置项支持函数的形式\n\n## 使用\n\n```bash\n$ umi-test\n\n# watch mode\n$ umi-test -w\n$ umi-test --watch\n\n# collect coverage\n$ umi-test --coverage\n\n# print debug info\n$ umi-test --debug\n\n# test specified package for lerna package\n$ umi-test --package name\n\n# don't do e2e test\n$ umi-test --no-e2e\n```\n\n## 配置\n\n通过 jest.config.js 实现配置的目的，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper: {\n '^umi$': require.resolve('umi'),\n },\n};\n```\n\n但有时你会希望保留 umi-test 内置的配置，只做扩展，我们也函数的形式，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper(memo) {\n return {\n ...memo,\n '^umi$': require.resolve('umi'),\n };\n },\n};\n```\n","packages/preset-ant-design-pro/README.md":"# @umijs/preset-ant-design-pro\n\n> @umijs/preset-ant-design-pro.\n\nSee our website [@umijs/preset-ant-design-pro](https://umijs.org/plugins/preset-ant-design-pro) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-ant-design-pro\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-ant-design-pro --dev\n```\n","packages/preset-react/README.md":"# @umijs/preset-react\n\n> @umijs/preset-react.\n\nSee our website [@umijs/preset-react](https://umijs.org/plugins/preset-react) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-react\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-react --dev\n```\n","packages/preset-umi2-compatible/README.md":"# @umijs/preset-umi2-compatible\n\n> @umijs/preset-umi2-compatible.\n\nSee our website [@umijs/preset-umi2-compatible](https://umijs.org/plugins/preset-umi2-compatible) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-umi2-compatible\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-umi2-compatible --dev\n```\n"},"items":[{"name":"README.en-US.md","path":"packages/plugin-locale/docs/README.en-US.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-locale/docs/README.en-US.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"# @umijs/plugin-locale\n\n## Use\n\ninstallation\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\nConfigure in `umirc.js`, or `config/config.js|ts`\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\nConfiguration:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // Dynamically add new languages\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // refresh the list\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

Current language:{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n`@umijs/plugin-locale` is based on react-intl package and supports all its APIs. For details, see [here](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。For the convenience of use, we have also added some other functions. Here we will list all the APIs and show their functions.\n\n### addLocale\n\nAdd languages dynamically. After adding languages, you can get the list by `getAllLocales`. `addLocale` three parameters.\n\n- name The key of the language. E.g zh-TW\n- message A list of ids for the language. E.g:{ // id 列表 name: '妳好，{name}', }\n- extraLocales Corresponding `momentLocale` and `antd` configuration\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// Adding new languages dynamically\naddLocale(\n // name\n 'zh-TW',\n // message\n {\n // id 列表\n name: '妳好，{name}',\n },\n // extraLocales\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\nGet the current list of all internationalization files. By default, it looks for `en-US.(js|json|ts)` files in the locales folder.\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` will get the currently selected language.\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl is the most commonly used API, and it can obtain APIs such as formatMessage for specific value binding.\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\nSet the switching language. The page will be refreshed by default. You can dynamically switch by setting the second parameter to false.\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n## Extension antd internationalization\n\nSuch as a component library based on antd ant-c, can be extended antd internationalization by the following way:\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\nAfter enabling `locale: { antd: true }`, antd's [ConfigProvider](https://ant.design/components/config-provider/) will be the `antd` and `ant-c` internationalization。\n\n## FAQ\n\n### Why no use formatMessage?\n\nAlthough formatMessage is very convenient to use, it is out of the react life cycle. The most serious problem is that it cannot trigger dom re-rendering when switching languages. In order to solve this problem, we will refresh the browser when switching languages. The user experience is poor, so it is recommended that you use [`useIntl`](./#useIntl) or [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc), can achieve the same thing.\n","isInternal":false,"tokens":1240,"sizeBytes":4827},{"name":"README.md","path":"packages/plugin-access/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-access/README.md","title":"plugin-access Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-access\n\n> Umi plugin for access management..\n\nSee our website [@umijs/plugin-access](https://umijs.org/plugins/plugin-access) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-access\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-access --dev\n```\n","isInternal":false,"tokens":80,"sizeBytes":314},{"name":"README.md","path":"packages/plugin-analytics/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-analytics/README.md","title":"plugin-analytics Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-analytics\n\n> analytics for baidu tongji and google analytics.\n\nSee our website [@umijs/plugin-analytics](https://umijs.org/plugins/plugin-analytics) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-analytics\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-analytics --dev\n```\n","isInternal":false,"tokens":83,"sizeBytes":343},{"name":"README.md","path":"packages/plugin-ant-design-pro-block/docs/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-ant-design-pro-block/docs/README.md","title":"docs Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-ant-design-pro-block\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-pro-block) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-ant-design-pro-block)\n\nA plugin for deliver umi block files like ant design pro structure.\n\nWhen you use `umi block demo` to download a block, if you did not use this plugin, you will get:\n\n```diff\n- src\n - mock\n - pages\n+ - demo\n+ - index.js\n+ - _mock.js\n+ - service.js\n```\n\nAnd if you use it, you will get:\n\n```diff\n- src\n - mock\n+ - demo.js\n - service.js\n+ - demo.js\n - pages\n+ - demo\n+ - index.js\n```\n\nAnt will replace `umi-request` to `util(s)/request.js` if it exist.\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: ['@umijs/plugin-blocks', '@umijs/plugin-ant-design-pro-block'],\n};\n```\n\n## Options\n\n```js\n{\n moveMock: false, // whether move _mock.js to mock, default to true\n moveService: false, // whether move service.js to src/services/, default to true\n modifyRequest: false, // whether modify umi-request to util(s)/request (if it exist), default to true\n autoAddMenu: false, // whether add name and icon config to route config when download a pro, default to true\n}\n```\n\n## LICENSE\n\nMIT\n","isInternal":false,"tokens":395,"sizeBytes":1370},{"name":"README.md","path":"packages/plugin-ant-design-pro-block/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-ant-design-pro-block/README.md","title":"plugin-ant-design-pro-block Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-ant-design-pro-block\n\n> @umijs/plugin-ant-design-pro-block.\n\nSee our website [@umijs/plugin-ant-design-pro-block](https://umijs.org/plugins/plugin-ant-design-pro-block) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-ant-design-pro-block\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-ant-design-pro-block --dev\n```\n","isInternal":false,"tokens":103,"sizeBytes":385},{"name":"README.md","path":"packages/plugin-antd-dayjs/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-antd-dayjs/README.md","title":"plugin-antd-dayjs Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-antd-dayjs\n\n用于在 umi 中代替 antd-dayjs-webpack-plugin.\n\n> @umijs/plugin-antd-dayjs\n\nSee our website [@umijs/plugin-antd-dayjs](https://umijs.org/plugins/plugin-antd-dayjs) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-dayjs\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-dayjs --dev\n```\n","isInternal":false,"tokens":113,"sizeBytes":376},{"name":"README.md","path":"packages/plugin-antd-mobile/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-antd-mobile/README.md","title":"plugin-antd-mobile Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-antd-mobile\n\n> @umijs/plugin-antd-mobile.\n\nSee our website [@umijs/plugin-antd-mobile](https://umijs.org/plugins/plugin-antd-mobile) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-mobile\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-mobile --dev\n```\n","isInternal":false,"tokens":91,"sizeBytes":331},{"name":"README.md","path":"packages/plugin-antd/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-antd/README.md","title":"plugin-antd Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-antd\n\n> @umijs/plugin-antd.\n\nSee our website [@umijs/plugin-antd](https://umijs.org/plugins/plugin-antd) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":289},{"name":"README.md","path":"packages/plugin-block-devtool/docs/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-block-devtool/docs/README.md","title":"docs Documentation","category":"plugin-manifest","format":"markdown","content":"# umi-plugin-block-dev\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev)\n\nA umi plugin for develop a umi block with umi\n\n## Layout\n\n### blankLayout\n\n![image](https://user-images.githubusercontent.com/8186664/59409733-83d23a80-8de9-11e9-9a0b-e41b8b4ce5a8.png)\n\n### ant-design-pro\n\n![image](https://user-images.githubusercontent.com/8186664/59409669-52f20580-8de9-11e9-8f4f-23ee873efe1b.png)\n\n### ant-design-pro-user\n\n![image](https://user-images.githubusercontent.com/8186664/59409597-1f16e000-8de9-11e9-8993-e68ec1b4da0e.png)\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: [['umi-plugin-block-dev', options]],\n};\n```\n\nAnd you can use `create-umi` to create a umi block automatically:\n\n```sh\n$ yarn create umi --block\n```\n\n## options\n\n```js\n{\n layout: 'ant-design-pro', // or ant-design-pro-user\n menu: {\n name: 'demo',\n icon: 'home',\n },\n mockUmiRequest: true // whether to build mock data . _mock.js\n}\n```\n\n### env\n\n- BLOCK_DEV_PATH: custom block preview path\n- BLOCK_DEV_MOCK_UMI_REQUEST: package mock data to build result, for build static preview site\n- BLOCK_PAGES_LAYOUT: custom block Layout\n\n## LICENSE\n\nMIT\n","isInternal":false,"tokens":425,"sizeBytes":1365},{"name":"README.md","path":"packages/plugin-block-devtool/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-block-devtool/README.md","title":"plugin-block-devtool Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-block-devtool\n\n> @umijs/plugin-block-devtool.\n\nSee our website [@umijs/plugin-block-devtool](https://umijs.org/plugins/plugin-block-devtool) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-block-devtool\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-block-devtool --dev\n```\n","isInternal":false,"tokens":91,"sizeBytes":343},{"name":"README.md","path":"packages/plugin-crossorigin/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-crossorigin/README.md","title":"plugin-crossorigin Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-crossorigin\n\n> @umijs/plugin-crossorigin.\n\nSee our website [@umijs/plugin-crossorigin](https://umijs.org/plugins/plugin-crossorigin) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-crossorigin\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-crossorigin --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":331},{"name":"README.md","path":"packages/plugin-dev-externals/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-dev-externals/README.md","title":"plugin-dev-externals Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-dev-externals\n\n> @umijs/plugin-dev-externals.\n\nSee our website [@umijs/plugin-dev-externals](https://umijs.org/plugins/plugin-dev-externals) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dev-externals\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dev-externals --dev\n```\n","isInternal":false,"tokens":97,"sizeBytes":343},{"name":"README.md","path":"packages/plugin-dva/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-dva/README.md","title":"plugin-dva Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-dva\n\n> @umijs/plugin-dva.\n\nSee our website [@umijs/plugin-dva](https://umijs.org/plugins/plugin-dva) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dva\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dva --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":283},{"name":"README.md","path":"packages/plugin-esbuild/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-esbuild/README.md","title":"plugin-esbuild Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-esbuild\n\n> @umijs/plugin-esbuild.\n\nSee our website [@umijs/plugin-esbuild](https://umijs.org/plugins/plugin-esbuild) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-esbuild\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-esbuild --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":307},{"name":"README.md","path":"packages/plugin-helmet/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-helmet/README.md","title":"plugin-helmet Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-helmet\n\n> @umijs/plugin-ssr-helmet.\n\nSee our website [@umijs/plugin-helmet](https://umijs.org/plugins/plugin-helmet) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-helmet\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-helmet --dev\n```\n","isInternal":false,"tokens":88,"sizeBytes":305},{"name":"README.md","path":"packages/plugin-initial-state/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-initial-state/README.md","title":"plugin-initial-state Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-initial-state\n\n> @umijs/plugin-initial-state.\n\nSee our website [@umijs/plugin-initial-state](https://umijs.org/plugins/plugin-initial-state) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-initial-state\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-initial-state --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":343},{"name":"README.md","path":"packages/plugin-layout/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-layout/README.md","title":"plugin-layout Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-layout\n\n> @umijs/plugin-layout.\n\nSee our website [@umijs/plugin-layout](https://umijs.org/plugins/plugin-layout) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-layout\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-layout --dev\n```\n","isInternal":false,"tokens":79,"sizeBytes":301},{"name":"README.md","path":"packages/plugin-locale/docs/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-locale/docs/README.md","title":"docs Documentation","category":"plugin-manifest","format":"markdown","content":"[English](README.en-US.md)\n\n# @umijs/plugin-locale\n\n## Use\n\n安装\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\n在 umirc.js，或 config/config.js 中配置\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\n配置:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // 动态增加新语言\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // 刷新列表\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

当前语言：{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n@umijs/plugin-locale 基于 react-intl 封装，支持其所有的 api，详情可以看[这里](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。为了方便使用我们也添加了一些其他的功能，这里将会列举所有的 api，并且展示它的功能。\n\n### addLocale\n\n动态的增加语言，增加语言之后可以通过 getAllLocales 获得列表。addLocale 三个参数。\n\n- name 语言的 key。例如 zh-TW\n- message 语言的 id 列表。 例如：{ // id 列表 name: '妳好，{name}', }\n- extraLocales 相应的 `momentLocale` 和 `antd` 配置\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// 动态增加新语言\naddLocale(\n 'zh-TW',\n {\n // id 列表\n name: '妳好，{name}',\n },\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\n获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 en-US.(js|json|ts) 文件。\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` 将获得当前选择的语言。\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl 是最常用的 api,它可以获得 formatMessage 等 api 来进行具体的值绑定。\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\n设置切换语言，默认会刷新页面，可以通过设置第二个参数为 false，来动态切换。\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n### \n\n选择语言的展示组件。可以通过开启 locale 插件，从 umi 中获取该组件。只有当项目依赖 antd, 同时项目 /locales 文件夹下有超过两个语言文件时才会显示。可配置的属性有：\n\n- postLocaleData, 默认包含 \"简体中文\" 、\"繁体中文\"、 \"英文\" 、\"葡萄牙语\"四种语言配置,当需要展示其他语言时，可以通过配置 postLocaleData 来扩展，格式如下所示。\n- globalIconClassName, 全球图标的样式。\n- onItemClick, 切换语言时的回掉函数，默认会 setLocale。\n- <[Dropdown/](https://ant.design/components/dropdown-cn/#API)> 的所有 API。\n\n```tsx\nimport { SelectLang } from 'umi';\n\n ([\n ...locales,\n {\n lang: 'nl-NL', // 语言的 key 与 antd & locales 下的文件名保持一致\n label: 'Nederlands', // 下拉菜单中展示的语言名\n icon: '🇳🇱', // 下拉菜单中展示的 icon （一般为国旗\n title: 'Taal', // 鼠标浮上全球图标时展示的文案（一般为“语言”这个词的各种翻译\n }\n ])}\n onItemClick={({ key }) => alert(key)}\n>\n```\n\n### 运行时配置\n\n支持运行时对国际化做一些扩展与定制，例如自定义语言识别等。\n\n#### getLocale\n\n自定义语言获取逻辑，比如识别链接 `?locale=${lang}` 当做当前页面的语言。\n\n```js\n// src/app.js\nimport qs from 'qs';\n\nexport const locale = {\n getLocale() {\n const { search } = window.location;\n const { locale = 'zh-CN' } = qs.parse(search, { ignoreQueryPrefix: true });\n return locale;\n },\n};\n```\n\n#### setLocale\n\n自定义语言切换逻辑。其中有三个参数：\n\n- lang: 需要切换的语言\n- realReload: 是否需要刷新页面，这个是由页面调用 `setLocale(lang, true)` 透传。\n- updater：是否触发组件 rerender 重渲染。\n\n```js\n// src/app.js\nexport const locale = {\n setLocale({ lang, realReload, updater }) {\n history.push(`/?locale=${lang}`);\n updater();\n },\n};\n```\n\n## 扩展 antd 国际化\n\n比如有一个基于 antd 的组件库 ant-c，可以通过以下方式扩展 antd 国际化：\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\n那么在开启 `locale: { antd: true }` 后，antd 的 [ConfigProvider](https://ant.design/components/config-provider-cn/) 就会有 `antd` 与 `ant-c` 的国际化了。\n\n## FAQ\n\n### 为什么不要使用 formatMessage 这个语法糖？\n\n虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 [`useIntl`](./#useIntl) 或者 [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc)，可以实现同样的功能。\n","isInternal":false,"tokens":2004,"sizeBytes":6679},{"name":"README.md","path":"packages/plugin-locale/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-locale/README.md","title":"plugin-locale Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-locale\n\n> @umijs/plugin-locale.\n\nSee our website [@umijs/plugin-locale](https://umijs.org/plugins/plugin-locale) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-locale\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-locale --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":301},{"name":"README.md","path":"packages/plugin-model/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-model/README.md","title":"plugin-model Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-model\n\n> @umijs/plugin-model.\n\nSee our website [@umijs/plugin-model](https://umijs.org/plugins/plugin-model) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-model\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-model --dev\n```\n","isInternal":false,"tokens":79,"sizeBytes":295},{"name":"README.md","path":"packages/plugin-openapi/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-openapi/README.md","title":"plugin-openapi Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-openapi\n\n> @umijs/plugin-openapi.\n\nSee our website [@umijs/plugin-openapi](https://umijs.org/plugins/plugin-openapi) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-openapi\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-openapi --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":307},{"name":"README.md","path":"packages/plugin-preact/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-preact/README.md","title":"plugin-preact Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-preact\n\n> @umijs/plugin-preact.\n\nSee our website [@umijs/plugin-preact](https://umijs.org/plugins/plugin-preact) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-preact\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-preact --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":301},{"name":"README.md","path":"packages/plugin-qiankun/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-qiankun/README.md","title":"plugin-qiankun Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-qiankun\n\n> umi plugin for [qiankun](https://qiankun.umijs.org/).\n\nSee our website [@umijs/plugin-qiankun](https://v3.umijs.org/plugins/plugin-qiankun) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-qiankun\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-qiankun --dev\n```\n","isInternal":false,"tokens":113,"sizeBytes":341},{"name":"README.md","path":"packages/plugin-request/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-request/README.md","title":"plugin-request Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-request\n\n> @umijs/plugin-request.\n\nSee our website [@umijs/plugin-request](https://umijs.org/plugins/plugin-request) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-request\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-request --dev\n```\n","isInternal":false,"tokens":79,"sizeBytes":307},{"name":"README.md","path":"packages/plugin-sass/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-sass/README.md","title":"plugin-sass Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-sass\n\n> @umijs/plugin-sass.\n\nSee our website [@umijs/plugin-sass](https://umijs.org/plugins/plugin-sass) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-sass\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-sass --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":289},{"name":"README.md","path":"packages/plugin-stylus/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-stylus/README.md","title":"plugin-stylus Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-stylus\n\n> @umijs/plugin-stylus.\n\nSee our website [@umijs/plugin-stylus](https://umijs.org/plugins/plugin-stylus) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-stylus\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-stylus --dev\n```\n","isInternal":false,"tokens":91,"sizeBytes":301},{"name":"README.md","path":"packages/plugin-test/docs/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-test/docs/README.md","title":"docs Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-test\n\n## 启用方式\n\n默认开启。\n\n## 介绍\n\n基于 jest 提供 `umi test` 命令。\n\n包含以下特性，\n\n- 支持 lerna 包，可以针对子包测试和生成覆盖率\n- 支持 TypeScript\n- 内置以下补丁\n - core-js/stable\n - regenerator-runtime/runtime\n - whatwg-fetch\n- 支持通过 jest.config.json 和 package.json 中的 jest 属性进行配置，前者优先级更高\n- jest.config.json 中的配置项支持函数的形式\n\n## 使用\n\n```bash\n$ umi-test\n\n# watch mode\n$ umi-test -w\n$ umi-test --watch\n\n# collect coverage\n$ umi-test --coverage\n\n# print debug info\n$ umi-test --debug\n\n# test specified package for lerna package\n$ umi-test --package name\n\n# don't do e2e test\n$ umi-test --no-e2e\n```\n\n## 配置\n\n通过 jest.config.js 实现配置的目的，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper: {\n '^umi$': require.resolve('umi'),\n },\n};\n```\n\n但有时你会希望保留 umi-test 内置的配置，只做扩展，我们也函数的形式，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper(memo) {\n return {\n ...memo,\n '^umi$': require.resolve('umi'),\n };\n },\n};\n```\n","isInternal":false,"tokens":358,"sizeBytes":1150},{"name":"README.md","path":"packages/plugin-test/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/plugin-test/README.md","title":"plugin-test Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/plugin-test\n\n> @umijs/plugin-test.\n\nSee our website [@umijs/plugin-test](https://umijs.org/plugins/plugin-test) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-test\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-test --dev\n```\n","isInternal":false,"tokens":79,"sizeBytes":289},{"name":"README.md","path":"packages/preset-ant-design-pro/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/preset-ant-design-pro/README.md","title":"preset-ant-design-pro Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/preset-ant-design-pro\n\n> @umijs/preset-ant-design-pro.\n\nSee our website [@umijs/preset-ant-design-pro](https://umijs.org/plugins/preset-ant-design-pro) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-ant-design-pro\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-ant-design-pro --dev\n```\n","isInternal":false,"tokens":103,"sizeBytes":349},{"name":"README.md","path":"packages/preset-react/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/preset-react/README.md","title":"preset-react Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/preset-react\n\n> @umijs/preset-react.\n\nSee our website [@umijs/preset-react](https://umijs.org/plugins/preset-react) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-react\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-react --dev\n```\n","isInternal":false,"tokens":85,"sizeBytes":295},{"name":"README.md","path":"packages/preset-umi2-compatible/README.md","rawUrl":"https://raw.githubusercontent.com/umijs/plugins/HEAD/packages/preset-umi2-compatible/README.md","title":"preset-umi2-compatible Documentation","category":"plugin-manifest","format":"markdown","content":"# @umijs/preset-umi2-compatible\n\n> @umijs/preset-umi2-compatible.\n\nSee our website [@umijs/preset-umi2-compatible](https://umijs.org/plugins/preset-umi2-compatible) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-umi2-compatible\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-umi2-compatible --dev\n```\n","isInternal":false,"tokens":103,"sizeBytes":355}],"systemPromptSnippet":"\n\n# @umijs/plugin-locale\n\n## Use\n\ninstallation\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\nConfigure in `umirc.js`, or `config/config.js|ts`\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\nConfiguration:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // Dynamically add new languages\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // refresh the list\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

Current language:{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n`@umijs/plugin-locale` is based on react-intl package and supports all its APIs. For details, see [here](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。For the convenience of use, we have also added some other functions. Here we will list all the APIs and show their functions.\n\n### addLocale\n\nAdd languages dynamically. After adding languages, you can get the list by `getAllLocales`. `addLocale` three parameters.\n\n- name The key of the language. E.g zh-TW\n- message A list of ids for the language. E.g:{ // id 列表 name: '妳好，{name}', }\n- extraLocales Corresponding `momentLocale` and `antd` configuration\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// Adding new languages dynamically\naddLocale(\n // name\n 'zh-TW',\n // message\n {\n // id 列表\n name: '妳好，{name}',\n },\n // extraLocales\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\nGet the current list of all internationalization files. By default, it looks for `en-US.(js|json|ts)` files in the locales folder.\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` will get the currently selected language.\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl is the most commonly used API, and it can obtain APIs such as formatMessage for specific value binding.\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\nSet the switching language. The page will be refreshed by default. You can dynamically switch by setting the second parameter to false.\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n## Extension antd internationalization\n\nSuch as a component library based on antd ant-c, can be extended antd internationalization by the following way:\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\nAfter enabling `locale: { antd: true }`, antd's [ConfigProvider](https://ant.design/components/config-provider/) will be the `antd` and `ant-c` internationalization。\n\n## FAQ\n\n### Why no use formatMessage?\n\nAlthough formatMessage is very convenient to use, it is out of the react life cycle. The most serious problem is that it cannot trigger dom re-rendering when switching languages. In order to solve this problem, we will refresh the browser when switching languages. The user experience is poor, so it is recommended that you use [`useIntl`](./#useIntl) or [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc), can achieve the same thing.\n\n\n# @umijs/plugin-access\n\n> Umi plugin for access management..\n\nSee our website [@umijs/plugin-access](https://umijs.org/plugins/plugin-access) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-access\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-access --dev\n```\n\n\n# @umijs/plugin-analytics\n\n> analytics for baidu tongji and google analytics.\n\nSee our website [@umijs/plugin-analytics](https://umijs.org/plugins/plugin-analytics) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-analytics\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-analytics --dev\n```\n\n\n# @umijs/plugin-ant-design-pro-block\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-pro-block) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-ant-design-pro-block.svg?style=flat)](https://npmjs.org/package/umi-plugin-ant-design-pro-block)\n\nA plugin for deliver umi block files like ant design pro structure.\n\nWhen you use `umi block demo` to download a block, if you did not use this plugin, you will get:\n\n```diff\n- src\n - mock\n - pages\n+ - demo\n+ - index.js\n+ - _mock.js\n+ - service.js\n```\n\nAnd if you use it, you will get:\n\n```diff\n- src\n - mock\n+ - demo.js\n - service.js\n+ - demo.js\n - pages\n+ - demo\n+ - index.js\n```\n\nAnt will replace `umi-request` to `util(s)/request.js` if it exist.\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: ['@umijs/plugin-blocks', '@umijs/plugin-ant-design-pro-block'],\n};\n```\n\n## Options\n\n```js\n{\n moveMock: false, // whether move _mock.js to mock, default to true\n moveService: false, // whether move service.js to src/services/, default to true\n modifyRequest: false, // whether modify umi-request to util(s)/request (if it exist), default to true\n autoAddMenu: false, // whether add name and icon config to route config when download a pro, default to true\n}\n```\n\n## LICENSE\n\nMIT\n\n\n# @umijs/plugin-ant-design-pro-block\n\n> @umijs/plugin-ant-design-pro-block.\n\nSee our website [@umijs/plugin-ant-design-pro-block](https://umijs.org/plugins/plugin-ant-design-pro-block) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-ant-design-pro-block\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-ant-design-pro-block --dev\n```\n\n\n# @umijs/plugin-antd-dayjs\n\n用于在 umi 中代替 antd-dayjs-webpack-plugin.\n\n> @umijs/plugin-antd-dayjs\n\nSee our website [@umijs/plugin-antd-dayjs](https://umijs.org/plugins/plugin-antd-dayjs) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-dayjs\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-dayjs --dev\n```\n\n\n# @umijs/plugin-antd-mobile\n\n> @umijs/plugin-antd-mobile.\n\nSee our website [@umijs/plugin-antd-mobile](https://umijs.org/plugins/plugin-antd-mobile) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd-mobile\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd-mobile --dev\n```\n\n\n# @umijs/plugin-antd\n\n> @umijs/plugin-antd.\n\nSee our website [@umijs/plugin-antd](https://umijs.org/plugins/plugin-antd) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-antd\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-antd --dev\n```\n\n\n# umi-plugin-block-dev\n\n[![NPM version](https://img.shields.io/npm/v/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev) [![NPM downloads](http://img.shields.io/npm/dm/umi-plugin-block-dev.svg?style=flat)](https://npmjs.org/package/umi-plugin-block-dev)\n\nA umi plugin for develop a umi block with umi\n\n## Layout\n\n### blankLayout\n\n![image](https://user-images.githubusercontent.com/8186664/59409733-83d23a80-8de9-11e9-9a0b-e41b8b4ce5a8.png)\n\n### ant-design-pro\n\n![image](https://user-images.githubusercontent.com/8186664/59409669-52f20580-8de9-11e9-8f4f-23ee873efe1b.png)\n\n### ant-design-pro-user\n\n![image](https://user-images.githubusercontent.com/8186664/59409597-1f16e000-8de9-11e9-8993-e68ec1b4da0e.png)\n\n## Usage\n\nConfigure in `.umirc.js`,\n\n```js\nexport default {\n plugins: [['umi-plugin-block-dev', options]],\n};\n```\n\nAnd you can use `create-umi` to create a umi block automatically:\n\n```sh\n$ yarn create umi --block\n```\n\n## options\n\n```js\n{\n layout: 'ant-design-pro', // or ant-design-pro-user\n menu: {\n name: 'demo',\n icon: 'home',\n },\n mockUmiRequest: true // whether to build mock data . _mock.js\n}\n```\n\n### env\n\n- BLOCK_DEV_PATH: custom block preview path\n- BLOCK_DEV_MOCK_UMI_REQUEST: package mock data to build result, for build static preview site\n- BLOCK_PAGES_LAYOUT: custom block Layout\n\n## LICENSE\n\nMIT\n\n\n# @umijs/plugin-block-devtool\n\n> @umijs/plugin-block-devtool.\n\nSee our website [@umijs/plugin-block-devtool](https://umijs.org/plugins/plugin-block-devtool) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-block-devtool\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-block-devtool --dev\n```\n\n\n# @umijs/plugin-crossorigin\n\n> @umijs/plugin-crossorigin.\n\nSee our website [@umijs/plugin-crossorigin](https://umijs.org/plugins/plugin-crossorigin) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-crossorigin\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-crossorigin --dev\n```\n\n\n# @umijs/plugin-dev-externals\n\n> @umijs/plugin-dev-externals.\n\nSee our website [@umijs/plugin-dev-externals](https://umijs.org/plugins/plugin-dev-externals) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dev-externals\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dev-externals --dev\n```\n\n\n# @umijs/plugin-dva\n\n> @umijs/plugin-dva.\n\nSee our website [@umijs/plugin-dva](https://umijs.org/plugins/plugin-dva) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-dva\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-dva --dev\n```\n\n\n# @umijs/plugin-esbuild\n\n> @umijs/plugin-esbuild.\n\nSee our website [@umijs/plugin-esbuild](https://umijs.org/plugins/plugin-esbuild) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-esbuild\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-esbuild --dev\n```\n\n\n# @umijs/plugin-helmet\n\n> @umijs/plugin-ssr-helmet.\n\nSee our website [@umijs/plugin-helmet](https://umijs.org/plugins/plugin-helmet) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-helmet\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-helmet --dev\n```\n\n\n# @umijs/plugin-initial-state\n\n> @umijs/plugin-initial-state.\n\nSee our website [@umijs/plugin-initial-state](https://umijs.org/plugins/plugin-initial-state) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-initial-state\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-initial-state --dev\n```\n\n\n# @umijs/plugin-layout\n\n> @umijs/plugin-layout.\n\nSee our website [@umijs/plugin-layout](https://umijs.org/plugins/plugin-layout) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-layout\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-layout --dev\n```\n\n\n[English](README.en-US.md)\n\n# @umijs/plugin-locale\n\n## Use\n\n安装\n\n```bash\nnpm i @umijs/plugin-locale --save\n```\n\n在 umirc.js，或 config/config.js 中配置\n\n```tsx\nplugins: ['@umijs/plugin-locale'];\n```\n\n配置:\n\n```jsx\n{\n locale: {\n default?: string;\n baseNavigator?: boolean;\n useLocalStorage?: boolean;\n /** title 开启国际化 */\n title?: boolean;\n antd?: boolean;\n baseSeparator?: string;\n }\n}\n```\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport { useIntl, getLocale, addLocale, getAllLocales, setLocale } from 'umi';\nimport styles from './index.css';\n\nexport default function () {\n const intl = useIntl();\n const [list, setList] = useState(getAllLocales());\n const locale = getLocale();\n\n useEffect(() => {\n // 动态增加新语言\n addLocale('zh-TW', {\n name: '妳好，{name}',\n });\n // 刷新列表\n setList(getAllLocales());\n }, []);\n\n return (\n
\n

当前语言：{locale}

\n {list.map((locale) => (\n {\n setLocale(locale);\n }}\n style={{\n margin: 8,\n }}\n >\n {locale}\n \n ))}\n \n
\n );\n}\n```\n\n## API\n\n@umijs/plugin-locale 基于 react-intl 封装，支持其所有的 api，详情可以看[这里](https://github.com/formatjs/react-intl/blob/master/docs/API.md)。为了方便使用我们也添加了一些其他的功能，这里将会列举所有的 api，并且展示它的功能。\n\n### addLocale\n\n动态的增加语言，增加语言之后可以通过 getAllLocales 获得列表。addLocale 三个参数。\n\n- name 语言的 key。例如 zh-TW\n- message 语言的 id 列表。 例如：{ // id 列表 name: '妳好，{name}', }\n- extraLocales 相应的 `momentLocale` 和 `antd` 配置\n\n```tsx\nimport zhTW from 'antd/es/locale/zh_TW';\n\n// 动态增加新语言\naddLocale(\n 'zh-TW',\n {\n // id 列表\n name: '妳好，{name}',\n },\n {\n momentLocale: 'zh-tw',\n antd: zhTW,\n },\n);\n```\n\n### getAllLocales\n\n获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 en-US.(js|json|ts) 文件。\n\n```tsx\nimport { getAllLocales } from 'umi';\n\nconsole.log(getAllLocales()); // [en-US,zh-CN,...]\n```\n\n### getLocale\n\n`getLocale` 将获得当前选择的语言。\n\n```tsx\nimport { getLocale } from 'umi';\n\nconsole.log(getLocale()); // en-US | zh-CN\n```\n\n### useIntl\n\nuseIntl 是最常用的 api,它可以获得 formatMessage 等 api 来进行具体的值绑定。\n\n```ts\n// en-US.json\nexport default {\n name: 'Hi, {name}',\n};\n```\n\n```tsx\n//page/index.tsx\n\nimport React, { useState } from 'react';\nimport { useIntl } from 'umi';\n\nexport default function () {\n const intl = useIntl();\n return (\n \n );\n}\n```\n\n### setLocale\n\n设置切换语言，默认会刷新页面，可以通过设置第二个参数为 false，来动态切换。\n\n```tsx\nimport { setLocale } from 'umi';\n\n// 刷新页面\nsetLocale('zh-TW', true);\n\n// 不刷新页面\nsetLocale('zh-TW', false);\n```\n\n### \n\n选择语言的展示组件。可以通过开启 locale 插件，从 umi 中获取该组件。只有当项目依赖 antd, 同时项目 /locales 文件夹下有超过两个语言文件时才会显示。可配置的属性有：\n\n- postLocaleData, 默认包含 \"简体中文\" 、\"繁体中文\"、 \"英文\" 、\"葡萄牙语\"四种语言配置,当需要展示其他语言时，可以通过配置 postLocaleData 来扩展，格式如下所示。\n- globalIconClassName, 全球图标的样式。\n- onItemClick, 切换语言时的回掉函数，默认会 setLocale。\n- <[Dropdown/](https://ant.design/components/dropdown-cn/#API)> 的所有 API。\n\n```tsx\nimport { SelectLang } from 'umi';\n\n ([\n ...locales,\n {\n lang: 'nl-NL', // 语言的 key 与 antd & locales 下的文件名保持一致\n label: 'Nederlands', // 下拉菜单中展示的语言名\n icon: '🇳🇱', // 下拉菜单中展示的 icon （一般为国旗\n title: 'Taal', // 鼠标浮上全球图标时展示的文案（一般为“语言”这个词的各种翻译\n }\n ])}\n onItemClick={({ key }) => alert(key)}\n>\n```\n\n### 运行时配置\n\n支持运行时对国际化做一些扩展与定制，例如自定义语言识别等。\n\n#### getLocale\n\n自定义语言获取逻辑，比如识别链接 `?locale=${lang}` 当做当前页面的语言。\n\n```js\n// src/app.js\nimport qs from 'qs';\n\nexport const locale = {\n getLocale() {\n const { search } = window.location;\n const { locale = 'zh-CN' } = qs.parse(search, { ignoreQueryPrefix: true });\n return locale;\n },\n};\n```\n\n#### setLocale\n\n自定义语言切换逻辑。其中有三个参数：\n\n- lang: 需要切换的语言\n- realReload: 是否需要刷新页面，这个是由页面调用 `setLocale(lang, true)` 透传。\n- updater：是否触发组件 rerender 重渲染。\n\n```js\n// src/app.js\nexport const locale = {\n setLocale({ lang, realReload, updater }) {\n history.push(`/?locale=${lang}`);\n updater();\n },\n};\n```\n\n## 扩展 antd 国际化\n\n比如有一个基于 antd 的组件库 ant-c，可以通过以下方式扩展 antd 国际化：\n\n```jsx\n// pluginA.js\nexport default (api) => {\n api.register({\n key: 'addAntdLocales',\n fn: (args) => {\n const { ssr } = api.config;\n return [\n `ant-c/${ssr ? 'lib' : 'es'}/locale/${args.lang}_${(\n args.country || args.lang\n ).toLocaleUpperCase()}`,\n ];\n },\n });\n};\n```\n\n那么在开启 `locale: { antd: true }` 后，antd 的 [ConfigProvider](https://ant.design/components/config-provider-cn/) 就会有 `antd` 与 `ant-c` 的国际化了。\n\n## FAQ\n\n### 为什么不要使用 formatMessage 这个语法糖？\n\n虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 [`useIntl`](./#useIntl) 或者 [`injectIntl`](https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc)，可以实现同样的功能。\n\n\n# @umijs/plugin-locale\n\n> @umijs/plugin-locale.\n\nSee our website [@umijs/plugin-locale](https://umijs.org/plugins/plugin-locale) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-locale\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-locale --dev\n```\n\n\n# @umijs/plugin-model\n\n> @umijs/plugin-model.\n\nSee our website [@umijs/plugin-model](https://umijs.org/plugins/plugin-model) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-model\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-model --dev\n```\n\n\n# @umijs/plugin-openapi\n\n> @umijs/plugin-openapi.\n\nSee our website [@umijs/plugin-openapi](https://umijs.org/plugins/plugin-openapi) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-openapi\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-openapi --dev\n```\n\n\n# @umijs/plugin-preact\n\n> @umijs/plugin-preact.\n\nSee our website [@umijs/plugin-preact](https://umijs.org/plugins/plugin-preact) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-preact\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-preact --dev\n```\n\n\n# @umijs/plugin-qiankun\n\n> umi plugin for [qiankun](https://qiankun.umijs.org/).\n\nSee our website [@umijs/plugin-qiankun](https://v3.umijs.org/plugins/plugin-qiankun) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-qiankun\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-qiankun --dev\n```\n\n\n# @umijs/plugin-request\n\n> @umijs/plugin-request.\n\nSee our website [@umijs/plugin-request](https://umijs.org/plugins/plugin-request) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-request\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-request --dev\n```\n\n\n# @umijs/plugin-sass\n\n> @umijs/plugin-sass.\n\nSee our website [@umijs/plugin-sass](https://umijs.org/plugins/plugin-sass) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-sass\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-sass --dev\n```\n\n\n# @umijs/plugin-stylus\n\n> @umijs/plugin-stylus.\n\nSee our website [@umijs/plugin-stylus](https://umijs.org/plugins/plugin-stylus) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-stylus\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-stylus --dev\n```\n\n\n# @umijs/plugin-test\n\n## 启用方式\n\n默认开启。\n\n## 介绍\n\n基于 jest 提供 `umi test` 命令。\n\n包含以下特性，\n\n- 支持 lerna 包，可以针对子包测试和生成覆盖率\n- 支持 TypeScript\n- 内置以下补丁\n - core-js/stable\n - regenerator-runtime/runtime\n - whatwg-fetch\n- 支持通过 jest.config.json 和 package.json 中的 jest 属性进行配置，前者优先级更高\n- jest.config.json 中的配置项支持函数的形式\n\n## 使用\n\n```bash\n$ umi-test\n\n# watch mode\n$ umi-test -w\n$ umi-test --watch\n\n# collect coverage\n$ umi-test --coverage\n\n# print debug info\n$ umi-test --debug\n\n# test specified package for lerna package\n$ umi-test --package name\n\n# don't do e2e test\n$ umi-test --no-e2e\n```\n\n## 配置\n\n通过 jest.config.js 实现配置的目的，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper: {\n '^umi$': require.resolve('umi'),\n },\n};\n```\n\n但有时你会希望保留 umi-test 内置的配置，只做扩展，我们也函数的形式，比如：\n\n```js\nmodule.exports = {\n moduleNameMapper(memo) {\n return {\n ...memo,\n '^umi$': require.resolve('umi'),\n };\n },\n};\n```\n\n\n# @umijs/plugin-test\n\n> @umijs/plugin-test.\n\nSee our website [@umijs/plugin-test](https://umijs.org/plugins/plugin-test) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/plugin-test\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/plugin-test --dev\n```\n\n\n# @umijs/preset-ant-design-pro\n\n> @umijs/preset-ant-design-pro.\n\nSee our website [@umijs/preset-ant-design-pro](https://umijs.org/plugins/preset-ant-design-pro) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-ant-design-pro\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-ant-design-pro --dev\n```\n\n\n# @umijs/preset-react\n\n> @umijs/preset-react.\n\nSee our website [@umijs/preset-react](https://umijs.org/plugins/preset-react) for more information.\n\n## Install\n\nUsing npm:\n\n```bash\n$ npm install --save-dev @umijs/preset-react\n```\n\nor using yarn:\n\n```bash\n$ yarn add @umijs/preset-react --dev\n```\n\n\n"}