快速开始

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

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

    1. 首先我们在初始化的项目下创建 ./plugins/example.ts 文件。
    ./project
    ./
    ├── plugins
    │ └── example.ts
    ├── src/
    └── modern.config.ts
    1. 接着在 example.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');
            },
          };
        },
      };
    };
    1. 然后我们通过 plugins API,将刚刚写好的插件进行注册。
    modern.config.ts
    import { examplePlugin } from './plugins/example';
    export default defineConfig({
      plugins: [examplePlugin()],
    });
    1. 最后运行 modern build,就可以看到:
    terminal
    this is example plugin
    Build succeed: 510.684ms
    build over

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

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

    除了以上内容以外,我们还需要了解: