feat(cli): add build-site command

packages/vant-cli/site/desktop/App.vue

@@ -16,9 +16,10 @@ export default {
   },
 
   data() {
+    const publicPath = (config.site && config.site.publicPath) || '/';
     return {
       config: config.site,
-      simulator: `mobile.html${location.hash}`
+      simulator: `${publicPath}mobile.html${location.hash}`
     };
   }
 };

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

@@ -0,0 +1,7 @@
+import { setNodeEnv } from '../common';
+import { compileSite } from '../compiler/compile-site';
+
+export async function buildSite() {
+  setNodeEnv('production');
+  await compileSite(true);
+}

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

@@ -1,12 +1,11 @@
-import webpack from 'webpack';
 import { start, error, success } from 'signale';
-import { packageConfig } from '../config/webpack.package';
 import { join } from 'path';
 import { clean } from './clean';
 import { remove, copy, readdirSync } from 'fs-extra';
 import { compileJs } from '../compiler/compile-js';
 import { compileSfc } from '../compiler/compile-sfc';
 import { compileStyle } from '../compiler/compile-style';
+import { compilePackage } from '../compiler/compile-package';
 import { genPackageEntry } from '../compiler/gen-package-entry';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map';
 import { genComponentStyle } from '../compiler/gen-component-style';
@@ -14,10 +13,12 @@ import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant';
 import {
   isDir,
   isSfc,
+  isStyle,
+  isScript,
   isDemoDir,
   isTestDir,
-  isScript,
+  setNodeEnv,
-  isStyle
+  setModuleEnv
 } from '../common';
 
 async function compileDir(dir: string) {
@@ -52,22 +53,6 @@ async function compileDir(dir: string) {
   );
 }
 
