---
title: Relationship
sidebar_position: 4
---
# Relationship between Plugins

The plugin configuration object in Modern.js provides a series of fields to control plugin order, mutual exclusion, and other capabilities. The available fields are as follows:

- `name`: `string`, sets the name of the current plugin.
- `pre`: `string[]`, these plugins will be adjusted to be executed before the current plugin.
- `post`: `string[]`, these plugins will be adjusted to be executed after the current plugin.
- `rivals`: `string[]`, mutually exclusive plugins, an error will be thrown when encountering these plugins.
- `required`: `string[]`, required plugins, an error will be thrown when the corresponding plugin is not found in the plugin list.
- `usePlugin`: `CliPlugin[]`, registers other plugins.

The above parameters can be used to achieve plugin front, back, mutual exclusion, and mandatory logic.

## Plugin Sorting

Modern.js plugins achieve plugin sorting functionality through the `pre` and `post` parameters.

### Pre

By default, plugins are executed in the order they are added. You can declare preceding plugins to be executed by using the `pre` field.

For example, there are the following two plugins:

```ts title=foo.ts
const foo = {
  name: 'plugin-foo',
};
```

```ts title=bar.ts
const bar = {
  name: 'plugin-bar',
  pre: ['plugin-foo'],
};
```

The `bar` plugin configures the `foo` plugin in the `pre` field, so the'foo' plugin must be executed before the `bar` plugin.

### Post

Declare succeeding plugins to be executed by using the `post` field.

```ts title=foo.ts
const foo = {
  name: 'plugin-foo',
};
```

```ts title=bar.ts
const bar = {
  name: 'plugin-bar',
  post: ['plugin-foo'],
};
```

If you use the `post` parameter in the `bar` plugin's configuration and set it to `['foo']`, then the `foo` plugin will be executed after the `bar` plugin.

## rivals

The rivals field can be used to declare a mutual exclusion relationship between plugins.

there are two plugin:

```ts title=foo.ts
const foo = {
  name: 'plugin-foo',
};
```

```ts title=bar.ts
const bar = {
  name: 'plugin-bar',
  rivals: ['plugin-foo'],
};
```

The `bar` plugin has been configured with the `foo` plugin in the `rivals` field, therefore an error will be thrown if both the `foo` and `bar` plugins are added simultaneously.

## required

The `required` field can be used to declare a dependency relationship between plugins.

there are two plugin:

```ts title=foo.ts
const foo = {
  name: 'plugin-foo',
};
```

```ts title=bar.ts
const bar = {
  name: 'plugin-bar',
  required: ['plugin-foo'],
};
```

The `bar` plugin has been configured with the `foo` plugin in the `required` field. Therefore, an error will be thrown when using the `bar` plugin if the `foo` plugin is not configured.

## Register Plugin

When there is a dependency relationship between plugins, we can also actively register another plugin in a plugin by using `usePlugin`.

```ts title=foo.ts
const foo = () => ({
  name: 'plugin-foo',
});

const bar = () => ({
  name: 'plugin-bar',
  usePlugin: [foo()],
});
```

When the user configures the `bar` plugin, the foo plugin will also be automatically registered and activated. The user does not need to register the `foo` plugin separately.
