English

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.

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

. /project

. /project .
├── plugins
│ └── example.ts
├── src/
└── modern.config.ts

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');
        },
      };
    },
  };
};

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()],
});

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.

Quick Start#

Quick Start