plugins plugins#

plugins is used to register Rsbuild plugins.

Rslib and Rsbuild share the same plugin system, so you can use Rsbuild plugins in Rslib.

Using Plugins#

You can register Rsbuild plugins in rslib.config.* using the plugins option, see Rsbuild - plugins.

import { defineConfig } from '@rslib/core';
import { pluginReact } from '@rsbuild/plugin-react';

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

Official Plugins#

The following are official plugins that can be used in Rsbuild, and applicable to Rslib.

For React#

Plugins available for React:

• React Plugin: Provides support for React.
• SVGR Plugin: Support convert SVG to React components.
• Styled Components Plugin: Provide compile-time support for styled-components.

For Vue#

Plugins available for Vue:

• Vue Plugin: Provides support for Vue 3 SFC (Single File Components).
• Vue JSX Plugin: Provides support for Vue 3 JSX / TSX syntax.
• Vue2 Plugin: Provides support for Vue 2 SFC (Single File Components).
• Vue2 JSX Plugin: Provides support for Vue 2 JSX / TSX syntax.

For Preact#

Plugins available for Preact:

• Preact Plugin: Provides support for Preact.

For Svelte#

Plugins available for Svelte:

• Svelte Plugin: Provides support for Svelte components (.svelte files).

For Solid#

Plugins available for Solid:

• Solid Plugin: Provides support for Solid.

Common#

The following are common framework-agnostic plugins:

• Babel Plugin: Provides support for Babel transpilation capabilities.
• Sass Plugin: Use Sass as the CSS preprocessor.
• Less Plugin: Use Less as the CSS preprocessor.
• Stylus Plugin: Use Stylus as the CSS preprocessor.
• ESLint Plugin: Run ESLint checks during the compilation.
• Type Check Plugin: Run TypeScript type checker on a separate process.
• Image Compress Plugin: Compress the image assets.
• MDX Plugin: Provide support for MDX.
• Node Polyfill Plugin: Used to inject polyfills of Node core modules in the browser side.
• Source Build Plugin: This plugin is designed for the monorepo scenario. It supports referencing source code from other subdirectories and performs build and hot update.
• Check Syntax Plugin: Check the syntax compatibility of output files and determine if there are any advanced syntaxes that could cause compatibility issues.
• CSS Minimizer Plugin: Used to customize CSS minimizer, switch to cssnano or other tools for CSS compression.
• Typed CSS Modules Plugin: Generate TypeScript declaration file for CSS Modules.
• Pug Plugin: Provides support for the Pug template engine.
• Rem Plugin: Implements the rem adaptive layout for mobile pages.
• UMD Plugin: Generate outputs in UMD format.
• YAML Plugin: Import YAML files and convert them into JavaScript objects.
• TOML Plugin: Import TOML files and convert them into JavaScript objects.

Community Plugins#

You can check out the Rsbuild plugins provided by the community at awesome-rspack - Rsbuild Plugins.

You can also discover more Rsbuild plugins on npm by searching for the keyword rsbuild-plugin.