Plugin
In Modern.js, you can directly use two types of plugins: Modern.js framework plugins and Rsbuild plugins.
Modern.js Framework Plugin
Modern.js has its own framework plugin system. You can use Modern.js plugins by configuring the plugins field in modern.config.ts.
Plugin Types
Framework plugins can be categorized into three types:
- CLI Plugins: These are used to provide additional functionality when the Modern.js commands are executed in the application. Examples include adding commands, modifying configuration, and monitoring files. Most build-related capabilities can be achieved through CLI plugins.
- Server Plugins: These add extra functionality when the application receives requests. Examples include adding middleware and modifying request responses.
- Runtime Plugins: These provide additional functionality when the application runs React code. Examples include performing initialization actions and wrapping React higher-order components.
Server plugins and Runtime plugins are coming soon.
Developing Plugins
If you need to develop Modern.js framework plugins, you can read Modern.js Plugin System for more information.
Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:
- Modifying Rspack configurations
- Processing new file types
- Modifying or compiling files
- Deploying artifacts
You can register the Rsbuild plugin through the builderPlugins option in modern.config.ts, see builderPlugins for details.
Modern.js has upgraded the build tool to Rsbuild starting from 2.46.0.
If your current version is lower than 2.46.0, you can upgrade by executing npx modern upgrade.
For more information about the Rsbuild plugin system, you can read Rsbuild Official Site - Plugins.
Rsbuild Plugin
Official Plugins
Builtin Plugins
Here are the official Rsbuild plugins built into Modern.js:
| Plugin Name | Introduce | Modern.js Link |
|---|---|---|
| React Plugin | Provides support for React | - |
| SVGR Plugin | Support convert SVG to React components | output.disableSvgr output.svgDefaultExport |
| Styled Components Plugin | Provides compile-time support for styled-components | tools.styledComponents |
| Assets Retry Plugin | Used to automatically resend requests when static assets fail to load | output.assetsRetry |
| Type Check Plugin | Used to run TypeScript type checker on a separate process | output.disableTsChecker tools.tsChecker |
| Node Polyfill Plugin | Used to inject polyfills of Node core modules in the browser side | output.disableNodePolyfill |
| Source Build Plugin | Supports referencing source code from other subdirectories | experiments.sourceBuild |
| Check Syntax Plugin | Used to analyze the syntax compatibility of artifacts | security.checkSyntax |
| CSS Minimizer Plugin | Used to customize CSS minimizer, switch to cssnano or other tools for CSS compression | tools.minifyCss |
| Pug Plugin | Provides support for the Pug template engine | tools.pug |
| Rem Plugin | Implements the rem adaptive layout for mobile pages | output.convertToRem |
| YAML Plugin | Used to import YAML files and convert them into JavaScript objects | TOML File |
| TOML Plugin | Used to import TOML files and convert them into JavaScript objects | YAML File |
Un-builtin Plugins
Here are the official Rsbuild plugins that are not built into Modern.js:
-
Image Compress Plugin: Compress the image resources used in the project.
-
Stylus Plugin: Use Stylus as the CSS preprocessor.
-
UMD Plugin: Used to build outputs in UMD format.