Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: translate plugins configuration #549

Merged
merged 1 commit into from
Dec 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 34 additions & 18 deletions website/docs/en/config/rsbuild/plugins.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
93 changes: 93 additions & 0 deletions website/docs/zh/config/rsbuild/plugins.mdx
Original file line number Diff line number Diff line change
@@ -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 插件。
Loading