docs: add community plugins guide (#1656)

web-infra-dev · Feb 26, 2024 · 7dc1735 · 7dc1735
1 parent 751c644
commit 7dc1735
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 9 deletions.
diff --git a/packages/core/src/cli/commands.ts b/packages/core/src/cli/commands.ts
@@ -3,7 +3,7 @@ import { existsSync } from 'node:fs';
 import { color, isDev, logger } from '@rsbuild/shared';
 import { program, type Command } from '@rsbuild/shared/commander';
 import { loadEnv } from '../loadEnv';
-import { loadConfig, watchFiles } from './config';
+import { loadConfig, watchFiles } from '../config';
 import type { RsbuildMode } from '..';
 import { onBeforeRestartServer } from '../server/restart';
 

diff --git a/packages/core/src/cli/config.ts → packages/core/src/config.ts b/packages/core/src/cli/config.ts → packages/core/src/config.ts
@@ -8,7 +8,7 @@ import {
   getNodeEnv,
   type RsbuildConfig,
 } from '@rsbuild/shared';
-import { restartDevServer } from '../server/restart';
+import { restartDevServer } from './server/restart';
 
 export type ConfigParams = {
   env: string;

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -6,7 +6,7 @@
 // Core Methods
 export { loadEnv } from './loadEnv';
 export { createRsbuild } from './createRsbuild';
-export { loadConfig, defineConfig } from './cli/config';
+export { loadConfig, defineConfig } from './config';
 
 export const version = RSBUILD_VERSION;
 

diff --git a/packages/document/docs/en/config/plugins.mdx b/packages/document/docs/en/config/plugins.mdx
@@ -1,10 +1,21 @@
 # plugins
 
-Used to register Rsbuild plugins.
+Used to register Rsbuild plugins. Please check the [Plugin List](/plugins/list/index) to discover available plugins.
 
 - **Type:** `RsbuildPlugin[]`
 - **Default:** `undefined`
-- **Example:** Registering the Stylus plugin.
+
+## Example
+
+For example, register the Stylus plugin in Rsbuild.
+
+- Installing the plugin:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @rsbuild/plugin-stylus -D" />
+
+- Registering the plugin:
 
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';

diff --git a/packages/document/docs/en/guide/basic/cli.mdx b/packages/document/docs/en/guide/basic/cli.mdx
@@ -95,7 +95,7 @@ Do not use this as a production server as it's not designed for it.
 Usage: rsbuild preview [options]
 
 Options:
-  --open [url]          open the page in browser on startup
+  -o, --open [url]      open the page in browser on startup
   --port <port>         specify a port number for Rsbuild Server to listen
   --host <host>         specify the host that the Rsbuild Server listens to
   -c --config <config>  specify the configuration file, can be a relative or absolute path

diff --git a/packages/document/docs/en/plugins/list/index.md b/packages/document/docs/en/plugins/list/index.md
@@ -72,3 +72,9 @@ The following are common framework-agnostic plugins:
 :::tip
 You can find the source code of all official plugins in the [web-infra-dev/rsbuild](https://github.com/web-infra-dev/rsbuild) repository.
 :::
+
+## Community Plugins
+
+You can check out the Rsbuild plugins provided by the community at [awesome-rspack - Rsbuild Plugins](https://github.com/web-infra-dev/awesome-rspack?tab=readme-ov-file#rsbuild-plugins).
+
+You can also discover more Rsbuild plugins on npm by searching for the keyword [rsbuild-plugin](https://www.npmjs.com/search?q=rsbuild-plugin&ranking=popularity).
diff --git a/packages/document/docs/zh/config/plugins.mdx b/packages/document/docs/zh/config/plugins.mdx
@@ -1,10 +1,21 @@
 # plugins
 
-用于注册 Rsbuild 插件。
+用于注册 Rsbuild 插件，请查看[插件列表](/plugins/list/index) 来发现可用的插件。
 
 - **类型：** `RsbuildPlugin[]`
 - **默认值：** `undefined`
-- **示例：** 注册 Stylus 插件。
+
+## 示例
+
+比如注册 Rsbuild 的 Stylus 插件。
+
+- 安装插件：
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @rsbuild/plugin-stylus -D" />
+
+- 注册插件：
 
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';

diff --git a/packages/document/docs/zh/guide/basic/cli.mdx b/packages/document/docs/zh/guide/basic/cli.mdx
@@ -95,7 +95,7 @@ Options:
 Usage: rsbuild preview [options]
 
 Options:
-  --open [url]          启动时是否在浏览器中打开页面
+  -o, --open [url]      启动时是否在浏览器中打开页面
   --port <port>         设置 Rsbuild Server 监听的端口号
   --host <host>         指定 Rsbuild Server 启动时监听的 host
   -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径

diff --git a/packages/document/docs/zh/plugins/list/index.md b/packages/document/docs/zh/plugins/list/index.md
@@ -72,3 +72,9 @@
 :::tip
 你可以在 [web-infra-dev/rsbuild](https://github.com/web-infra-dev/rsbuild) 仓库中找到所有官方插件的源代码。
 :::
+
+## 社区插件
+
+你可以在 [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 插件。