Umi-plugin-intl NPM

umi-plugin-intl

version license downloads

Umi Plugin for Intl Group Business

Install

$ npm i umi-plugin-intl --save

Usage

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

Intl Umi Plugin DADA

@types/express chokidar mockjs nunjucks

@everything-registry/sub-chunk-3009 @infinitebrahmanuniverse/nolb-um

1.0.0

1 year ago