feat(cli): support build watch mode

packages/vant-cli/package.json

@@ -64,6 +64,7 @@
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.13.0",
+    "chokidar": "^3.3.1",
     "codecov": "^3.6.1",
     "commander": "^4.0.1",
     "cross-env": "^6.0.3",

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);
 

packages/vant-cli/yarn.lock

@@ -2942,6 +2942,21 @@ chokidar@^2.0.2, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.3.1:
+  version "3.3.1"
+  resolved "http://registry.npm.qima-inc.com/chokidar/download/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
+  integrity sha1-yE5bPRjZpNd1WP70ZrG/FrvrNFA=
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.3.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.1.1:
   version "1.1.3"
   resolved "https://registry.npm.taobao.org/chownr/download/chownr-1.1.3.tgz?cache=0&sync_timestamp=1569418652330&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchownr%2Fdownload%2Fchownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
@@ -4886,7 +4901,7 @@ fsevents@^1.2.7:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
-fsevents@~2.1.1:
+fsevents@~2.1.1, fsevents@~2.1.2:
   version "2.1.2"
   resolved "https://registry.npm.taobao.org/fsevents/download/fsevents-2.1.2.tgz?cache=0&sync_timestamp=1573319284429&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
   integrity sha1-TAofs0vGjlQ7S4Kp7Dkr+9qECAU=
@@ -8263,7 +8278,7 @@ performance-now@^2.1.0:
   resolved "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.0.4, picomatch@^2.0.5:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7:
   version "2.1.1"
   resolved "https://registry.npm.taobao.org/picomatch/download/picomatch-2.1.1.tgz#ecdfbea7704adb5fe6fb47f9866c4c0e15e905c5"
   integrity sha1-7N++p3BK21/m+0f5hmxMDhXpBcU=
@@ -8927,6 +8942,13 @@ readdirp@~3.2.0:
   dependencies:
     picomatch "^2.0.4"
 
+readdirp@~3.3.0:
+  version "3.3.0"
+  resolved "http://registry.npm.qima-inc.com/readdirp/download/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
+  integrity sha1-mERY0ToeQuLp9YQbEp4WLzaa/xc=
+  dependencies:
+    picomatch "^2.0.7"
+
 realpath-native@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/realpath-native/download/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"