From fe07c1072955afcfd981c1daf944bfd17a96983b Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 5 Nov 2022 20:39:51 +0800 Subject: [PATCH] feat(cli): support vite.config.ts (#11223) --- packages/vant-cli/docs/config.md | 11 +++++--- packages/vant-cli/docs/config.zh-CN.md | 11 +++++--- packages/vant-cli/src/common/index.ts | 26 ++++++++++++++++--- .../vant-cli/src/compiler/compile-bundles.ts | 9 +++++-- .../vant-cli/src/compiler/compile-site.ts | 10 +++++-- 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md index 047161d21..b20e414f8 100644 --- a/packages/vant-cli/docs/config.md +++ b/packages/vant-cli/docs/config.md @@ -177,17 +177,16 @@ When set to `true`, `export * from 'xxx'` will be used to export all modules and ### build.configureVite -- Type: `(config: InlineConfig): InlineConfig` +- Type: `(config: InlineConfig): InlineConfig | undefined` - Default: `undefined` -Custom vite config(`@vant/cli>= 4.0.0`) +Custom [vite config](https://vitejs.dev/config/), requires `@vant/cli>= 4.0.0`. ```js module.exports = { build: { configureVite(config) { - // add vite plugin - config.plugins.push(vitePluginXXX); + config.server.port = 3000; return config; }, }, @@ -214,6 +213,10 @@ module.exports = { }; ``` +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 - Type: `'npm' | 'yarn' | 'pnpm'` diff --git a/packages/vant-cli/docs/config.zh-CN.md b/packages/vant-cli/docs/config.zh-CN.md index c1e01715c..26d11b680 100644 --- a/packages/vant-cli/docs/config.zh-CN.md +++ b/packages/vant-cli/docs/config.zh-CN.md @@ -177,17 +177,16 @@ module.exports = { ### build.configureVite -- Type: `(config: InlineConfig): InlineConfig` +- Type: `(config: InlineConfig): InlineConfig | undefined` - Default: `undefined` -vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。 +vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 [vite 配置](https://vitejs.dev/config/)（从 4.0.0 版本开始支持）。 ```js module.exports = { build: { configureVite(config) { - // 添加一个自定义插件 - config.plugins.push(vitePluginXXX); + config.server.port = 3000; return config; }, }, @@ -216,6 +215,10 @@ module.exports = { }; ``` +注意，由于 `vant.config.mjs` 文件会被打包到文档网站的代码中，因此 `configureVite` 中不允许引用 vite 插件。 + +如果需要配置 vite 插件，可以在 `vant.config.mjs` 的同级目录下创建 `vite.config.ts` 文件，在该文件中你可以添加任意的 vite 配置（该特性从 @vant/cli 5.1.0 版本开始支持）。 + ### build.packageManager - Type: `'npm' | 'yarn' | 'pnpm'` diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index da0add89f..3abefae87 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/packages/vant-cli/src/common/index.ts @@ -1,7 +1,7 @@ import fse from 'fs-extra'; import { sep, join } from 'path'; import { SRC_DIR, getVantConfig } from './constant.js'; -import type { InlineConfig } from 'vite'; +import { InlineConfig, loadConfigFromFile, mergeConfig } from 'vite'; const { lstatSync, existsSync, readdirSync, readFileSync, outputFileSync } = fse; @@ -114,13 +114,33 @@ export function smartOutputFile(filePath: string, content: string) { outputFileSync(filePath, content); } -export function mergeCustomViteConfig(config: InlineConfig): InlineConfig { +export async function mergeCustomViteConfig( + config: InlineConfig, + mode: 'production' | 'development' +): Promise { const vantConfig = getVantConfig(); const configureVite = vantConfig.build?.configureVite; + const userConfig = await loadConfigFromFile( + { + mode, + command: mode === 'development' ? 'serve' : 'build', + }, + undefined, + process.cwd() + ); + if (configureVite) { - return configureVite(config) || config; + const ret = configureVite(config); + if (ret) { + config = ret; + } } + + if (userConfig) { + return mergeConfig(config, userConfig.config); + } + return config; } diff --git a/packages/vant-cli/src/compiler/compile-bundles.ts b/packages/vant-cli/src/compiler/compile-bundles.ts index ef0894175..caf525c19 100644 --- a/packages/vant-cli/src/compiler/compile-bundles.ts +++ b/packages/vant-cli/src/compiler/compile-bundles.ts @@ -34,8 +34,13 @@ export async function compileBundles() { getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS; await Promise.all( - bundleOptions.map((config) => - build(mergeCustomViteConfig(getViteConfigForPackage(config))) + bundleOptions.map(async (config) => + build( + await mergeCustomViteConfig( + getViteConfigForPackage(config), + 'production' + ) + ) ) ); } diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts index ed92db3ec..efdc6307a 100644 --- a/packages/vant-cli/src/compiler/compile-site.ts +++ b/packages/vant-cli/src/compiler/compile-site.ts @@ -29,10 +29,16 @@ export function genSiteEntry(): Promise { export async function compileSite(production = false) { await genSiteEntry(); if (production) { - const config = mergeCustomViteConfig(getViteConfigForSiteProd()); + const config = await mergeCustomViteConfig( + getViteConfigForSiteProd(), + 'production' + ); await build(config); } else { - const config = mergeCustomViteConfig(getViteConfigForSiteDev()); + const config = await mergeCustomViteConfig( + getViteConfigForSiteDev(), + 'development' + ); const server = await createServer(config); await server.listen(config.server?.port);