-function setModuleEnv(value: string) {
-  process.env.BABEL_MODULE = value;
-}
-
-function buildPackage(isMinify: boolean) {
-  return new Promise((resolve, reject) => {
-    webpack(packageConfig(isMinify), (err, stats) => {
-      if (err || stats.hasErrors()) {
-        reject();
-      } else {
-        resolve();
-      }
-    });
-  });
-}
-
 export async function buildESModuleOutputs() {
   await copy(SRC_DIR, ES_DIR);
 
@@ -113,8 +98,8 @@ export async function buildPackedOutputs() {
 
   try {
     genPackageEntry();
-    await buildPackage(false);
+    await compilePackage(false);
-    await buildPackage(true);
+    await compilePackage(true);
     success('Build packed outputs');
   } catch (err) {
     error('Build packed outputs');
@@ -122,6 +107,7 @@ export async function buildPackedOutputs() {
 }
 
 export async function build() {
+  setNodeEnv('production');
   await clean();
   await buildESModuleOutputs();
   await buildCommonjsOutputs();

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

@@ -1,47 +1,10 @@
-import webpack from 'webpack';
+
-import WebpackDevServer from 'webpack-dev-server';
-import { getPort } from 'portfinder';
 import { clean } from '../commands/clean';
-import { buildESModuleOutputs } from './build';
+import { setNodeEnv } from '../common';
-import { siteDevConfig } from '../config/webpack.site.dev';
+import { compileSite } from '../compiler/compile-site';
-import { genPackageEntry } from '../compiler/gen-package-entry';
-import { genPacakgeStyle } from '../compiler/gen-package-style';
-import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared';
-import { genSiteDesktopShared } from '../compiler/gen-site-desktop-shared';
-import { genStyleDepsMap } from '../compiler/gen-style-deps-map';
-
-function runWebpack() {
-  const server = new WebpackDevServer(
-    webpack(siteDevConfig),
-    (siteDevConfig as any).devServer
-  );
-
-  getPort(
-    {
-      port: 8080
-    },
-    (err, port) => {
-      if (err) {
-        console.log(err);
-        return;
-      }
-
-      server.listen(port, 'localhost', (err?: Error) => {
-        if (err) {
-          console.log(err);
-        }
-      });
-    }
-  );
-}
 
 export async function dev() {
+  setNodeEnv('development');
   await clean();
-  await buildESModuleOutputs();
+  await compileSite();
-  genStyleDepsMap();
-  genPackageEntry();
-  genPacakgeStyle();
-  genSiteMobileShared();
-  genSiteDesktopShared();
-  runWebpack();
 }

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-template-curly-in-string */
-import { build } from './build';
 // @ts-ignore
 import releaseIt from 'release-it';
+import { build } from './build';
 
 export async function release() {
   await build();

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

@@ -88,4 +88,12 @@ export function getWebpackConfig(): object {
   return {};
 }
 
+export function setModuleEnv(value: 'esmodule' | 'commonjs') {
+  process.env.BABEL_MODULE = value;
+}
+
+export function setNodeEnv(value: 'production' | 'development') {
+  process.env.NODE_ENV = value;
+}
+
 export { decamelize };

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

@@ -0,0 +1,14 @@
+import webpack from 'webpack';
+import { packageConfig } from '../config/webpack.package';
+
+export async function compilePackage(isMinify: boolean) {
+  return new Promise((resolve, reject) => {
+    webpack(packageConfig(isMinify), (err, stats) => {
+      if (err || stats.hasErrors()) {
+        reject();
+      } else {
+        resolve();
+      }
+    });
+  });
+}

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

@@ -0,0 +1,63 @@
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import { getPort } from 'portfinder';
+import { buildESModuleOutputs } from '../commands/build';
+import { genPackageEntry } from './gen-package-entry';
+import { genPacakgeStyle } from './gen-package-style';
+import { genSiteMobileShared } from './gen-site-mobile-shared';
+import { genSiteDesktopShared } from './gen-site-desktop-shared';
+import { genStyleDepsMap } from './gen-style-deps-map';
+import { siteDevConfig } from '../config/webpack.site.dev';
+import { sitePrdConfig } from '../config/webpack.site.prd';
+
+function watch() {
+  const server = new WebpackDevServer(
+    webpack(siteDevConfig),
+    (siteDevConfig as any).devServer
+  );
+
+  getPort(
+    {
+      port: 8080
+    },
+    (err, port) => {
+      if (err) {
+        console.log(err);
+        return;
+      }
+
+      server.listen(port, 'localhost', (err?: Error) => {
+        if (err) {
+          console.log(err);
+        }
+      });
+    }
+  );
+}
+
+function build() {
+  return new Promise((resolve, reject) => {
+    webpack(sitePrdConfig, (err, stats) => {
+      if (err || stats.hasErrors()) {
+        reject();
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+export async function compileSite(production = false) {
+  await buildESModuleOutputs();
+  genStyleDepsMap();
+  genPackageEntry();
+  genPacakgeStyle();
+  genSiteMobileShared();
+  genSiteDesktopShared();
+
+  if (production) {
+    await build();
+  } else {
+    watch();
+  }
+}

packages/vant-cli/src/config/webpack.site.dev.ts

@@ -12,58 +12,56 @@ import {
 const siteConfig = CONFIG.site;
 const title = `${siteConfig.title} - ${siteConfig.description}`;
 
-export const siteDevConfig = merge(
+export const siteDevBaseConfig = merge(baseConfig as any, {
-  baseConfig as any,
+  entry: {
-  {
+    'site-desktop': [join(__dirname, '../../site/desktop/main.js')],
-    entry: {
+    'site-mobile': [join(__dirname, '../../site/mobile/main.js')]
-      'site-desktop': [join(__dirname, '../../site/desktop/main.js')],
+  },
-      'site-mobile': [join(__dirname, '../../site/mobile/main.js')]
+  devServer: {
-    },
+    open: true,
-    devServer: {
+    host: '0.0.0.0',
-      open: true,
+    stats: 'errors-only',
-      host: '0.0.0.0',
+    disableHostCheck: true
-      stats: 'errors-only',
+  },
-      disableHostCheck: true
+  resolve: {
-    },
+    alias: {
-    resolve: {
+      'site-mobile-shared': SITE_MODILE_SHARED_FILE,
-      alias: {
+      'site-desktop-shared': SITE_DESKTOP_SHARED_FILE
-        'site-mobile-shared': SITE_MODILE_SHARED_FILE,
+    }
-        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE
+  },
-      }
+  output: {
-    },
+    path: join(__dirname, '../../site/dist'),
-    output: {
+    publicPath: '/',
-      path: join(__dirname, '../../site/dist'),
+    chunkFilename: 'async_[name].js'
-      publicPath: '/',
+  },
-      chunkFilename: 'async_[name].js'
+  optimization: {
-    },
+    splitChunks: {
-    optimization: {
+      cacheGroups: {
-      splitChunks: {
+        chunks: {
-        cacheGroups: {
+          chunks: 'all',
-          chunks: {
+          minChunks: 2,
-            chunks: 'all',
+          minSize: 0,
-            minChunks: 2,
+          name: 'chunks'
-            minSize: 0,
-            name: 'chunks'
-          }
         }
       }
-    },
+    }
-    plugins: [
-      new HtmlWebpackPlugin({
-        title,
-        logo: siteConfig.logo,
-        chunks: ['chunks', 'site-desktop'],
-        template: join(__dirname, '../../site/desktop/index.html'),
-        filename: 'index.html'
-      }),
-      new HtmlWebpackPlugin({
-        title,
-        logo: siteConfig.logo,
-        chunks: ['chunks', 'site-mobile'],
-        template: join(__dirname, '../../site/mobile/index.html'),
-        filename: 'mobile.html'
-      })
-    ]
   },
-  getWebpackConfig()
+  plugins: [
-);
+    new HtmlWebpackPlugin({
+      title,
+      logo: siteConfig.logo,
+      chunks: ['chunks', 'site-desktop'],
+      template: join(__dirname, '../../site/desktop/index.html'),
+      filename: 'index.html'
+    }),
+    new HtmlWebpackPlugin({
+      title,
+      logo: siteConfig.logo,
+      chunks: ['chunks', 'site-mobile'],
+      template: join(__dirname, '../../site/mobile/index.html'),
+      filename: 'mobile.html'
+    })
+  ]
+});
+
+export const siteDevConfig = merge(siteDevBaseConfig, getWebpackConfig());

packages/vant-cli/src/config/webpack.site.prd.ts

@@ -1,16 +1,17 @@
 import merge from 'webpack-merge';
 import { get } from 'lodash';
-import { siteDevConfig } from './webpack.site.dev';
 import { getWebpackConfig } from '../common';
+import { siteDevBaseConfig } from './webpack.site.dev';
 import { CONFIG, SITE_DIST_DIR } from '../common/constant';
 
 const outputDir = get(CONFIG, 'build.site.outputDir', SITE_DIST_DIR);
 const publicPath = get(CONFIG, 'build.site.publicPath', '/');
 
 export const sitePrdConfig = merge(
-  siteDevConfig,
+  siteDevBaseConfig,
   {
     mode: 'production',
+    stats: 'none',
     output: {
       publicPath,
       path: outputDir,

packages/vant-cli/src/index.ts

@@ -8,6 +8,7 @@ import { clean } from './commands/clean';
 import { build } from './commands/build';
 import { release } from './commands/release';
 import { changelog } from './commands/changelog';
+import { buildSite } from './commands/build-site';
 import { commitLint } from './commands/commit-lint';
 
 command('dev').action(dev);
@@ -24,6 +25,8 @@ command('changelog <dir>')
   .option('--tag [tag]', 'Since tag')
   .action(changelog);
 
+command('build-site').action(buildSite);
+
 command('commit-lint').action(commitLint);
 
 command('test')