应用类 API

对于应用类 API,可以有直接调用和函数回调两种方式。

直接调用的示例如下:

  1. api.addRendererWrapperWithComponent('/path/to/component.js');

函数回调的示例如下:

  1. api.addRendererWrapperWithComponent(() => {
  2. if (opts.antd) {
  3. return '/path/to/component.js';
  4. }
  5. });

下面是具体的 API。

modifyDefaultConfig

设置 umi 的默认配置。

  1. api.modifyDefaultConfig(memo => {
  2. return {
  3. // 默认使用单数目录
  4. ...memo,
  5. singular: true,
  6. }
  7. });

addPageWatcher

添加 watch 的文件。

  1. api.addPageWatcher(['xxx.js', '*.mock.js']);

addHTMLMeta

在 HTML 中添加 meta 标签。

在 HTML 中添加 Link 标签。

addHTMLStyle

在 HTML 中添加 Style 标签。

addHTMLScript

在 HTML 尾部添加脚本。

  1. api.addHTMLScript({
  2. content: '',
  3. src: '',
  4. // ...attrs
  5. });

addHTMLHeadScript

在 HTML 头部添加脚本。

" class="reference-link">modifyHTMLChunks

修改 chunks,默认值是 ['umi']

modifyHTMLWithAST

修改 HTML,基于 cheerio 。

参数:

  • route,当前路由
  • getChunkPath ,获取 chunk 的完整路径,包含 publicPath 和 hash 信息

例子:

  1. api.modifyHTMLWithAST(($, { route, getChunkPath }) => {
  2. $('head').append(`<script src="${getChunkPath('a.js')}"></script>`);
  3. });

modifyHTMLContext

修改 html ejs 渲染时的环境参数。

  1. api.modifyHTMLContext((memo, { route }) => {
  2. return {
  3. ...memo,
  4. title: route.title, // umi-plugin-react 的 title 插件包含了类似的逻辑
  5. };
  6. });

modifyRoutes

修改路由配置。

  1. api.modifyRoutes(({ memo, args}) => {
  2. return memo;
  3. })

路由配置的格式如下:

  1. const route = {
  2. path: '/xxx',
  3. component: '/path/to/component',
  4. Routes: ['/permissionControl.js'],
  5. }
  1. exports.routes = [{
  2. path: '/xxx',
  3. workspace: false,
  4. }];
  1. //permissionControl.js
  2. export class Control extends Component (props) => {
  3. componentDidount() => {
  4. if(props.route.workspace === false) {
  5. window.AntdCloudNav.set()
  6. }
  7. }
  8. }

addEntryImportAhead

在入口文件在最上面 import 模块。

  1. api.addEntryImportAhead({
  2. source: '/path/to/module',
  3. specifier: 'name', // import 出来后的名称,可以缺省
  4. });

addEntryPolyfillImports

同 addEntryImportAhead,但作为 polyfill,所以添加在最前面。

addEntryImport

在入口文件中 import 模块。

  1. api.addEntryImport({
  2. source: '/modulePath/xxx.js',
  3. specifier: 'moduleName',
  4. });

addEntryCodeAhead

在 render 之前添加代码。

  1. api.addEntryCodeAhead(`
  2. console.log('addEntryCodeAhead');
  3. `);

addEntryCode

在 render 之后添加代码。

addRouterImport

在路由文件中添加模块引入。

addRouterImportAhead

在路由文件头部添加模块引入。

addRendererWrapperWithComponent

外面包一层组件。

addRendererWrapperWithModule

在挂载 前执行一个 Module,支持异步。

modifyEntryRender

modifyEntryRender

modifyEntryHistory

modifyEntryHistory

modifyRouteComponent

modifyRouteComponent

modifyRouterRootComponent

modifyRouterRootComponent

modifyWebpackConfig

修改 webpack 配置。

  1. // 示例
  2. api.chainWebpackConfig((memo) => {
  3. return memo;
  4. });

modifyAFWebpackOpts

修改 af-webpack 配置。

  1. // 示例
  2. api.modifyAFWebpackOpts((memo) => {
  3. return memo;
  4. });

addMiddleware

往开发服务器后面添加中间件。

addMiddlewareAhead

往开发服务器前面添加中间件。

addMiddlewareBeforeMock

在 mock 前添加中间件。

addMiddlewareAfterMock

在 mock 后添加中间件。

addVersionInfo

添加版本信息,在 umi -vumi version 时显示。

addRuntimePlugin

添加运行时插件,参数为文件的绝对路径。

addRuntimePluginKey

添加运行时可配置项。