feat: create dev server for desktop site

packages/vant-cli/src/compiler/compile-package.ts

@@ -1,5 +1,5 @@
 import { build } from 'vite';
-import { getViteConfigForPackage } from '../config/vite.config.package';
+import { getViteConfigForPackage } from '../config/vite.package';
 
 export async function compilePackage(minify: boolean) {
   return build(getViteConfigForPackage(minify));

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,53 +1,15 @@
-import webpack from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
-import { get } from 'lodash';
-import { getPortPromise } from 'portfinder';
-import { getSiteDevConfig } from '../config/webpack.site.dev';
-import { getSitePrdConfig } from '../config/webpack.site.prd';
+import { createServer } from 'vite';
+import { getViteConfigForSiteDev } from '../config/vite.site';
+import { genSiteEntry } from './vant-cli-site-plugin';
 
-async function runDevServer(
-  port: number,
-  config: ReturnType<typeof getSiteDevConfig>
-) {
-  const host = get(config.devServer, 'host', 'localhost');
-  const server = new WebpackDevServer(
-    {
-      ...config.devServer,
-      port,
-      host,
-    },
-    webpack(config)
-  );
-
-  await server.start();
-}
-
-async function watch() {
-  const config = getSiteDevConfig();
-  const port = await getPortPromise({
-    port: config.devServer.port,
-  });
-  await runDevServer(port, config);
-}
-
-function build() {
-  return new Promise<void>((resolve, reject) => {
-    const config = getSitePrdConfig();
-
-    webpack(config, (err, stats) => {
-      if (err || (stats && stats.hasErrors())) {
-        reject();
-      } else {
-        resolve();
-      }
-    });
-  });
-}
+async function build() {}
 
 export async function compileSite(production = false) {
+  await genSiteEntry();
   if (production) {
     await build();
   } else {
-    await watch();
+    const server = await createServer(getViteConfigForSiteDev());
+    await server.listen();
   }
 }

packages/vant-cli/src/compiler/gen-site-desktop-shared.ts

@@ -1,9 +1,8 @@
 import glob from 'fast-glob';
 import { join, parse } from 'path';
-import { existsSync, readdirSync } from 'fs-extra';
+import { existsSync, readFileSync, readdirSync } from 'fs-extra';
 import {
   pascalize,
-  removeExt,
   getVantConfig,
   smartOutputFile,
   normalizePath,
@@ -90,8 +89,9 @@ function genExportDocuments(items: DocumentItem[]) {
 };`;
 }
 
-function genImportConfig() {
-  return `import config from '${removeExt(normalizePath(VANT_CONFIG_FILE))}';`;
+function genVantConfigContent() {
+  const content = readFileSync(VANT_CONFIG_FILE, 'utf-8');
+  return content.replace('module.exports', 'const config');
 }
 
 function genExportConfig() {
@@ -103,7 +103,7 @@ function genExportVersion() {
 }
 
 function genInstall() {
-  return `import './package-style';`;
+  return `import './package-style.less';`;
 }
 
 function genExportPackageEntry() {
@@ -114,10 +114,11 @@ export function genSiteDesktopShared() {
   const dirs = readdirSync(SRC_DIR);
   const documents = resolveDocuments(dirs);
 
-  const code = `${genImportConfig()}
-${genInstall()}
+  const code = `${genInstall()}
 ${genImportDocuments(documents)}
 
+${genVantConfigContent()}
+
 ${genExportPackageEntry()}
 ${genExportConfig()}
 ${genExportDocuments(documents)}

packages/vant-cli/src/compiler/vant-cli-site-plugin.ts

@@ -1,4 +1,3 @@
-import { Compiler } from 'webpack';
 import { replaceExt } from '../common';
 import { CSS_LANG } from '../common/css';
 import { genPackageEntry } from './gen-package-entry';
@@ -8,8 +7,6 @@ import { genSiteDesktopShared } from './gen-site-desktop-shared';
 import { genStyleDepsMap } from './gen-style-deps-map';
 import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
 
-const PLUGIN_NAME = 'VantCliSitePlugin';
-
 export async function genSiteEntry(): Promise<void> {
   return new Promise((resolve, reject) => {
     genStyleDepsMap()
@@ -30,13 +27,3 @@ export async function genSiteEntry(): Promise<void> {
       });
   });
 }
-
-export class VantCliSitePlugin {
-  apply(compiler: Compiler) {
-    if (process.env.NODE_ENV === 'production') {
-      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, genSiteEntry);
-    } else {
-      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, genSiteEntry);
-    }
-  }
-}