feat(@vant/cli): add external config for bundles (#9947)

packages/vant-cli/src/commands/build.ts

@@ -8,7 +8,7 @@ import { installDependencies } from '../common/manager.js';
 import { compileSfc } from '../compiler/compile-sfc.js';
 import { compileStyle } from '../compiler/compile-style.js';
 import { compileScript } from '../compiler/compile-script.js';
-import { compilePackage } from '../compiler/compile-package.js';
+import { compileBundles } from '../compiler/compile-bundles.js';
 import { genPackageEntry } from '../compiler/gen-package-entry.js';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
 import { genComponentStyle } from '../compiler/gen-component-style.js';
@@ -133,8 +133,7 @@ async function buildPackageStyleEntry() {
 
 async function buildBundledOutputs() {
   setModuleEnv('esmodule');
-  await compilePackage(false);
-  await compilePackage(true);
+  await compileBundles();
   genVeturConfig();
 }
 

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

@@ -0,0 +1,42 @@
+import { build } from 'vite';
+import { getPackageJson } from '../common/constant.js';
+import { mergeCustomViteConfig } from '../common/index.js';
+import { getViteConfigForPackage } from '../config/vite.package.js';
+
+export async function compileBundles() {
+  const dependencies = getPackageJson().dependencies || {};
+  const externals = Object.keys(dependencies);
+
+  const configs = [
+    // umd bundle
+    getViteConfigForPackage({
+      minify: false,
+      formats: ['umd'],
+      external: ['vue'],
+    }),
+    // umd bundle (minified)
+    getViteConfigForPackage({
+      minify: true,
+      formats: ['umd'],
+      external: ['vue'],
+    }),
+    // esm/cjs bundle
+    getViteConfigForPackage({
+      minify: false,
+      formats: ['es', 'cjs'],
+      external: ['vue', ...externals],
+    }),
+    // esm/cjs bundle (minified)
+    // vite will not minify es bundle
+    // see: https://github.com/vuejs/vue-next/issues/2860
+    getViteConfigForPackage({
+      minify: true,
+      formats: ['es', 'cjs'],
+      external: ['vue', ...externals],
+    }),
+  ];
+
+  await Promise.all(
+    configs.map((config) => build(mergeCustomViteConfig(config)))
+  );
+}

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

@@ -1,10 +0,0 @@
-import { build } from 'vite';
-import { mergeCustomViteConfig } from '../common/index.js';
-import { getViteConfigForPackage } from '../config/vite.package.js';
-
-export async function compilePackage(
-  minify: boolean
-): ReturnType<typeof build> {
-  const config = mergeCustomViteConfig(getViteConfigForPackage(minify));
-  return build(config);
-}

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

@@ -1,9 +1,17 @@
 import { join } from 'path';
-import type { InlineConfig } from 'vite';
 import { setBuildTarget } from '../common/index.js';
 import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
+import type { InlineConfig, LibraryFormats } from 'vite';
 
-export function getViteConfigForPackage(minify: boolean): InlineConfig {
+export function getViteConfigForPackage({
+  minify,
+  formats,
+  external,
+}: {
+  minify: boolean;
+  formats: LibraryFormats[];
+  external: string[];
+}): InlineConfig {
   setBuildTarget('package');
 
   const { name } = getVantConfig();
@@ -17,7 +25,7 @@ export function getViteConfigForPackage(minify: boolean): InlineConfig {
       lib: {
         name,
         entry: join(ES_DIR, 'index.js'),
-        formats: ['es', 'cjs', 'umd'],
+        formats,
         fileName: (format: string) => {
           const suffix = format === 'umd' ? '' : `.${format}`;
           return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
@@ -26,7 +34,7 @@ export function getViteConfigForPackage(minify: boolean): InlineConfig {
       // terser has better compression than esbuild
       minify: minify ? 'terser' : false,
       rollupOptions: {
-        external: ['vue'],
+        external,
         output: {
           dir: LIB_DIR,
           exports: 'named',