应用类 API

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

直接调用的示例如下：

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

函数回调的示例如下：

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

下面是具体的 API。

modifyDefaultConfig

设置 umi 的默认配置。

api.modifyDefaultConfig(memo => {
  return {
    // 默认使用单数目录
    ...memo,
    singular: true,
  }
});

addPageWatcher

添加 watch 的文件。

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

addHTMLMeta

在 HTML 中添加 meta 标签。

addHTMLLink

在 HTML 中添加 Link 标签。

addHTMLStyle

在 HTML 中添加 Style 标签。

addHTMLScript

在 HTML 尾部添加脚本。

api.addHTMLScript({
  content: '',
  src: '',
  // ...attrs
});

addHTMLHeadScript

在 HTML 头部添加脚本。

" class="reference-link">modifyHTMLChunks

修改 chunks，默认值是 ['umi']。

modifyHTMLWithAST

修改 HTML，基于 cheerio 。

参数：

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

例子：

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

modifyHTMLContext

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

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

modifyRoutes

修改路由配置。

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

路由配置的格式如下：

const route = {
  path: '/xxx',
  component: '/path/to/component',
  Routes: ['/permissionControl.js'],
}

exports.routes = [{
  path: '/xxx',
  workspace: false,
}];

//permissionControl.js
export class Control extends Component (props) => {
  componentDidount() => {
     if(props.route.workspace === false) {
       window.AntdCloudNav.set()
     }
  }
}

addEntryImportAhead

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

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

addEntryPolyfillImports

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

addEntryImport

在入口文件中 import 模块。

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

addEntryCodeAhead

在 render 之前添加代码。

api.addEntryCodeAhead(`
  console.log('addEntryCodeAhead');
`);

addEntryCode

在 render 之后添加代码。

addRouterImport

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

addRouterImportAhead

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

addRendererWrapperWithComponent

在 外面包一层组件。

addRendererWrapperWithModule

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

modifyEntryRender

modifyEntryRender

modifyEntryHistory

modifyEntryHistory

modifyRouteComponent

modifyRouteComponent

modifyRouterRootComponent

modifyRouterRootComponent

modifyWebpackConfig

修改 webpack 配置。

// 示例
api.chainWebpackConfig((memo) => {
  return memo;
});

modifyAFWebpackOpts

修改 af-webpack 配置。

// 示例
api.modifyAFWebpackOpts((memo) => {
  return memo;
});

addMiddleware

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

addMiddlewareAhead

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

addMiddlewareBeforeMock

在 mock 前添加中间件。

addMiddlewareAfterMock

在 mock 后添加中间件。

addVersionInfo

添加版本信息，在 umi -v 或 umi version 时显示。

addRuntimePlugin

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

addRuntimePluginKey

添加运行时可配置项。