系统级 API

registerPlugin

加载插件,用于插件集等需要在一个插件中加载其它插件的场景。

  1. const demoPlugin = require('./demoPlugin');
  2. api.registerPlugin({
  3. id: 'plugin-id',
  4. apply: demoPlugin,
  5. opts: {},
  6. });

registerMethod

注册插件方法,用于给插件添加新的方法给其它插件使用。

  1. // 类型通常和方法名对应 addXxx modifyXxx onXxx afterXxx beforeXxx
  2. api.registerMethod('addDvaRendererWrapperWithComponent', {
  3. type: api.API_TYPE.ADD
  4. type: api.API_TYPE.EVENT
  5. type: api.API_TYPE.MODIFY
  6. apply: () => {} // for custom type
  7. });

对于类型是 api.API_TYPE.ADD 的插件方法,你应该返回一项或者通过数组返回多项,也可以返回一个空数组,比如:

  1. api.addHTMLMeta({ /* ... */ });
  2. api.addHTMLMeta([{ /* ... */ }, { /* ... */ }]);
  3. api.addHTMLMeta(() => {
  4. if (opt === 'h5') {
  5. return { /* ... */ };
  6. }
  7. return [];
  8. });

类型是 api.API_TYPE.EVENT 的插件方法,你应该传入一个 function 并且不需要返回任何内容。

类型是 api.API_TYPE.MODIFY 的插件方法,返回修改后的内容。

你也可以通过 apply 来自定义处理的函数,你注册的方法可能被多个插件使用,当你调用 applyPlugins 时在 umi 内部会通过 reduce 函数去处理这些插件的返回值。你定义的 apply 函数决定了 applyPlugins 是怎么处理多个插件的结果作为它的返回值的。通常情况下内置的三种类型就可以满足你的需求了。

applyPlugins

在插件用应用通过 registerMethod 注册的某个方法。

  1. // 如果 type 为 api.API_TYPE.ADD wrappers 为各个插件返回的值组成的数组
  2. // EVENT 则 wrappers 返回 undefined
  3. // MODIFY 则返回最后的修改值
  4. const wrappers = api.applyPlugins('wrapDvaRendererWithComponent');

restart

  1. api.restart('why');

重新执行 umi dev,比如在 bigfish 中修改了 appType,需要重新挂载插件的时候可以调用该方法。

rebuildTmpFiles

  1. api.rebuildTmpFiles('config dva changed');

重新生成 bootstrap file(entryFile)等临时文件,这个是最常用的方法,国际化,dva 等插件的配置变化都会用到。

refreshBrowser

刷新浏览器。

rebuildHTML

触发 HTML 重新构建。

changePluginOption

设置插件的配置,比如在 react 插件集中中需要把插件集的 dva 配置传递给 dva 插件的时候用到。

  1. api.changePluginOption('dva-plugin-id', {
  2. immer: true
  3. });

registerCommand

注册 umi xxx 命令行,比如在 umi 内部 help 命令就是这么实现的。

  1. api.registerCommand('help', {
  2. hide: true
  3. }, args => {
  4. // more code...
  5. });

_registerConfig

注册一个配置项,系统方法,通常不要使用。

  1. api._registerConfig(() => {
  2. return () => {
  3. return {
  4. name: 'dva',
  5. validate: validate,
  6. onChange(newConfig, oldConfig) {
  7. api.setPluginDefaultConfig('umi-plugin-dva', config);
  8. }
  9. };
  10. }
  11. });

_modifyCommand

修改命令的名称和参数。

  1. // A demo for modify block npmClient to cnpm:
  2. api._modifyCommand(({ name, args }) => {
  3. if (name === 'block') {
  4. args.npmClient = args.npmClient || 'cnpm';
  5. }
  6. return { name, args };
  7. });