feat(cli): support build watch mode

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

@@ -1,10 +1,11 @@
 // @ts-ignore
 import execa from 'execa';
+import chokidar from 'chokidar';
 import { join, relative } from 'path';
 import { remove, copy, readdirSync } from 'fs-extra';
 import { clean } from './clean';
 import { CSS_LANG } from '../common/css';
-import { getStepper, logger } from '../common/logger';
+import { getStepper, getInteractiveLogger, logger } from '../common/logger';
 import { compileJs } from '../compiler/compile-js';
 import { compileSfc } from '../compiler/compile-sfc';
 import { compileStyle } from '../compiler/compile-style';
@@ -29,6 +30,22 @@ import {
 
 const stepper = getStepper(12);
 
+async function compileFile(filePath: string) {
+  if (isSfc(filePath)) {
+    return compileSfc(filePath);
+  }
+
+  if (isScript(filePath)) {
+    return compileJs(filePath, { reloadConfig: true });
+  }
+
+  if (isStyle(filePath)) {
+    return compileStyle(filePath);
+  }
+
+  return remove(filePath);
+}
+
 async function compileDir(dir: string) {
   const files = readdirSync(dir);
 
@@ -44,19 +61,7 @@ async function compileDir(dir: string) {
         return compileDir(filePath);
       }
 
-      if (isSfc(filePath)) {
-        return compileSfc(filePath);
-      }
-
-      if (isScript(filePath)) {
-        return compileJs(filePath, { reloadConfig: true });
-      }
-
-      if (isStyle(filePath)) {
-        return compileStyle(filePath);
-      }
-
-      return remove(filePath);
+      return compileFile(filePath);
     })
   );
 }
@@ -167,7 +172,30 @@ async function buildPackageEntry() {
   }
 }
 
-export async function build() {
+function watchFileChange() {
+  chokidar.watch(SRC_DIR).on('change', async path => {
+    const logger = getInteractiveLogger();
+    const esPath = path.replace(SRC_DIR, ES_DIR);
+    const libPath = path.replace(SRC_DIR, LIB_DIR);
+
+    logger.pending('File change detected, start compilation...');
+
+    try {
+      await copy(path, esPath);
+      await copy(path, libPath);
+      await compileFile(esPath);
+      await compileFile(libPath);
+      await genStyleDepsMap();
+      genComponentStyle({ cache: false });
+      logger.success('Compiled: ' + path);
+    } catch (err) {
+      logger.error('Compile failed: ' + path);
+      console.log(err);
+    }
+  });
+}
+
+export async function build(cmd: { watch?: boolean } = {}) {
   setNodeEnv('production');
 
   try {
@@ -178,6 +206,10 @@ export async function build() {
     await buildStyleEntry();
     await buildPackageEntry();
     await buildPackedOutputs();
+
+    if (cmd.watch) {
+      watchFileChange();
+    }
   } catch (err) {
     logger.error('Build failed');
     process.exit(1);

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

@@ -22,4 +22,12 @@ export function getStepper(totalStep: number) {
   return stepper;
 }
 
+export function getInteractiveLogger() {
+  const interactive = new logger.Signale({
+    interactive: true
+  });
+
+  return interactive;
+}
+
 export { logger };

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

@@ -77,7 +77,13 @@ function genEntry(params: {
   });
 }
 
-export function genComponentStyle() {
+export function genComponentStyle(
+  options: { cache: boolean } = { cache: true }
+) {
+  if (!options.cache) {
+    delete require.cache[STYPE_DEPS_JSON_FILE];
+  }
+
   const components = getComponents();
   const baseFile = getCssBaseFile();
 

packages/vant-cli/src/index.ts

@@ -17,7 +17,9 @@ command('lint').action(lint);
 
 command('clean').action(clean);
 
-command('build').action(build);
+command('build')
+  .option('--watch', 'Watch file watch')
+  .action(build);
 
 command('release').action(release);