Relationship

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:

foo.ts
const foo = {
  name: 'plugin-foo',
};
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.

foo.ts
const foo = {
  name: 'plugin-foo',
};
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:

foo.ts
const foo = {
  name: 'plugin-foo',
};
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:

foo.ts
const foo = {
  name: 'plugin-foo',
};
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.

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.