plugins#

• Type: CliPlugin[]
• Default: []

Used to configure custom Modern.js framework plugins.

Refer to How to Develop Plugins for how to write custom plugins.

Note#

This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:

• Use builderPlugins to configure Rsbuild plugins.
• Use tools.bundlerChain to configure Rspack or webpack plugins.
• Use tools.babel to configure Babel plugins.

Plugin types#

Modern.js has three types of plugins:

• CLI plugins, applicable to local development, compilation and construction stages, can extend various capabilities in the command line and compilation stages.
• Server plugins, applicable to the server.
• Runtime plugins, applicable to the front-end runtime.

Currently, Modern.js has opened up the ability to customize CLI plugins, and Server plugins and Runtime plugins will be opened up later.

Plugin execution order#

By default, custom plugins are executed in the order of the plugins array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.

When the plugin sets options that control the order, such as pre and post, the execution order will be adjusted based on the declared fields. Refer to Relationship between plugins for more information.

Example#

The following is an example of using CLI plugins.

Use plugins on npm#

To use plugins from npm registry, you need to first install the plugins , and import them in modern.config.ts.

import { myPlugin } from 'my-plugin';

export default defineConfig({
  plugins: [myPlugin()],
});

Use local plugins#

To use local plugins, import them directly using a relative path.

import { myPlugin } from './config/plugin/myPlugin';

export default defineConfig({
  plugins: [myPlugin()],
});

Plugin configuration#

If the plugin provides some custom configuration options, they can be passed in as parameters to the plugin function.

import { myPlugin } from 'my-plugin';

export default defineConfig({
  plugins: [
    myPlugin({
      foo: 1,
      bar: 2,
    }),
  ],
});