diff --git a/website/docs/en/config/rsbuild/plugins.mdx b/website/docs/en/config/rsbuild/plugins.mdx index 5bb4aeb54..2a2da5a7f 100644 --- a/website/docs/en/config/rsbuild/plugins.mdx +++ b/website/docs/en/config/rsbuild/plugins.mdx @@ -2,7 +2,26 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge'; # plugins -Used to register Rsbuild plugins. +`plugins` is used to register Rsbuild plugins. + +Rslib and Rsbuild share the same plugin system, so you can use Rsbuild plugins in Rslib. + +:::tip +Currently, some plugins have not been adapted to the [bundleless](/guide/basic/output-structure#bundle--bundleless) mode of Rslib, such as the Vue plugin and Svelte plugin. Therefore, these plugins can only be used in the bundle mode. +::: + +## Using Plugins + +You can register Rsbuild plugins in `rslib.config.*` using the `plugins` option, see [Rsbuild - plugins](https://rsbuild.dev/config/plugins). + +```ts title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [pluginReact()], +}); +``` ## Official Plugins @@ -10,50 +29,47 @@ The following are official plugins that can be used in Rsbuild, and applicable t ### For React -Plugins available for the React framework: +Plugins available for React: - [React Plugin](https://rsbuild.dev/plugins/list/plugin-react): Provides support for React. - [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr): Support convert SVG to React components. - [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components): Provide compile-time support for styled-components. -{/* ### For Vue */} +### For Vue -{/* Plugins available for the Vue framework: */} +Plugins available for Vue: -{/* - [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components). */} -{/* - [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax. */} -{/* - [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components). */} -{/* - [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax. */} +- [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components). +- [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax. +- [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components). +- [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax. ### For Preact -Plugins available for the Preact framework: +Plugins available for Preact: - [Preact Plugin](https://rsbuild.dev/plugins/list/plugin-preact): Provides support for Preact. -{/* ### For Svelte */} +### For Svelte -{/* Plugins available for the Svelte framework: */} +Plugins available for Svelte: -{/* - [Svelte Plugin](https://rsbuild.dev/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files). */} +- [Svelte Plugin](https://rsbuild.dev/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files). -{/* ### For Solid */} +### For Solid -{/* Plugins available for the Solid framework: */} +Plugins available for Solid: -{/* - [Solid Plugin](https://rsbuild.dev/plugins/list/plugin-solid): Provides support for Solid. */} +- [Solid Plugin](https://rsbuild.dev/plugins/list/plugin-solid): Provides support for Solid. ### Common The following are common framework-agnostic plugins: -{/* - [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry): Used to automatically resend requests when static assets fail to load. */} - - [Babel Plugin](https://rsbuild.dev/plugins/list/plugin-babel): Provides support for Babel transpilation capabilities. - [Sass Plugin](https://rsbuild.dev/plugins/list/plugin-sass): Use Sass as the CSS preprocessor. - [Less Plugin](https://rsbuild.dev/plugins/list/plugin-less): Use Less as the CSS preprocessor. - [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor. - {/* - [Basic SSL Plugin](https://github.com/rspack-contrib/rsbuild-plugin-basic-ssl): Generate an untrusted, self-signed certificate for the HTTPS server. */} - [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint): Run ESLint checks during the compilation. - [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check): Run TypeScript type checker on a separate process. - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image assets. diff --git a/website/docs/zh/config/rsbuild/plugins.mdx b/website/docs/zh/config/rsbuild/plugins.mdx index 5319b531e..3f7f4b836 100644 --- a/website/docs/zh/config/rsbuild/plugins.mdx +++ b/website/docs/zh/config/rsbuild/plugins.mdx @@ -1,3 +1,96 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge'; # plugins + +`plugins` 选项用于注册 Rsbuild 插件。 + +Rslib 与 Rsbuild 共享同一套插件系统,因此你可以在 Rslib 中使用 Rsbuild 插件。 + +:::tip +目前部分插件还未适配 Rslib 的 [bundleless](/guide/basic/output-structure#bundle--bundleless) 模式,比如 Vue 插件和 Svelte 插件。因此,这些插件只能在 bundle 模式下使用。 +::: + +## 使用插件 + +你可以在 `rslib.config.*` 中通过 `plugins` 选项来注册 Rsbuild 插件,详见 [Rsbuild - plugins](https://rsbuild.dev/zh/config/plugins)。 + +```ts title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [pluginReact()], +}); +``` + +## 官方插件 + +下面是 Rsbuild 官方提供的插件,适用于 Rsbuild 和 Rslib。 + +### React + +适用于 React 的插件有: + +- [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react):提供对 React 的支持。 +- [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr):支持将 SVG 图片转换为一个 React 组件使用。 +- [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components):提供对 styled-components 的编译时支持。 + +### Vue + +适用于 Vue 的插件有: + +- [Vue 插件](https://rsbuild.dev/zh/plugins/list/plugin-vue):提供对 Vue 3 SFC(单文件组件)的支持。 +- [Vue JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx):提供对 Vue 3 JSX / TSX 语法的支持。 +- [Vue 2 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2):提供对 Vue 2 SFC(单文件组件)的支持。 +- [Vue 2 JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx):提供对 Vue 2 JSX / TSX 语法的支持。 + +### Preact + +适用于 Preact 的插件有: + +- [Preact 插件](https://rsbuild.dev/zh/plugins/list/plugin-preact):提供对 Preact 的支持。 + +### Svelte + +适用于 Svelte 的插件有: + +- [Svelte 插件](https://rsbuild.dev/zh/plugins/list/plugin-svelte):提供对 Svelte 组件(`.svelte` 文件)的支持。 + +### Solid + +适用于 Solid 的插件有: + +- [Solid 插件](https://rsbuild.dev/zh/plugins/list/plugin-solid):提供对 Solid 的支持。 + +### Common + +以下是与框架无关的通用插件: + +- [Babel 插件](https://rsbuild.dev/zh/plugins/list/plugin-babel):提供对 Babel 转译能力的支持。 +- [Sass 插件](https://rsbuild.dev/zh/plugins/list/plugin-sass):使用 Sass 作为 CSS 预处理器。 +- [Less 插件](https://rsbuild.dev/zh/plugins/list/plugin-less):使用 Less 作为 CSS 预处理器。 +- [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus):使用 Stylus 作为 CSS 预处理器。 +- [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint):用于在编译过程中运行 ESLint 检查。 +- [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check):用于在单独的进程中运行 TypeScript 类型检查。 +- [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress):压缩图片资源。 +- [MDX 插件](https://github.com/rspack-contrib/rsbuild-plugin-mdx):提供 MDX 支持。 +- [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill):用于注入 Node 核心模块在浏览器端的 polyfills。 +- [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build):用于 monorepo 场景,支持引用其他子目录的源代码,并完成构建和热更新。 +- [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax):检查构建产物的语法兼容性,判断是否存在导致兼容性问题的高级语法。 +- [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer):用于自定义 CSS 压缩工具,切换到 [cssnano](https://github.com/cssnano/cssnano) 或其他工具进行 CSS 压缩。 +- [Typed CSS Modules 插件](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules):用于为 CSS Modules 文件生成类型声明。 +- [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug):提供对 Pug 模板引擎的支持。 +- [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem):用于实现移动端页面的 rem 自适应布局。 +- [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd):用于构建 UMD 格式的产物。 +- [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml):引用 YAML 文件,并将其转换为 JavaScript 对象。 +- [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml):引用 TOML 文件,并将其转换为 JavaScript 对象。 + +:::tip +你可以在 [web-infra-dev/rsbuild](https://github.com/web-infra-dev/rsbuild) 和 [rspack-contrib](https://github.com/rspack-contrib) 中找到这些插件的源代码。 +::: + +## 社区插件 + +你可以在 [awesome-rspack - Rsbuild Plugins](https://github.com/web-infra-dev/awesome-rspack?tab=readme-ov-file#rsbuild-plugins) 中查看社区提供的 Rsbuild 插件。 + +也可以在 npm 上搜索 [rsbuild-plugin](https://www.npmjs.com/search?q=rsbuild-plugin&ranking=popularity) 关键词来发现更多 Rsbuild 插件。