From 858584271205d7ca2f9e82e6254ce9da7b10729b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 27 Oct 2021 14:46:37 +0800
Subject: [PATCH] feat(@vant/cli): support custom vite config (#9738)

---
 packages/vant-cli/docs/config.md              | 42 +++++++++++++++++++
 packages/vant-cli/src/common/index.ts         | 12 ++++++
 .../vant-cli/src/compiler/compile-package.ts  |  4 +-
 .../vant-cli/src/compiler/compile-site.ts     |  8 ++--
 packages/vant-cli/src/config/vite.site.ts     |  2 +-
 5 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md
index d903cc047..35b78c705 100644
--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@@ -7,6 +7,7 @@
     - [build.site.publicPath](#buildsitepublicpath)
     - [build.srcDir](#buildsrcdir)
     - [build.namedExport](#buildnamedexport)
+    - [build.configureVite](#buildconfigurevite)
     - [site.title](#sitetitle)
     - [site.logo](#sitelogo)
     - [site.description](#sitedescription)
@@ -138,6 +139,47 @@ module.exports = {
 
 开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。
 
+### build.configureVite
+
+- Type: `(config: InlineConfig): InlineConfig`
+- Default: `undefined`
+
+vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。
+
+```js
+module.exports = {
+  build: {
+    configureVite(config) {
+      // 添加一个自定义插件
+      config.plugins.push(vitePluginXXX);
+      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;
+    },
+  },
+};
+```
+
 ### site.title
 
 - Type: `string`
diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts
index f27edf546..de09433a7 100644
--- a/packages/vant-cli/src/common/index.ts
+++ b/packages/vant-cli/src/common/index.ts
@@ -1,3 +1,4 @@
+import { get } from 'lodash';
 import { sep, join } from 'path';
 import {
   lstatSync,
@@ -7,6 +8,7 @@ import {
   outputFileSync,
 } from 'fs-extra';
 import { SRC_DIR, getVantConfig } from './constant';
+import type { InlineConfig } from 'vite';
 
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@@ -134,4 +136,14 @@ export function smartOutputFile(filePath: string, content: string) {
   outputFileSync(filePath, content);
 }
 
+export function mergeCustomViteConfig(config: InlineConfig) {
+  const vantConfig = getVantConfig();
+  const configureVite = get(vantConfig, 'build.configureVite');
+
+  if (configureVite) {
+    return configureVite(config);
+  }
+  return config;
+}
+
 export { getVantConfig };
diff --git a/packages/vant-cli/src/compiler/compile-package.ts b/packages/vant-cli/src/compiler/compile-package.ts
index a0c3076b5..36ffc4285 100644
--- a/packages/vant-cli/src/compiler/compile-package.ts
+++ b/packages/vant-cli/src/compiler/compile-package.ts
@@ -1,6 +1,8 @@
 import { build } from 'vite';
+import { mergeCustomViteConfig } from '../common';
 import { getViteConfigForPackage } from '../config/vite.package';
 
 export async function compilePackage(minify: boolean) {
-  return build(getViteConfigForPackage(minify));
+  const config = mergeCustomViteConfig(getViteConfigForPackage(minify));
+  return build(config);
 }
diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts
index ebc7b8598..1c33f185d 100644
--- a/packages/vant-cli/src/compiler/compile-site.ts
+++ b/packages/vant-cli/src/compiler/compile-site.ts
@@ -4,7 +4,7 @@ import {
   getViteConfigForSiteDev,
   getViteConfigForSiteProd,
 } from '../config/vite.site';
-import { replaceExt } from '../common';
+import { mergeCustomViteConfig, replaceExt } from '../common';
 import { CSS_LANG } from '../common/css';
 import { genPackageEntry } from './gen-package-entry';
 import { genPackageStyle } from './gen-package-style';
@@ -37,9 +37,11 @@ export async function genSiteEntry(): Promise<void> {
 export async function compileSite(production = false) {
   await genSiteEntry();
   if (production) {
-    await build(getViteConfigForSiteProd());
+    const config = mergeCustomViteConfig(getViteConfigForSiteProd());
+    await build(config);
   } else {
-    const server = await createServer(getViteConfigForSiteDev());
+    const config = mergeCustomViteConfig(getViteConfigForSiteDev());
+    const server = await createServer(config);
     await server.listen();
 
     const { version } = require('vite/package.json');
diff --git a/packages/vant-cli/src/config/vite.site.ts b/packages/vant-cli/src/config/vite.site.ts
index c6b823eda..627f8c280 100644
--- a/packages/vant-cli/src/config/vite.site.ts
+++ b/packages/vant-cli/src/config/vite.site.ts
@@ -92,7 +92,7 @@ function getHTMLMeta(vantConfig: any) {
 }
 
 export function getViteConfigForSiteDev(): InlineConfig {
-  setBuildTarget('package');
+  setBuildTarget('site');
 
   const vantConfig = getVantConfig();
   const siteConfig = getSiteConfig(vantConfig);