Skip to content

Commit e3f98f1

Browse files
chenjiahanchenjiahan
authored
docs: translate plugins configuration (#549)
1 parent e4cc8f2 commit e3f98f1

File tree

2 files changed

+127
-18
lines changed

2 files changed

+127
-18
lines changed

‎website/docs/en/config/rsbuild/plugins.mdx

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,74 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
22

33
# plugins <RsbuildDocBadge path="/config/plugins" text="plugins" />
44

5-
Used to register Rsbuild plugins.
5+
`plugins` is used to register Rsbuild plugins.
6+
7+
Rslib and Rsbuild share the same plugin system, so you can use Rsbuild plugins in Rslib.
8+
9+
:::tip
10+
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.
11+
:::
12+
13+
## Using Plugins
14+
15+
You can register Rsbuild plugins in `rslib.config.*` using the `plugins` option, see [Rsbuild - plugins](https://rsbuild.dev/config/plugins).
16+
17+
```ts title="rslib.config.ts"
18+
import { defineConfig } from '@rslib/core';
19+
import { pluginReact } from '@rsbuild/plugin-react';
20+
21+
export default defineConfig({
22+
plugins: [pluginReact()],
23+
});
24+
```
625

726
## Official Plugins
827

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

1130
### For React
1231

13-
Plugins available for the React framework:
32+
Plugins available for React:
1433

1534
- [React Plugin](https://rsbuild.dev/plugins/list/plugin-react): Provides support for React.
1635
- [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr): Support convert SVG to React components.
1736
- [Styled Components Plugin](https://github.com/rsbuild-contrib/rsbuild-plugin-styled-components): Provide compile-time support for styled-components.
1837

19-
{/* ### For Vue */}
38+
### For Vue
2039

21-
{/* Plugins available for the Vue framework: */}
40+
Plugins available for Vue:
2241

23-
{/* - [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components). */}
24-
{/* - [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax. */}
25-
{/* - [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components). */}
26-
{/* - [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax. */}
42+
- [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components).
43+
- [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax.
44+
- [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components).
45+
- [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax.
2746

2847
### For Preact
2948

30-
Plugins available for the Preact framework:
49+
Plugins available for Preact:
3150

3251
- [Preact Plugin](https://rsbuild.dev/plugins/list/plugin-preact): Provides support for Preact.
3352

34-
{/* ### For Svelte */}
53+
### For Svelte
3554

36-
{/* Plugins available for the Svelte framework: */}
55+
Plugins available for Svelte:
3756

38-
{/* - [Svelte Plugin](https://rsbuild.dev/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files). */}
57+
- [Svelte Plugin](https://rsbuild.dev/plugins/list/plugin-svelte): Provides support for Svelte components (`.svelte` files).
3958

40-
{/* ### For Solid */}
59+
### For Solid
4160

42-
{/* Plugins available for the Solid framework: */}
61+
Plugins available for Solid:
4362

44-
{/* - [Solid Plugin](https://rsbuild.dev/plugins/list/plugin-solid): Provides support for Solid. */}
63+
- [Solid Plugin](https://rsbuild.dev/plugins/list/plugin-solid): Provides support for Solid.
4564

4665
### Common
4766

4867
The following are common framework-agnostic plugins:
4968

50-
{/* - [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry): Used to automatically resend requests when static assets fail to load. */}
51-
5269
- [Babel Plugin](https://rsbuild.dev/plugins/list/plugin-babel): Provides support for Babel transpilation capabilities.
5370
- [Sass Plugin](https://rsbuild.dev/plugins/list/plugin-sass): Use Sass as the CSS preprocessor.
5471
- [Less Plugin](https://rsbuild.dev/plugins/list/plugin-less): Use Less as the CSS preprocessor.
5572
- [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
56-
{/* - [Basic SSL Plugin](https://github.com/rspack-contrib/rsbuild-plugin-basic-ssl): Generate an untrusted, self-signed certificate for the HTTPS server. */}
5773
- [ESLint Plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint): Run ESLint checks during the compilation.
5874
- [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check): Run TypeScript type checker on a separate process.
5975
- [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image assets.

‎website/docs/zh/config/rsbuild/plugins.mdx

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,96 @@
11
import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
22

33
# plugins <RsbuildDocBadge path="/config/plugins" text="plugins" />
4+
5+
`plugins` 选项用于注册 Rsbuild 插件。
6+
7+
Rslib 与 Rsbuild 共享同一套插件系统，因此你可以在 Rslib 中使用 Rsbuild 插件。
8+
9+
:::tip
10+
目前部分插件还未适配 Rslib 的 [bundleless](/guide/basic/output-structure#bundle--bundleless) 模式，比如 Vue 插件和 Svelte 插件。因此，这些插件只能在 bundle 模式下使用。
11+
:::
12+
13+
## 使用插件
14+
15+
你可以在 `rslib.config.*` 中通过 `plugins` 选项来注册 Rsbuild 插件，详见 [Rsbuild - plugins](https://rsbuild.dev/zh/config/plugins)。
16+
17+
```ts title="rslib.config.ts"
18+
import { defineConfig } from '@rslib/core';
19+
import { pluginReact } from '@rsbuild/plugin-react';
20+
21+
export default defineConfig({
22+
plugins: [pluginReact()],
23+
});
24+
```
25+
26+
## 官方插件
27+
28+
下面是 Rsbuild 官方提供的插件，适用于 Rsbuild 和 Rslib。
29+
30+
### React
31+
32+
适用于 React 的插件有：
33+
34+
- [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react)：提供对 React 的支持。
35+
- [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr)：支持将 SVG 图片转换为一个 React 组件使用。
36+
- [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components)：提供对 styled-components 的编译时支持。
37+
38+
### Vue
39+
40+
适用于 Vue 的插件有：
41+
42+
- [Vue 插件](https://rsbuild.dev/zh/plugins/list/plugin-vue)：提供对 Vue 3 SFC（单文件组件）的支持。
43+
- [Vue JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx)：提供对 Vue 3 JSX / TSX 语法的支持。
44+
- [Vue 2 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2)：提供对 Vue 2 SFC（单文件组件）的支持。
45+
- [Vue 2 JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx)：提供对 Vue 2 JSX / TSX 语法的支持。
46+
47+
### Preact
48+
49+
适用于 Preact 的插件有：
50+
51+
- [Preact 插件](https://rsbuild.dev/zh/plugins/list/plugin-preact)：提供对 Preact 的支持。
52+
53+
### Svelte
54+
55+
适用于 Svelte 的插件有：
56+
57+
- [Svelte 插件](https://rsbuild.dev/zh/plugins/list/plugin-svelte)：提供对 Svelte 组件（`.svelte` 文件）的支持。
58+
59+
### Solid
60+
61+
适用于 Solid 的插件有：
62+
63+
- [Solid 插件](https://rsbuild.dev/zh/plugins/list/plugin-solid)：提供对 Solid 的支持。
64+
65+
### Common
66+
67+
以下是与框架无关的通用插件：
68+
69+
- [Babel 插件](https://rsbuild.dev/zh/plugins/list/plugin-babel)：提供对 Babel 转译能力的支持。
70+
- [Sass 插件](https://rsbuild.dev/zh/plugins/list/plugin-sass)：使用 Sass 作为 CSS 预处理器。
71+
- [Less 插件](https://rsbuild.dev/zh/plugins/list/plugin-less)：使用 Less 作为 CSS 预处理器。
72+
- [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
73+
- [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint)：用于在编译过程中运行 ESLint 检查。
74+
- [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)：用于在单独的进程中运行 TypeScript 类型检查。
75+
- [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：压缩图片资源。
76+
- [MDX 插件](https://github.com/rspack-contrib/rsbuild-plugin-mdx)：提供 MDX 支持。
77+
- [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)：用于注入 Node 核心模块在浏览器端的 polyfills。
78+
- [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)：用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新。
79+
- [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)：检查构建产物的语法兼容性，判断是否存在导致兼容性问题的高级语法。
80+
- [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)：用于自定义 CSS 压缩工具，切换到 [cssnano](https://github.com/cssnano/cssnano) 或其他工具进行 CSS 压缩。
81+
- [Typed CSS Modules 插件](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules)：用于为 CSS Modules 文件生成类型声明。
82+
- [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)：提供对 Pug 模板引擎的支持。
83+
- [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)：用于实现移动端页面的 rem 自适应布局。
84+
- [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
85+
- [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)：引用 YAML 文件，并将其转换为 JavaScript 对象。
86+
- [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)：引用 TOML 文件，并将其转换为 JavaScript 对象。
87+
88+
:::tip
89+
你可以在 [web-infra-dev/rsbuild](https://github.com/web-infra-dev/rsbuild) 和 [rspack-contrib](https://github.com/rspack-contrib) 中找到这些插件的源代码。
90+
:::
91+
92+
## 社区插件
93+
94+
你可以在 [awesome-rspack - Rsbuild Plugins](https://github.com/web-infra-dev/awesome-rspack?tab=readme-ov-file#rsbuild-plugins) 中查看社区提供的 Rsbuild 插件。
95+
96+
也可以在 npm 上搜索 [rsbuild-plugin](https://www.npmjs.com/search?q=rsbuild-plugin&ranking=popularity) 关键词来发现更多 Rsbuild 插件。

0 commit comments

Comments
 (0)