---
sidebar_position: 1
---

# Quick Start

Modern.js Module not only provides a rich set of features, but also supports extending the capabilities of the current project by way of plugins.

We can quickly see how to write a Modern.js Module plugin by using the following example.

1. First we create `. /plugins/example.ts` file under the initialized project.

```md title=". /project"
. /project .
├── plugins
│ └── example.ts
├── src/
└── modern.config.ts
```

2. Next add the code for the plugin to the `example.ts` file.

```ts
import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';

export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
  return {
    name: 'example',
    setup() {
      console.info('this is example plugin');
      return {
        // use hooks
        afterBuild() {
          console.info('build over');
        },
      };
    },
  };
};
```

3. Then we register the plugin we just wrote via the [`plugins`](/en/api/config/plugins) API.

```ts title=". /modern.config.ts"
import { examplePlugin } from '. /plugins/example';
export default defineConfig({
  plugins: [examplePlugin()],
});
```

4. Finally, run `modern build` and you will see:

```bash title="terminal"
This is example plugin
Build succeed: 510.684ms
build over
```

With the above example, we learned the following things.

- The recommended plugin directory structure
- The initialization code of the plugin
- Plugin registration

In addition to the above, we also need to understand.

- [plugin objects, type definitions and recommended configuration options](/en/plugins/guide/plugin-object)
- [setup functions, `api` object parameters, lifecycle hooks](/en/plugins/guide/setup-function)