feat(cli): improve dev experience

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

@@ -1,10 +1,7 @@
-import { emptyDir } from 'fs-extra';
 import { setNodeEnv } from '../common';
 import { compileSite } from '../compiler/compile-site';
-import { DIST_DIR } from '../common/constant';
 
 export async function dev() {
   setNodeEnv('development');
-  await emptyDir(DIST_DIR);
   await compileSite();
 }

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

@@ -14,6 +14,10 @@ function findRootDir(dir: string): string {
   return findRootDir(dirname(dir));
 }
 
+// Colors
+export const GREEN = '#07c160';
+
+// Root paths
 export const CWD = process.cwd();
 export const ROOT = findRootDir(CWD);
 export const ES_DIR = join(ROOT, 'es');
@@ -24,17 +28,20 @@ export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
 export const ROOT_WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
 export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
-
-export const DIST_DIR = join(__dirname, '../../dist');
-export const CONFIG_DIR = join(__dirname, '../config');
 export const CACHE_DIR = join(ROOT, 'node_modules/.cache');
 
+// Relative paths
+export const DIST_DIR = join(__dirname, '../../dist');
+export const CONFIG_DIR = join(__dirname, '../config');
+
+// 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_MODILE_SHARED_FILE = join(DIST_DIR, 'site-mobile-shared.js');
 export const SITE_DESKTOP_SHARED_FILE = join(DIST_DIR, 'site-desktop-shared.js');
 export const STYPE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
 
+// Config files
 export const BABEL_CONFIG_FILE = join(CONFIG_DIR, 'babel.config.js');
 export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');
 export const JEST_SETUP_FILE = join(CONFIG_DIR, 'jest.setup.js');

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

@@ -4,6 +4,7 @@ import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { get } from 'lodash';
 import { getPort } from 'portfinder';
+import { GREEN } from '../common/constant';
 import { siteDevConfig } from '../config/webpack.site.dev';
 import { sitePrdConfig } from '../config/webpack.site.prd';
 
@@ -12,8 +13,8 @@ function logServerInfo(port: number) {
   const network = `http://${address.ip()}:${port}/`;
 
   console.log('\n  Site running at:\n');
-  console.log(`  ${chalk.bold('Local')}:    ${chalk.cyan.bold(local)} `);
+  console.log(`  ${chalk.bold('Local')}:    ${chalk.hex(GREEN)(local)} `);
-  console.log(`  ${chalk.bold('Network')}:  ${chalk.cyan.bold(network)}`);
+  console.log(`  ${chalk.bold('Network')}:  ${chalk.hex(GREEN)(network)}`);
 }
 
 function runDevServer(port: number) {

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

@@ -10,33 +10,33 @@ import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
 
 const PLUGIN_NAME = 'VantCliSitePlugin';
 
+export async function genSiteEntry() {
+  return new Promise((resolve, reject) => {
+    genStyleDepsMap()
+      .then(() => {
+        genPackageEntry({
+          outputPath: PACKAGE_ENTRY_FILE
+        });
+        genPacakgeStyle({
+          outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`)
+        });
+        genSiteMobileShared();
+        genSiteDesktopShared();
+        resolve();
+      })
+      .catch(err => {
+        console.log(err);
+        reject(err);
+      });
+  });
+}
+
 export class VantCliSitePlugin {
   apply(compiler: Compiler) {
     if (process.env.NODE_ENV === 'production') {
-      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, this.genSiteEntry);
+      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, genSiteEntry);
     } else {
-      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, this.genSiteEntry);
+      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, genSiteEntry);
     }
   }
-
-  genSiteEntry() {
-    return new Promise((resolve, reject) => {
-      genStyleDepsMap()
-        .then(() => {
-          genPackageEntry({
-            outputPath: PACKAGE_ENTRY_FILE
-          });
-          genPacakgeStyle({
-            outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`)
-          });
-          genSiteMobileShared();
-          genSiteDesktopShared();
-          resolve();
-        })
-        .catch(err => {
-          console.log(err);
-          reject(err);
-        });
-    });
-  }
 }

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

@@ -8,6 +8,7 @@ import { baseConfig } from './webpack.base';
 import { getVantConfig, getWebpackConfig } from '../common';
 import { VantCliSitePlugin } from '../compiler/vant-cli-site-plugin';
 import {
+  GREEN,
   SITE_MODILE_SHARED_FILE,
   SITE_DESKTOP_SHARED_FILE
 } from '../common/constant';
@@ -75,7 +76,7 @@ export const siteDevBaseConfig = merge(baseConfig as any, {
   plugins: [
     new WebpackBar({
       name: 'Vant Cli',
-      color: '#07c160'
+      color: GREEN
     }),
     new VantCliSitePlugin(),
     new HtmlWebpackPlugin({