feat(cli): replace logger with consola

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

@@ -5,7 +5,7 @@ import { join, relative } from 'path';
 import { remove, copy, readdirSync } from 'fs-extra';
 import { clean } from './clean';
 import { CSS_LANG } from '../common/css';
-import { getStepper, getInteractiveLogger, logger } from '../common/logger';
+import { ora, consola, slimPath } from '../common/logger';
 import { compileJs } from '../compiler/compile-js';
 import { compileSfc } from '../compiler/compile-sfc';
 import { compileStyle } from '../compiler/compile-style';
@@ -28,8 +28,6 @@ import {
   setModuleEnv
 } from '../common';
 
-const stepper = getStepper(12);
-
 async function compileFile(filePath: string) {
   if (isSfc(filePath)) {
     return compileSfc(filePath);
@@ -67,7 +65,8 @@ async function compileDir(dir: string) {
 }
 
 async function installDependencies() {
-  stepper.start('Install Dependencies');
+  consola.info('Install Dependencies');
+  console.log('');
 
   try {
     const manager = hasYarn() ? 'yarn' : 'npm';
@@ -76,71 +75,75 @@ async function installDependencies() {
       stdio: 'inherit'
     });
 
-    stepper.success('Install Dependencies');
+    console.log('');
   } catch (err) {
-    stepper.error('Install Dependencies', err);
+    console.log(err);
     throw err;
   }
 }
 
 async function buildESModuleOutputs() {
-  stepper.start('Build ESModule Outputs');
+  const spinner = ora('Build ESModule Outputs').start();
 
   try {
     setModuleEnv('esmodule');
     await copy(SRC_DIR, ES_DIR);
     await compileDir(ES_DIR);
-    stepper.success('Build ESModule Outputs');
+    spinner.succeed('Build ESModule Outputs');
   } catch (err) {
-    stepper.error('Build ESModule Outputs', err);
+    spinner.fail('Build ESModule Outputs');
+    console.log(err);
     throw err;
   }
 }
 
 async function buildCommonjsOutputs() {
-  stepper.start('Build Commonjs Outputs');
+  const spinner = ora('Build Commonjs Outputs').start();
 
   try {
     setModuleEnv('commonjs');
     await copy(SRC_DIR, LIB_DIR);
     await compileDir(LIB_DIR);
-    stepper.success('Build Commonjs Outputs');
+    spinner.succeed('Build Commonjs Outputs');
   } catch (err) {
-    stepper.error('Build Commonjs Outputs', err);
+    spinner.fail('Build Commonjs Outputs');
+    console.log(err);
     throw err;
   }
 }
 
 async function buildStyleEntry() {
-  stepper.start('Build Style Entry');
+  const spinner = ora('Build Style Entry').start();
 
   try {
     await genStyleDepsMap();
     genComponentStyle();
-    stepper.success('Build Style Entry');
+    spinner.succeed('Build Style Entry');
   } catch (err) {
-    stepper.error('Build Style Entry', err);
+    spinner.fail('Build Style Entry');
+    console.log(err);
     throw err;
   }
 }
 
 async function buildPackedOutputs() {
-  stepper.start('Build Packed Outputs');
+  const spinner = ora('Build Packed Outputs').start();
 
   try {
     setModuleEnv('esmodule');
     await compilePackage(false);
     await compilePackage(true);
     genVeturConfig();
-    stepper.success('Build Packed Outputs');
+    spinner.succeed('Build Packed Outputs');
   } catch (err) {
-    stepper.error('Build Packed Outputs', err);
+    spinner.fail('Build Packed Outputs');
+    console.log(err);
     throw err;
   }
 }
 
 async function buildPackageEntry() {
-  stepper.start('Build Package Entry');
+  const spinner = ora('Build Package Entry').start();
 
   try {
     const esEntryFile = join(ES_DIR, 'index.js');
@@ -165,27 +168,26 @@ async function buildPackageEntry() {
     await compileJs(libEntryFile);
     await compileStyle(styleEntryFile);
 
-    stepper.success('Build Package Entry');
+    spinner.succeed('Build Package Entry');
   } catch (err) {
-    stepper.error('Build Package Entry', err);
+    spinner.fail('Build Package Entry');
+    console.log(err);
     throw err;
   }
 }
 
 function watchFileChange() {
-  logger.watch('Compiled successfully, watching file changes...');
+  consola.info('\nWatching file changes...');
 
   chokidar.watch(SRC_DIR).on('change', async path => {
     if (isDemoDir(path) || isTestDir(path)) {
       return;
     }
 
-    const logger = getInteractiveLogger();
+    const spinner = ora('File changed, start compilation...').start();
     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);
@@ -193,9 +195,9 @@ function watchFileChange() {
       await compileFile(libPath);
       await genStyleDepsMap();
       genComponentStyle({ cache: false });
-      logger.success('Compiled: ' + path);
+      spinner.succeed('Compiled: ' + slimPath(path));
     } catch (err) {
-      logger.error('Compile failed: ' + path);
+      spinner.fail('Compile failed: ' + path);
       console.log(err);
     }
   });
@@ -213,11 +215,13 @@ export async function build(cmd: { watch?: boolean } = {}) {
     await buildPackageEntry();
     await buildPackedOutputs();
 
+    consola.success('Compile successfully');
+
     if (cmd.watch) {
       watchFileChange();
     }
   } catch (err) {
-    logger.error('Build failed');
+    consola.error('Build failed');
     process.exit(1);
   }
 }

packages/vant-cli/src/commands/commit-lint.ts

@@ -1,5 +1,5 @@
 import { readFileSync } from 'fs-extra';
-import { logger } from '../common/logger';
+import { consola } from '../common/logger';
 
 const commitRE = /^(revert: )?(fix|feat|docs|perf|test|types|build|chore|refactor|breaking change)(\(.+\))?: .{1,50}/;
 const mergeRE = /Merge branch /;
@@ -9,7 +9,7 @@ export function commitLint() {
   const commitMsg = readFileSync(gitParams, 'utf-8').trim();
 
   if (!commitRE.test(commitMsg) && !mergeRE.test(commitMsg)) {
-    logger.error(`Error: invalid commit message: "${commitMsg}".
+    consola.error(`invalid commit message: "${commitMsg}".
 
 Proper commit message format is required for automated changelog generation.
 

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

@@ -1,43 +1,10 @@
 import ora from 'ora';
 import chalk from 'chalk';
-import logger from 'signale';
+import consola from 'consola';
 import { ROOT } from '../common/constant';
 
-logger.config({
-  displayTimestamp: true
-});
-
-const methods = ['success', 'start', 'error'] as const;
-
-type Stepper = Pick<typeof logger, typeof methods[number]>;
-
-export function getStepper(totalStep: number) {
-  const stepper = {} as Stepper;
-  let currentStep = 0;
-
-  methods.forEach(key => {
-    stepper[key] = (message, ...args) => {
-      const prefix = `[${++currentStep}/${totalStep}] `;
-      return logger[key](prefix + message, ...args);
-    };
-  });
-
-  return stepper;
-}
-
-export function getInteractiveLogger() {
-  const interactive = new logger.Signale({
-    interactive: true,
-    config: {
-      displayTimestamp: true
-    }
-  });
-
-  return interactive;
-}
-
 export function slimPath(path: string) {
-  return chalk.yellow(path.replace(ROOT, '.'));
+  return chalk.yellow(path.replace(ROOT, ''));
 }
 
-export { ora, logger };
+export { ora, consola };

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

@@ -4,7 +4,7 @@ import { replaceExt } from '../common';
 import { compileCss } from './compile-css';
 import { compileLess } from './compile-less';
 import { compileSass } from './compile-sass';
-import { logger } from '../common/logger';
+import { consola } from '../common/logger';
 
 async function compileFile(filePath: string) {
   const parsedPath = parse(filePath);
@@ -23,7 +23,7 @@ async function compileFile(filePath: string) {
     const source = readFileSync(filePath, 'utf-8');
     return await compileCss(source);
   } catch (err) {
-    logger.error('Compile style failed: ' + filePath);
+    consola.error('Compile style failed: ' + filePath);
     throw err;
   }
 }