Improve plugin system

[sorrycc]

TODO

• 保证 api.service.routes 输出的稳定性

例子

在入口文件 .umi/umi.js 添加一行 alert('hello umi plugin!');。

export default (api) => {
  api.register('modifyEntry', ({ memo }) => {
    return `
${memo}
alert('hello umi plugin!');`.trim();
  });
}

说明

umi 整体是由插件串联起来的，除了基础功能，umi 内部也是由插件实现的。

插件可以做什么？

1. 注册命令行
2. 挖坑填坑
3. UI 插件

注册命令行

umi 内部的 dev、build、test 都是由此实现，bigfish 的 pack 也可以改成这种方式。

api.registerCommand('x', options, fn);

参考：https://github.com/umijs/umi/blob/master/packages/umi-build-dev/src/plugins/commands/dev/index.js#L25

挖坑填坑

插件本质上就是挖坑和填坑，umi 里的坑（hooks）分两类：

1. 事件类型，以 on，before 和 after 为前缀
2. 修改类型，以 modify 为前缀，提供 memo 供修改

事件类型。

applyPlugins('a', { args });

register('a', ({ args }) => {
  // do something
});

修改类型。

const b = api.register('a', { memo, args });

register('a', ({ memo, args }) => {
  // return new memo
});

注意点：

• 所有 hook 都是同步的，目前暂无异步需求
• 插件本身也可以通过 api.service.applyPlugin 挖坑，让其他插件来填
• 插件目前没有依赖机制，通过调整数组的先后顺序实现

UI 插件

https://cli.vuejs.org/dev-guide/ui-api.html#project-configurations

方案待定。

比如，我们有整体的 UI 配置界面，然后可以在这里添加额外的 UI 配置项：

api.describeConfig({ id, desc, options });

插件接口

环境变量

• process.env.NODE_ENV，区分 development 和 production

api 方法

• register(hook, ({ memo, args }) => {})
• registerCommand(commandName, () => {})
• debug()

封装 register 的辅助方法：

• chainWebpackConfig(webpackConfig)
• ...

api.service

• cwd
• pkg
• config
• webpackConfig
• paths
  • outputPath
  • absOutputPath
  • pagesPath
  • absPagesPath
  • tmpDirPath
  • absTmpDirPath
  • absSrcPath
• routes
• dev
  • server
  • restart(why)
  • rebuildFiles()

umi-utils

• winPath(str)
• findJS(baseDir, fileNameWithoutExtname)
• compatDirname(path, cwd, fallback)

Hooks

生命周期相关

• onStart
• onBuildSuccess, args: { stats }
• onBuildFail, args: { err }
• onDevCompileDone, args: { isFirstCompile, stats }
• onGenerateFiles, args: { isRebuild }
• onConfigChange, args: { newConfig }
• beforeDevServer, args: { devServer }
• afterDevServer, args: { devServer }

临时文件生成相关

• modifyPageWatchers
• modifyEntryFile
• modifyRouterFile

路由相关

• modifyRoutes
• modifyRouterContent
• modifyRouteComponent, args: { importPath, webpackChunkName }

HTML 相关

• modifyHTMLTemplate
• modifyHTMLScript
• modifyHTML, args: { path }

配置相关

• _modifyConfigPlugins，提供额外的配置项
• modifyDefaultConfig，修改默认配置项
• modifyConfig，修改最终配置
• modifyAFWebpackOpts，修改传递给 af-webpack 的配置项
• modifyWebpackConfig，修改最终 webpack 配置，deprecated，推荐用下面的 chainWebpackConfig
• chainWebpackConfig，通过 webpack-chain 修改 webpack 配置

webpackDevServer 相关

• _onBeforeServerWithApp, args: { app }
• modifyBeforeMiddlewares
• modifyAfterMiddlewares

[coveralls]

Pull Request Test Coverage Report for Build 844

• 2 of 2 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.02%) to 26.084%

---

Totals
Change from base Build 842:	0.02%
Covered Lines:	602
Relevant Lines:	2412

---

💛 - Coveralls

[coveralls]

Pull Request Test Coverage Report for Build 867

• 47 of 121 (38.84%) changed or added relevant lines in 29 files are covered.
• 8 unchanged lines in 6 files lost coverage.
• Overall coverage increased (+1.2%) to 27.219%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/umi-build-dev/src/plugins/mock/createMockMiddleware.js	0	1	0.0%
packages/af-webpack/src/dev.js	0	1	0.0%
packages/umi-build-dev/src/plugins/output-path.js	0	1	0.0%
packages/umi-build-dev/src/PluginAPI.js	0	1	0.0%
packages/umi-plugin-react/src/plugins/dynamicImport.js	0	1	0.0%
packages/umi-build-dev/src/plugins/404/index.js	0	1	0.0%
packages/umi-build-dev/src/plugins/afwebpack-config.js	0	1	0.0%
packages/umi-build-dev/src/plugins/base.js	0	1	0.0%
packages/umi-build-dev/src/plugins/proxy.js	0	1	0.0%
packages/umi-plugin-dva/src/index.js	1	2	50.0%

Files with Coverage Reduction	New Missed Lines	%
packages/umi-build-dev/src/plugins/global-css.js	1	0.0%
packages/umi-build-dev/src/plugins/global-js.js	1	0.0%
packages/af-webpack/src/build.js	1	0.0%
packages/umi-build-dev/src/plugins/404/index.js	1	0.0%
packages/umi-build-dev/src/plugins/commands/build/index.js	2	0.0%
packages/umi-build-dev/src/PluginAPI.js	2	0.0%

Totals
Change from base Build 842:	1.2%
Covered Lines:	643
Relevant Lines:	2471

---

💛 - Coveralls

[yesmeck]

export default (api) => {
  api.register('modifyEntry', ({ memo }) => {
    return `
${memo}
alert('hello umi plugin!');`.trim();
  });
}

字符串拼接的方式太不友好了，是不是参考一下 Gatsby 把插件分成不同的环境，修改 entry。

[sorrycc]

@yesmeck

1. 多环境感觉不错，需要再考虑下，现在是只有 node 环境，还没有考虑 browser 环境（运行时）
2. 字符串拼接的方式会尽量避免，不再暴露底层的 modify 前缀的坑位，用封装好的函数代替，比如 api.addImportToEntry()

[zinkey]

export default class extends Plugin {
  start() {
    
  }
  addMiddleware() {
    return [ middleware1 ];
  }
  addHTML() {
     return {
        head: `<title>${this.config.title}</title>`,
        body: '',
     };
  }
  addAlias() {
    return {
    }
  }
  addCustomConfig() {
    return [{
        name: 'title',
        beforePos: "addHTML" // choose the pos
    }]
  }
}