feat(@vant/cli): using vite to build packages

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

@@ -1,16 +1,6 @@
-import webpack from 'webpack';
+import { build } from 'vite';
-import { getPackageConfig } from '../config/webpack.package';
+import { getViteConfigForPackage } from '../config/vite.config.package';
 
-export async function compilePackage(isMinify: boolean) {
+export async function compilePackage(minify: boolean) {
-  return new Promise<void>((resolve, reject) => {
+  return build(getViteConfigForPackage(minify));
-    const config = getPackageConfig(isMinify);
-
-    webpack(config, (err, stats) => {
-      if (err || (stats?.hasErrors())) {
-        reject(err || stats?.toString());
-      } else {
-        resolve();
-      }
-    });
-  });
 }

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

@@ -0,0 +1,38 @@
+import { join } from 'path';
+import type { InlineConfig } from 'vite';
+import { setBuildTarget } from '../common';
+import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant';
+
+export function getViteConfigForPackage(minify: boolean): InlineConfig {
+  setBuildTarget('package');
+
+  const { name } = getVantConfig();
+
+  return {
+    root: CWD,
+
+    logLevel: 'silent',
+
+    build: {
+      lib: {
+        name,
+        entry: join(ES_DIR, 'index.js'),
+        fileName: (format: string) => {
+          const suffix = format === 'umd' ? '' : `.${format}`;
+          return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
+        },
+      },
+      minify,
+      rollupOptions: {
+        external: ['vue'],
+        output: {
+          dir: LIB_DIR,
+          exports: 'named',
+          globals: {
+            vue: 'Vue',
+          },
+        },
+      },
+    },
+  };
+}

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

@@ -1,43 +0,0 @@
-import { merge } from 'webpack-merge';
-import { join } from 'path';
-import { baseConfig } from './webpack.base';
-import { WebpackConfig } from '../common/types';
-import { getVantConfig, getWebpackConfig, setBuildTarget } from '../common';
-import { LIB_DIR, ES_DIR } from '../common/constant';
-
-export function getPackageConfig(isMinify: boolean): WebpackConfig {
-  const { name } = getVantConfig();
-
-  setBuildTarget('package');
-
-  return getWebpackConfig(
-    merge(baseConfig as any, {
-      mode: 'production',
-      entry: {
-        [name]: join(ES_DIR, 'index.js'),
-      },
-      stats: 'none',
-      output: {
-        path: LIB_DIR,
-        library: name,
-        libraryTarget: 'umd',
-        filename: isMinify ? '[name].min.js' : '[name].js',
-        umdNamedDefine: true,
-        // https://github.com/webpack/webpack/issues/6522
-        globalObject: "typeof self !== 'undefined' ? self : this",
-      },
-      externals: {
-        vue: {
-          root: 'Vue',
-          commonjs: 'vue',
-          commonjs2: 'vue',
-          amd: 'vue',
-        },
-      },
-      performance: false,
-      optimization: {
-        minimize: isMinify,
-      },
-    })
-  );
-}