docs: translate plugins configuration (#549)

web-infra-dev · Dec 11, 2024 · e3f98f1 · e3f98f1
1 parent e4cc8f2
commit e3f98f1
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 18 deletions.
diff --git a/website/docs/en/config/rsbuild/plugins.mdx b/website/docs/en/config/rsbuild/plugins.mdx
@@ -2,58 +2,74 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
 
 # plugins <RsbuildDocBadge path="/config/plugins" text="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
 
 The following are official plugins that can be used in Rsbuild, and applicable to Rslib.
 
 ### 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
@@ -1,3 +1,96 @@
 import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
 
 # plugins <RsbuildDocBadge path="/config/plugins" text="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 插件。