fix(vant-cli): pnpm compatibility (#10214)

* fix(vant-cli): pnpm compatibility

* chore: clean code, semantic naming

packages/vant-cli/src/common/constant.ts

@@ -36,11 +36,7 @@ export const SITE_SRC_DIR = join(__dirname, '..', '..', 'site');
 // Dist files
 export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js');
 export const PACKAGE_STYLE_FILE = join(DIST_DIR, 'package-style.css');
-export const SITE_MOBILE_SHARED_FILE = join(DIST_DIR, 'site-mobile-shared.js');
-export const SITE_DESKTOP_SHARED_FILE = join(
-  DIST_DIR,
-  'site-desktop-shared.js'
-);
+
 export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
 
 // Config files

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

@@ -5,27 +5,18 @@ import {
   getViteConfigForSiteDev,
   getViteConfigForSiteProd,
 } from '../config/vite.site.js';
-import { mergeCustomViteConfig, replaceExt } from '../common/index.js';
-import { CSS_LANG } from '../common/css.js';
+import { mergeCustomViteConfig } from '../common/index.js';
 import { genPackageEntry } from './gen-package-entry.js';
-import { genPackageStyle } from './gen-package-style.js';
-import { genSiteMobileShared } from './gen-site-mobile-shared.js';
-import { genSiteDesktopShared } from './gen-site-desktop-shared.js';
 import { genStyleDepsMap } from './gen-style-deps-map.js';
-import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant.js';
+import { PACKAGE_ENTRY_FILE } from '../common/constant.js';
 
-export async function genSiteEntry(): Promise<void> {
+export function genSiteEntry(): Promise<void> {
   return new Promise((resolve, reject) => {
     genStyleDepsMap()
       .then(() => {
         genPackageEntry({
           outputPath: PACKAGE_ENTRY_FILE,
         });
-        genPackageStyle({
-          outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`),
-        });
-        genSiteMobileShared();
-        genSiteDesktopShared();
         resolve();
       })
       .catch((err) => {

packages/vant-cli/src/compiler/gen-package-style.ts

@@ -6,11 +6,11 @@ import { CSS_LANG, getCssBaseFile } from '../common/css.js';
 import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
 
 type Options = {
-  outputPath: string;
+  outputPath?: string;
   pathResolver?: (path: string) => string;
 };
 
-export function genPackageStyle(options: Options) {
+export function genPackageStyle(options: Options = {}) {
   const require = createRequire(import.meta.url);
   const styleDepsJson = require(STYLE_DEPS_JSON_FILE);
   const ext = '.' + CSS_LANG;
@@ -43,5 +43,9 @@ export function genPackageStyle(options: Options) {
     .filter((item: string) => !!item)
     .join('\n');
 
-  smartOutputFile(options.outputPath, content);
+  if (options.outputPath) {
+    smartOutputFile(options.outputPath, content);
+  } else {
+    return content;
+  }
 }

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

@@ -5,7 +5,6 @@ import {
   isDev,
   pascalize,
   getVantConfig,
-  smartOutputFile,
   normalizePath,
 } from '../common/index.js';
 import {
@@ -13,7 +12,6 @@ import {
   DOCS_DIR,
   getPackageJson,
   VANT_CONFIG_FILE,
-  SITE_DESKTOP_SHARED_FILE,
 } from '../common/constant.js';
 
 type DocumentItem = {
@@ -122,5 +120,5 @@ ${genExportDocuments(documents)}
 ${genExportVersion()}
 `;
 
-  smartOutputFile(SITE_DESKTOP_SHARED_FILE, code);
+  return code;
 }

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

@@ -1,12 +1,11 @@
 import { join } from 'path';
 import { existsSync, readdirSync } from 'fs';
-import { SRC_DIR, SITE_MOBILE_SHARED_FILE } from '../common/constant.js';
+import { SRC_DIR } from '../common/constant.js';
 import {
   pascalize,
   removeExt,
   decamelize,
   getVantConfig,
-  smartOutputFile,
   normalizePath,
 } from '../common/index.js';
 import { CSS_LANG } from '../common/css.js';
@@ -68,7 +67,7 @@ function genCode(components: string[]) {
     }))
     .filter((item) => existsSync(item.path));
 
-  return `import './package-style.${CSS_LANG}';
+  return `import 'package-style.${CSS_LANG}';
 ${genImports(demos)}
 
 ${genExports(demos)}
@@ -80,5 +79,5 @@ export function genSiteMobileShared() {
   const dirs = readdirSync(SRC_DIR);
   const code = genCode(dirs);
 
-  smartOutputFile(SITE_MOBILE_SHARED_FILE, code);
+  return code;
 }

packages/vant-cli/src/config/vite.site.ts

@@ -5,15 +5,14 @@ import vitePluginMd from 'vite-plugin-md';
 import vitePluginVue from '@vitejs/plugin-vue';
 import vitePluginJsx from '@vitejs/plugin-vue-jsx';
 import { setBuildTarget, getVantConfig, isDev } from '../common/index.js';
-import {
-  SITE_DIST_DIR,
-  SITE_MOBILE_SHARED_FILE,
-  SITE_DESKTOP_SHARED_FILE,
-  SITE_SRC_DIR,
-} from '../common/constant.js';
+import { SITE_DIST_DIR, SITE_SRC_DIR } from '../common/constant.js';
 import { injectHtml } from 'vite-plugin-html';
-import type { InlineConfig } from 'vite';
+import type { InlineConfig, PluginOption } from 'vite';
 import type MarkdownIt from 'markdown-it';
+import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js';
+import { genSiteDesktopShared } from '../compiler/gen-site-desktop-shared.js';
+import { genPackageStyle } from '../compiler/gen-package-style.js';
+import { CSS_LANG } from '../common/css.js';
 
 function markdownHighlight(str: string, lang: string) {
   if (lang && hljs.getLanguage(lang)) {
@@ -92,6 +91,46 @@ function getHTMLMeta(vantConfig: any) {
   return '';
 }
 
+function vitePluginGenVantBaseCode(): PluginOption {
+  const virtualMobileModuleId = 'site-mobile-shared';
+  const resolvedMobileVirtualModuleId = `vant-cli:${virtualMobileModuleId}`;
+
+  const virtualDesktopModuleId = 'site-desktop-shared';
+  const resolvedDesktopVirtualModuleId = `vant-cli:${virtualDesktopModuleId}`;
+
+  const virtualPackageStyleModuleId = /package-style/;
+  const resolvedPackageStyleVirtualModuleId = `vant-cli${virtualPackageStyleModuleId}index.${CSS_LANG}`;
+
+  return {
+    name: 'vite-plugin(vant-cli):gen-site-base-code',
+    resolveId(id) {
+      if (id === virtualMobileModuleId) {
+        return resolvedMobileVirtualModuleId;
+      }
+
+      if (id === virtualDesktopModuleId) {
+        return resolvedDesktopVirtualModuleId;
+      }
+
+      if (virtualPackageStyleModuleId.test(id)) {
+        return resolvedPackageStyleVirtualModuleId;
+      }
+    },
+    load(id) {
+      switch (id) {
+        case resolvedMobileVirtualModuleId:
+          return genSiteMobileShared();
+        case resolvedDesktopVirtualModuleId:
+          return genSiteDesktopShared();
+        case resolvedPackageStyleVirtualModuleId:
+          return genPackageStyle();
+        default:
+          break;
+      }
+    },
+  };
+}
+
 export function getViteConfigForSiteDev(): InlineConfig {
   setBuildTarget('site');
 
@@ -105,6 +144,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
     root: SITE_SRC_DIR,
 
     plugins: [
+      vitePluginGenVantBaseCode(),
       vitePluginVue({
         include: [/\.vue$/, /\.md$/],
       }),
@@ -145,13 +185,6 @@ export function getViteConfigForSiteDev(): InlineConfig {
       }),
     ],
 
-    resolve: {
-      alias: {
-        'site-mobile-shared': SITE_MOBILE_SHARED_FILE,
-        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE,
-      },
-    },
-
     server: {
       host: '0.0.0.0',
     },