utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
120 lines (85 loc) • 2.79 kB
Markdown
---
sidebar_position: 3
---
# 插件之间的关系
Modern.js 的插件配置对象提供了一系列的字段，用于控制插件顺序、互斥等能力，可用的字段如下：
- `name`: `string`，设置当前插件的名称。
- `pre`: `string[]`，这些插件最终会调整到当前插件前面。
- `post`: `string[]`，这些插件最终会调整到当前插件后面。
- `rivals`: `string[]`，互斥插件，遇到这些插件时会报错。
- `required`: `string[]`，必需插件，插件列表中没有对应的插件时会报错。
- `usePlugin`: `CliPlugin[]`，注册其他插件。
通过以上参数可以实现插件的前置、后置、互斥、必需等逻辑。
## 插件排序
Modern.js 的插件通过 `pre`、`post` 参数来实现了插件排序的功能。
### 前置插件
默认情况下，插件会按照添加顺序依次执行，通过 `pre` 字段可以声明前置执行的插件。
比如有下面两个插件：
```ts title=foo.ts
const foo = {
name: 'plugin-foo',
};
```
```ts title=bar.ts
const bar = {
name: 'plugin-bar',
pre: ['plugin-foo'],
};
```
`bar` 插件在 `pre` 字段中配置了 `foo` 插件，因此 `foo` 插件一定会在 `bar` 插件之前执行。
### 后置插件
同样的，通过 `post` 字段可以声明后置执行的插件。
```ts title=foo.ts
const foo = {
name: 'plugin-foo',
};
```
```ts title=bar.ts
const bar = {
name: 'plugin-bar',
post: ['plugin-foo'],
};
```
`bar` 插件在 `post` 字段中配置了 `foo` 插件，因此 `foo` 插件一定会在 `bar` 插件之后执行。
## 互斥插件
通过 `rivals` 字段可以声明插件间的互斥关系。
有下面两个插件：
```ts title=foo.ts
const foo = {
name: 'plugin-foo',
};
```
```ts title=bar.ts
const bar = {
name: 'plugin-bar',
rivals: ['plugin-foo'],
};
```
`bar` 插件在 `rivals` 字段中配置了 `foo` 插件，因此同时添加了 `foo` 插件和 `bar` 插件就会报错。
## 必需插件
通过 `required` 字段可以声明插件间的依赖关系。
有下面两个插件：
```ts title=foo.ts
const foo = {
name: 'plugin-foo',
};
```
```ts title=bar.ts
const bar = {
name: 'plugin-bar',
required: ['plugin-foo'],
};
```
`bar` 插件在 `required` 字段中配置了 `foo` 插件，因此使用 `bar` 插件时，如果未配置 `foo` 插件就会报错。
## 注册插件
当插件之间存在依赖关系时，我们也可以在一个插件中通过 `usePlugin` 主动注册另一个插件：
```ts title=foo.ts
const foo = () => ({
name: 'plugin-foo',
});
const bar = () => ({
name: 'plugin-bar',
usePlugin: [foo()],
});
```
当使用者配置了 `bar` 插件时，`foo` 插件也会自动注册生效，使用者就不需要去额外注册 `foo` 插件了。