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:
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.