---
sidebar_position: 9
---

# plugins

- **Type:** `CliPlugin[]`
- **Default:** `[]`

Used to configure custom Modern.js framework plugins.

Refer to [How to Develop Plugins](/plugin/plugin-system/implement) 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](/configure/app/builder-plugins) to configure Rsbuild plugins.
- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
- Use [tools.babel](/configure/app/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](/plugin/plugin-system/relationship) 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`.

```ts title="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.

```ts title="modern.config.ts"
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.

```ts title="modern.config.ts"
import { myPlugin } from 'my-plugin';

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