umi-plugin-intl
v1.0.0
Published
Umi Plugin for Intl Group Business
Readme
umi-plugin-intl
Umi Plugin for Intl Group Business
Install
$ npm i umi-plugin-intl --saveUsage
Basic Uasge
- 在 umi 配置中引用插件：
export default defineConfig({
plugins: ['umi-plugin-intl'],
})- 在 config 目录下创建模板文件 document.tpl 以下是内容示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Page</title>
{% if env === 'production' %}
<link rel="stylesheet" href="{{ assetsPath }}umi.css">
{% endif %}
</head>
<body>
<div id="{{ config.mountElementId | d('root') }}"></div>
<script src="{{ assetsPath }}umi.js"></script>
</body>
</html>以上模板会使用 nunjucks 渲染，更多语法请查看官方文档。
Advanced
使用额外的插件配置：
export default defineConfig({
plugins: ['umi-plugin-intl'],
pluginIntl: {
templatePath: 'public/template.tpl',
renderProps: {
foo: 'bar',
}
},
})
配置项 pluginIntl 定义如下：
| name | desc | required | default |
| ------------ | ----------------------------------------------------------------------- | -------- | --------------------- |
| templatePath | 模板路径，模板使用 nunjucks 语法 | no | config/document.tpl |
| renderProps | 通过 nunjucks 渲染时注入的数据 | no | {} |
renderProps 会默认注入以下数据：
interface IDefaultProps {
/**
* 当前的编译环境
*/
env: 'development' | 'production';
/**
* 当前的 umi user config，
* 从 .umirc 或 config/config 中读取的内容，没有经过 defaultConfig 以及插件的任何处理
*/
config: Record<string, any>;
/**
* 当前项目的 package.json 对象
*/
pkgInfo: Record<string, any>;
};Utils API
createMock
创建一个 mock 数据，支持 mockjs 语法，示例：
import { createMock } from 'umi-plugin-intl';
export default {
// 直接返回数据
'GET /api/todo/list': createMock({
success: '@boolean',
'data|5-10': [{
id: '@id'
}]
}),
// 通过 callback 返回数据
// req 是 express 的 Request 对象
'POST /api/todo/add': createMock(async (req) => {
return {
success: true
};
}),
// 读取文件并返回
'GET /api/todo/file': createMock('./data/data1.json'),
// 返回 text 数据
'GET /api/todo/text': createMock(`Hello World`, { dataType: 'text' }),
}方法定义：
interface IMockOptions {
/** 是否使用 mockjs 语法，默认 true，仅支持 dataType 为 'json' */
useMockjs?: boolean;
/** 返回内容格式，如果是 text，则不支持 mockjs 语法 */
dataType?: 'json' | 'text';
}
type MockFunc = (req: Request, res: Response) => Promise<void>;
function createMock(callback: (req: Request) => Promise<Record<string, any>>, options?: IMockOptions): MockFunc;
function createMock(filename: string, options?: IMockOptions): MockFunc;
function createMock(data: Record<string, any>, options?: IMockOptions): MockFunc;关于 mockjs 语法请查看文档：http://mockjs.com/examples.html
LIcense
BSD-3-Clause License