From ec9cb2be364742819c779ecd24af3f18324b08a3 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 20 Apr 2024 16:30:55 +0800
Subject: [PATCH] feat(CLI): support for configuring Rsbuild (#12809)

---
 packages/vant-cli/docs/config.md              | 53 +++++++------
 packages/vant-cli/docs/config.zh-CN.md        | 75 ++++++++-----------
 .../vant-cli/src/compiler/compile-site.ts     | 10 ++-
 3 files changed, 68 insertions(+), 70 deletions(-)

diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md
index 35b2fbcf9..52ed4a5f6 100644
--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@@ -1,6 +1,8 @@
 # Config
 
 - [Config](#----)
+  - [rsbuild.config.mjs](#rsbuildconfigmjs)
+  - [vite.config.mjs](#viteconfigmjs)
   - [vant.config.mjs](#vantconfigmjs)
     - [name](#name)
     - [build.css.base](#buildcssbase)
@@ -8,7 +10,6 @@
     - [build.site.publicPath](#buildsitepublicpath)
     - [build.srcDir](#buildsrcdir)
     - [build.namedExport](#buildnamedexport)
-    - [build.configureVite](#buildconfigurevite)
     - [build.packageManager](#buildpackagemanager)
     - [site.title](#sitetitle)
     - [site.logo](#sitelogo)
@@ -24,6 +25,34 @@
     - [Default Config](#-----1)
   - [browserslist](#browserslist)
 
+## rsbuild.config.mjs
+
+Vant CLI uses [Rsbuild](https://github.com/web-infra-dev/rsbuild) to build the documentation site. You can create an Rsbuild configuration file in the same directory as `vant.config.mjs`. The contents of the file will be automatically read by Vant CLI.
+
+```js
+// rsbuild.config.mjs or rsbuild.config.ts
+export default {
+  plugins: [
+    // Configure Rsbuild plugins
+  ],
+  dev: {
+    // Options related to local development
+  },
+  html: {
+    // Options related to HTML generation
+  },
+  // Other options
+};
+```
+
+> Please refer to [Configure Rsbuild](https://rsbuild.dev/guide/basic/configure-rsbuild) for more information.
+
+## vite.config.mjs
+
+Vant Cli uses Vite to build component library code. You can create a Vite configuration file in the same directory as `vant.config.mjs`. In this file, you can add any Vite configuration.
+
+> Please refer to [Vite Configuration](https://vitejs.dev/config/) to learn more.
+
 ## vant.config.mjs
 
 `vant.config.mjs` includes bundle and documentation site config. Please create this file and place it in your project root directory. Here is a basic example:
@@ -192,28 +221,6 @@ module.exports = {
 };
 ```
 
-```js
-module.exports = {
-  build: {
-    configureVite(config) {
-      const { BUILD_TARGET } = process.env;
-
-      if (BUILD_TARGET === 'package') {
-        // component library bundle config
-      }
-
-      if (BUILD_TARGET === 'site') {
-        // documentation site bundle config
-      }
-
-      return config;
-    },
-  },
-};
-```
-
-Note that you are not allowed to import vite plugins in `vant.config.mjs`, because the file will be bundled into the website code.
-
 If you need to configure some vite plugins, please create a `vite.config.ts` file in the same directory of `vant.config.mjs`, in which you can add any vite configuration (this feature requires @vant/cli 5.1.0).
 
 ### build.packageManager
diff --git a/packages/vant-cli/docs/config.zh-CN.md b/packages/vant-cli/docs/config.zh-CN.md
index 88bd40241..25ecd2bd6 100644
--- a/packages/vant-cli/docs/config.zh-CN.md
+++ b/packages/vant-cli/docs/config.zh-CN.md
@@ -1,6 +1,8 @@
 # 配置指南
 
 - [配置指南](#----)
+  - [rsbuild.config.mjs](#rsbuildconfigmjs)
+  - [vite.config.mjs](#viteconfigmjs)
   - [vant.config.mjs](#vantconfigmjs)
     - [name](#name)
     - [build.css.base](#buildcssbase)
@@ -8,7 +10,6 @@
     - [build.site.publicPath](#buildsitepublicpath)
     - [build.srcDir](#buildsrcdir)
     - [build.namedExport](#buildnamedexport)
-    - [build.configureVite](#buildconfigurevite)
     - [build.packageManager](#buildpackagemanager)
     - [site.title](#sitetitle)
     - [site.logo](#sitelogo)
@@ -24,6 +25,34 @@
     - [默认配置](#-----1)
   - [browserslist](#browserslist)
 
+## rsbuild.config.mjs
+
+Vant CLI 使用 [Rsbuild](https://github.com/web-infra-dev/rsbuild) 来构建文档站点，你可以在 `vant.config.mjs` 的同级目录下创建 Rsbuild 的配置文件，文件内容会被 Vant CLI 自动读取。
+
+```js
+// rsbuild.config.mjs 或 rsbuild.config.ts
+export default {
+  plugins: [
+    // 配置 Rsbuild 插件
+  ],
+  dev: {
+    // 与本地开发有关的选项
+  },
+  html: {
+    // 与 HTML 生成有关的选项
+  },
+  // 其他选项
+};
+```
+
+> 请参考 [配置 Rsbuild](https://rsbuild.dev/zh/guide/basic/configure-rsbuild) 了解更多。
+
+## vite.config.mjs
+
+Vant Cli 使用 Vite 来构建组件库代码，你可以在 `vant.config.mjs` 的同级目录下创建 Vite 的配置文件，在该文件中你可以添加任意的 Vite 配置。
+
+> 请参考 [Vite 配置](https://vitejs.dev/config/) 了解更多。
+
 ## vant.config.mjs
 
 `vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
@@ -174,50 +203,6 @@ module.exports = {
 
 开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。
 
-### build.configureVite
-
-- Type: `(config: InlineConfig): InlineConfig | undefined`
-- Default: `undefined`
-
-vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)（从 4.0.0 版本开始支持）。
-
-```js
-module.exports = {
-  build: {
-    configureVite(config) {
-      config.server.port = 3000;
-      return config;
-    },
-  },
-};
-```
-
-在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分：
-
-```js
-module.exports = {
-  build: {
-    configureVite(config) {
-      const { BUILD_TARGET } = process.env;
-
-      if (BUILD_TARGET === 'package') {
-        // 修改组件库构建配置
-      }
-
-      if (BUILD_TARGET === 'site') {
-        // 修改文档站点构建配置
-      }
-
-      return config;
-    },
-  },
-};
-```
-
-注意，由于 `vant.config.mjs` 文件会被打包到文档网站的代码中，因此 `configureVite` 中不允许引用 vite 插件。
-
-如果需要配置 vite 插件，可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件，在该文件中你可以添加任意的 vite 配置（该特性从 @vant/cli 5.1.0 版本开始支持）。
-
 ### build.packageManager
 
 - Type: `'npm' | 'yarn' | 'pnpm' | 'bun'`
diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts
index 6cec54a0d..12dd7c714 100644
--- a/packages/vant-cli/src/compiler/compile-site.ts
+++ b/packages/vant-cli/src/compiler/compile-site.ts
@@ -3,7 +3,11 @@ import { getVantConfig, setBuildTarget } from '../common/index.js';
 import { getTemplateParams } from './get-template-params.js';
 import { genPackageEntry } from './gen-package-entry.js';
 import { genStyleDepsMap } from './gen-style-deps-map.js';
-import type { RsbuildConfig } from '@rsbuild/core';
+import {
+  loadConfig,
+  mergeRsbuildConfig,
+  type RsbuildConfig,
+} from '@rsbuild/core';
 import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module';
 import { CSS_LANG } from '../common/css.js';
 import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
@@ -95,9 +99,11 @@ export async function compileSite(isProd = false) {
     },
   };
 
+  const userRsbuildConfig = await loadConfig({ cwd: process.cwd() });
+
   const rsbuild = await createRsbuild({
     cwd: SITE_SRC_DIR,
-    rsbuildConfig,
+    rsbuildConfig: mergeRsbuildConfig(rsbuildConfig, userRsbuildConfig.content),
   });
 
   if (isProd) {