---
sidebar_position: 1
---

# 快速开始

Modern.js Module 不仅提供了丰富的功能，同时也支持通过插件的方式为当前项目扩展能力。

我们可以通过下面的例子来快速了解如何编写一个 Modern.js Module 插件：

1. 首先我们在初始化的项目下创建 `./plugins/example.ts` 文件。

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

2. 接着在 `example.ts` 文件中增加插件的代码。

```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. 然后我们通过 [`plugins`](/api/config/plugins) API，将刚刚写好的插件进行注册。

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

4. 最后运行 `modern build`，就可以看到：

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

通过上面这个例子，我们了解到了下面几件事：

- 推荐的插件目录结构
- 插件的初始化代码
- 插件的注册

除了以上内容以外，我们还需要了解：

- [插件对象、类型定义与推荐配置项](/plugins/guide/plugin-object)
- [setup 函数、`api` 对象参数、生命周期钩子](/plugins/guide/setup-function)