mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(CLI): support for configuring Rsbuild (#12809)
This commit is contained in:
neverland
GitHub
parent
6744198fd8
commit
ec9cb2be36
@ -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
|
||||
|
||||
@ -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'`
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user