简介
插件模式是一种应用非常广泛的模式。我们用的很多软件都拥有自身的插件机制，通过插件可以拓展软件的功能。另外，插件模式也广泛应用于 web 方面。例如 Webpack、 Vue CLI、UMI、Babel等。
那么插件系统是如何实现的呢？
image.png
如上图所示，插件应用的流程很简单：
- 应用启动，执行初始化
- 查找和加载插件
- 调用插件
- 运行主应用
其中，第 3 步的时候，回去调用插件，调用插件时会在主应用或者状态库中添加一系列的属性和钩子。插件调用完毕后，在主应用中就可以使用这些被插件添加的属性和钩子，以此来拓展应用的功能。
关键地方在于插件的形式及插件接口的设计。
插件的形式多种多样，不同的应用有不同的设计。例如 Webpack 插件是一个对象，必须对外暴露一个 apply 方法；UMI 及 VUE CLI 的插件是函数的形式。
毫无疑问，每种插件系统都提供了固定的插件 API 供插件开发者使用，插件 API 的设计也是一个重点。
那么现在，我们可以根据以上的流程实现一个简单的拥有插件系统的 Demo。
简单 Demo 实现
这里，我们规定我们的插件是一个函数，接收 PluginApi 实例作为参数。
- 实现主应入口
假如我们的应用入口非常简单，实例化主应用类，执行 run 方法，如下所示
import { Service } from './Service';
const service = new Service({});
service.run('command name');
- 实现主应用类
详细说明见代码注释
import { resolve } from 'path';
import { PluginApi } from './PluginApi';
import { AsyncSeriesWaterfallHook } from 'tapable';
export interface StoreState {
beforeMiddleWares: Function[];
cwd: string;
hooks: Record<string, AsyncSeriesWaterfallHook<any, any>>;
commands: Record<string, () => any>;
}
export interface ServiceOpts {
cwd?: string;
}
export class Service {
private cwd: string;
private store: StoreState;
private plugins: { name: string; fn: Function }[];
constructor(opts: ServiceOpts) {
const { cwd } = opts;
this.cwd = cwd || process.cwd();
// 创建 store，供PluginApi使用，用于保存插件添加的数据及钩子
this.store = {
beforeMiddleWares: [],
cwd: this.cwd,
hooks: {}, // 用于存放钩子
commands: {},
};
this.plugins = [];
// 执行初始化
this.init();
}
// 应用初始化
private init() {
// ...
// 其它初始化操作，例如：加载环境变量
this.loadPlugins(); // 加载插件
}
// 执行一个命令
public run(command: string) {
const fn = this.store.commands[command];
if (!fn) {
throw new Error(`Command ${command} does not exists.`)
}
fn();
}
/**
* 加载插件
* 说明：
* 这里为了简单起见，只写了从配置文件读取插件，
* 实际上在umi和vue-cli中还会从package.json中根据一定规则加载插件
*/
private loadPlugins() {
// 读取配置文件
const { plugins = [] }: { plugins: string[] } = require(resolve(this.cwd, '.config.js'));
// 将插件加载进来，并保存到一个私有变量中
this.plugins = plugins.map(this.requirePlugin);
// 运行插件，由于我们规定插件是一个方法，所以直接调用插件导出的方法，传入 PluginApi 实例即可
// 实例化 PluginApi 时传入了 store 对象，是为了调用 PluginApi 的方法是可以将属性和 hooks 添加到 store 上，方便我们调用。
this.plugins.forEach(plugin => plugin.fn(new PluginApi(this.store)))
}
// 加载插件的简单实现，也就是直接使用 require 将插件引入进来
private requirePlugin(plugin: string): { name: string, fn: Function } {
try {
return {
name: plugin,
fn: require(plugin),
}
} catch (error) {
console.log(error)
throw new Error('Plugin not exist.')
}
}
}
现在我们的主应用已经实现。接下来实现我们关键的对外API，即 PluginApi。
- PluginApi 实现
为了简单起见，我们只实现一个示例方法和 hook 机制
import { AsyncSeriesWaterfallHook } from 'tapable';
import { StoreState } from './Service';
export class PluginApi {
private store: StoreState;
constructor(store: StoreState) {
this.store = store;
}
public addBeforeMiddleWare(middleWare: Function) {
this.store.beforeMiddleWares.push(middleWare);
}
// 公共方法，用于获取应用 cwd
public getCwd() {
return this.store.cwd;
}
// 注册一个
public registerCommand(name: string, handler: () => any) {
this.store.commands[name] = handler;
}
// 注册一个 Hook
public registerHook(name: string) {
if (this.store.hooks[name]) {
throw new Error(`Hook ${name} already exists`);
}
// 这里为了拿到 hook 执行完成后的返回值，我们使用了 AsyncSeriesWaterfallHook
this.store.hooks[name] = new AsyncSeriesWaterfallHook(['memo']);
}
// 为 hook 添加一个监听器
public onHook(hookName: string, handler: () => any) {
const hook = this.store.hooks[hookName]
if (hook) {
hook.tapPromise(hookName, async (memo: any[] = []) => {
const item = await handler();
return memo.concat(item)
});
}
}
// 调用一个 Hook
public async callHook(name: string) {
const hook = this.store.hooks[name];
if (hook) {
const result = hook.promise();
return result;
}
}
}
至此，我们的插件化机制已经实现。那么接下来，我们来依据我们的插件系统写个插件
插件 Demo
- 实现插件，注册 hook 及command
// demo/plugin.js
module.exports = async (api) => {
api.addBeforeMiddleWare(() => {
console.log(111)
});
api.registerHook('onDev');
api.onHook('onDev', async () => {
return 'hello hook 1'
});
api.onHook('onDev', () => {
return 'hello hook 2'
});
api.registerCommand('test', async () => {
const result = await api.callHook('onDev');
console.log('Command: test result: ', result)
})
}
- 创建配置文件 .config.js
module.exports = {
plugins: [
require.resolve('./demo/plugin.js'),
]
}
- 修改主应用
// index.ts
import { Service } from './Service';
const service = new Service({});
service.run('test')
那么，现在使用 ts-node 运行index.ts，我们就能看到如下输出：
image.png
与我们预计的效果是相同的。
