Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

    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.
    . /project
    . /project .
├── plugins
│ └── example.ts
├── src/
└── modern.config.ts
    1. Next add the code for the plugin to the example.ts file.
    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. Then we register the plugin we just wrote via the plugins API.
    . /modern.config.ts
    import { examplePlugin } from '. /plugins/example';
export default defineConfig({
  plugins: [examplePlugin()],
});
    1. Finally, run modern build and you will see:
    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.