Introduction#

Modern.js Plugin System#

Modern.js offers a comprehensive plugin system with a complete lifecycle. Plugins can be used to extend different stages of project operation, request handling, rendering, and more.

Usage#

Plugins must be explicitly registered in the configuration file to be effective. When you need to add plugins to Modern.js, you can configure them in the [plugins](/configure/app/plugins.html) field:

// an example for bff
import { appTools, defineConfig } from '@modern-js/app-tools';
import { bffPlugin } from '@modern-js/plugin-bff';

export default defineConfig({
  plugins: [appTools(), bffPlugin()],
});

Official Plugins#

Modern.js offers a range of official plugins, which are integrated with the Modern.js generator. All the functionalities of the official plugins can be enabled by executing the new command. For instance, to enable the BFF (Backend For Frontend) feature:

$ npx modern new
? Please select the operation you want: Enable Features
? Please select the feature name: (Use arrow keys)
  Enable Tailwind CSS
❯ Enable BFF
  Enable SSG
  Enable Micro Frontend
  Enable Unit Test / Integration Test

After the selection is completed, the Modern.js generator will automatically install the corresponding plugins and third-party dependencies. Upon completion of the installation, you will see:

[INFO] Dependency automatic installation succeeded

[INFO] install plugin dependencies success！add follow code to modern.config.ts :

import { bffPlugin } from '@modern-js/plugin-bff';
import { expressPlugin } from '@modern-js/plugin-express';

export default defineConfig({
  ...,
  plugins: [..., bffPlugin(), expressPlugin()],
});

At this point, you can add the plugin to the configuration file according to the output in the console.

Composition#

The Modern.js plugin system is mainly divided into three parts: Hook model, Manager, and Context Sharing Mechanism.

• The Hook model is used to determine the execution logic of the current Hook.
• The Manager controls the execution and scheduling of Hooks.
• The Context Sharing Mechanism is used to pass information between different Hooks.

Currently, Modern.js offers several different Hook models: Pipeline, Waterfall, Workflow.

Based on the Hook model and Manager, Modern.js exposes three sets of plugins: CLI, Runtime, and Server.

Among them, the CLI plugin is the main running flow control model in Modern.js, and most of the features in Modern.js are mainly run through this set of models. The Runtime plugin is mainly responsible for processing the rendering logic of React components. The Server plugin is mainly used for controlling the server lifecycle and user requests.

What Plugins Can Do#

All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can develop plugins to extend more functionality and adapt to complex scenarios, including but not limited to:

• Registering commands
• Modifying Modern.js configuration and validation schema
• Modifying compilation configurations for Webpack/Babel/Less/Sass/Tailwind CSS/...
• Modifying the React components/elements to be rendered at runtime
• Modifying page routing
• Modifying server routing
• Customizing console output
• Customizing dynamic HTML templates
• Customizing Node.js server frameworks
• Customizing React component client/server rendering
• ...

When Modern.js does not currently cover the functionality or scenario that you need, you can develop a custom plugin to implement the related functionality for adapting to special scenarios.