Using Rsbuild Plugin#

Introduce Rsbuild Plugin#

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.

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.