feat(cli): optimize gen style deps map

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

@@ -1,4 +1,3 @@
-import { start, error, success } from 'signale';
 import { join } from 'path';
 import { clean } from './clean';
 import { remove, copy, readdirSync } from 'fs-extra';
@@ -11,6 +10,7 @@ import { genStyleDepsMap } from '../compiler/gen-style-deps-map';
 import { genComponentStyle } from '../compiler/gen-component-style';
 import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant';
 import {
+  logger,
   isDir,
   isSfc,
   isStyle,
@@ -53,56 +53,56 @@ async function compileDir(dir: string) {
   );
 }
 
-export async function buildESModuleOutputs() {
+async function buildESModuleOutputs() {
   await copy(SRC_DIR, ES_DIR);
 
-  start('Build esmodule outputs');
+  logger.start('Build esmodule outputs');
 
   try {
     setModuleEnv('esmodule');
     await compileDir(ES_DIR);
-    success('Build esmodule outputs');
+    logger.success('Build esmodule outputs');
   } catch (err) {
-    error('Build esmodule outputs');
+    logger.error('Build esmodule outputs');
   }
 }
 
-export async function buildCommonjsOutputs() {
+async function buildCommonjsOutputs() {
   await copy(SRC_DIR, LIB_DIR);
 
-  start('Build commonjs outputs');
+  logger.start('Build commonjs outputs');
 
   try {
     setModuleEnv('commonjs');
     await compileDir(LIB_DIR);
-    success('Build commonjs outputs');
+    logger.success('Build commonjs outputs');
   } catch (err) {
-    error('Build commonjs outputs');
+    logger.error('Build commonjs outputs');
   }
 }
 
-export async function buildStyleEntry() {
-  start('Build style entry');
+async function buildStyleEntry() {
+  logger.start('Build style entry');
 
   try {
-    genStyleDepsMap();
+    await genStyleDepsMap();
     genComponentStyle();
-    success('Build style entry');
+    logger.success('Build style entry');
   } catch (err) {
-    error('Build style entry');
+    logger.error('Build style entry');
   }
 }
 
-export async function buildPackedOutputs() {
-  start('Build packed outputs');
+async function buildPackedOutputs() {
+  logger.start('Build packed outputs');
 
   try {
     genPackageEntry();
     await compilePackage(false);
     await compilePackage(true);
-    success('Build packed outputs');
+    logger.success('Build packed outputs');
   } catch (err) {
-    error('Build packed outputs');
+    logger.error('Build packed outputs');
   }
 }
 

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

@@ -1,5 +1,5 @@
-import signale from 'signale';
-import { readFileSync } from 'fs';
+import { logger } from '../common';
+import { readFileSync } from 'fs-extra';
 
 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)) {
-    signale.error(`Error: invalid commit message: "${commitMsg}".
+    logger.error(`Error: invalid commit message: "${commitMsg}".
 
 Proper commit message format is required for automated changelog generation.
 

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

@@ -1,10 +1,10 @@
-import { start, error, success } from 'signale';
 import { lint as stylelint } from 'stylelint';
 import { CLIEngine } from 'eslint';
+import { logger } from '../common';
 import { SCRIPT_EXTS } from '../common/constant';
 
 function lintScript() {
-  start('ESLint Start');
+  logger.start('ESLint Start');
 
   const cli = new CLIEngine({
     fix: true,
@@ -19,15 +19,15 @@ function lintScript() {
   // output lint errors
   const formatted = formatter(report.results);
   if (formatted) {
-    error('ESLint Failed');
+    logger.error('ESLint Failed');
     console.log(formatter(report.results));
   } else {
-    success('ESLint Passed');
+    logger.success('ESLint Passed');
   }
 }
 
 function lintStyle() {
-  start('Stylelint Start');
+  logger.start('Stylelint Start');
 
   stylelint({
     fix: true,
@@ -35,10 +35,10 @@ function lintStyle() {
     files: ['src/**/*.css', 'src/**/*.less', 'src/**/*.scss', 'src/**/*.vue']
   }).then(result => {
     if (result.errored) {
-      error('Stylelint Failed');
+      logger.error('Stylelint Failed');
       console.log(result.output);
     } else {
-      success('Stylelint Passed');
+      logger.success('Stylelint Passed');
     }
   });
 }

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

@@ -1,9 +1,14 @@
+import logger from 'signale';
 import decamelize from 'decamelize';
 import { join } from 'path';
 import { get } from 'lodash';
 import { readdirSync, existsSync, lstatSync, readFileSync } from 'fs-extra';
 import { CONFIG, SRC_DIR, WEBPACK_CONFIG_FILE } from './constant';
 
+logger.config({
+  displayTimestamp: true
+});
+
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
 export const DEMO_REGEXP = /\/demo$/;
@@ -114,4 +119,4 @@ export function getCssLang(): string {
   return preprocessor;
 }
 
-export { decamelize };
+export { logger, decamelize };

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

@@ -1,7 +1,7 @@
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { getPort } from 'portfinder';
-import { buildESModuleOutputs } from '../commands/build';
+import { logger } from '../common';
 import { genPackageEntry } from './gen-package-entry';
 import { genPacakgeStyle } from './gen-package-style';
 import { genSiteMobileShared } from './gen-site-mobile-shared';
@@ -11,6 +11,8 @@ import { siteDevConfig } from '../config/webpack.site.dev';
 import { sitePrdConfig } from '../config/webpack.site.prd';
 
 function watch() {
+  logger.start('Start development');
+
   const server = new WebpackDevServer(
     webpack(siteDevConfig),
     (siteDevConfig as any).devServer
@@ -48,8 +50,7 @@ function build() {
 }
 
 export async function compileSite(production = false) {
-  await buildESModuleOutputs();
-  genStyleDepsMap();
+  await genStyleDepsMap();
   genPackageEntry();
   genPacakgeStyle();
   genSiteMobileShared();

packages/vant-cli/src/compiler/gen-style-deps-map.ts

@@ -4,19 +4,66 @@
 
 import dependencyTree from 'dependency-tree';
 import { join } from 'path';
-import { getComponents } from '../common';
-import { existsSync, writeFileSync, ensureDirSync } from 'fs-extra';
-import { ES_DIR, DIST_DIR, STYPE_DEPS_JSON_FILE } from '../common/constant';
+import { compileJs } from './compile-js';
+import { compileSfc } from './compile-sfc';
+import { compileStyle } from './compile-style';
+import {
+  logger,
+  isDir,
+  isSfc,
+  isStyle,
+  isScript,
+  getComponents
+} from '../common';
+import { SRC_DIR, DIST_DIR, STYPE_DEPS_JSON_FILE } from '../common/constant';
+import {
+  copy,
+  existsSync,
+  readdirSync,
+  writeFileSync,
+  ensureDirSync
+} from 'fs-extra';
 
 interface DependencyObj {
   [k: string]: DependencyObj;
 }
 
 const components = getComponents();
+const TEMP_DIR = join(DIST_DIR, 'temp');
+
+async function compileTempDir(dir: string) {
+  const files = readdirSync(dir);
+
+  await Promise.all(
+    files.map(filename => {
+      const filePath = join(dir, filename);
+
+      if (isDir(filePath)) {
+        return compileTempDir(filePath);
+      }
+
+      if (filename.indexOf('index') !== -1) {
+        if (isSfc(filePath)) {
+          return compileSfc(filePath);
+        }
+
+        if (isScript(filePath)) {
+          return compileJs(filePath);
+        }
+
+        if (isStyle(filePath)) {
+          return compileStyle(filePath);
+        }
+      }
+
+      return Promise.resolve();
+    })
+  );
+}
 
 function matchPath(path: string, component: string): boolean {
   return path
-    .replace(ES_DIR, '')
+    .replace(TEMP_DIR, '')
     .split('/')
     .includes(component);
 }
@@ -35,7 +82,7 @@ function search(tree: DependencyObj, component: string, checkList: string[]) {
 }
 
 function getStylePath(component: string) {
-  return join(ES_DIR, `${component}/index.css`);
+  return join(TEMP_DIR, `${component}/index.css`);
 }
 
 function checkStyleExists(component: string) {
@@ -48,8 +95,8 @@ function analyzeDeps(component: string) {
 
   search(
     dependencyTree({
-      directory: ES_DIR,
-      filename: join(ES_DIR, component, 'index.js'),
+      directory: TEMP_DIR,
+      filename: join(TEMP_DIR, component, 'index.js'),
       filter: path => !~path.indexOf('node_modules')
     }),
     component,
@@ -100,9 +147,14 @@ function getSequence(depsMap: DepsMap) {
   return sequence;
 }
 
-export function genStyleDepsMap() {
+export async function genStyleDepsMap() {
+  logger.start('Analyze dependencies');
+
   const map = {} as DepsMap;
 
+  await copy(SRC_DIR, TEMP_DIR);
+  await compileTempDir(TEMP_DIR);
+
   components.filter(checkStyleExists).forEach(component => {
     map[component] = analyzeDeps(component);
   });
@@ -121,4 +173,6 @@ export function genStyleDepsMap() {
     STYPE_DEPS_JSON_FILE,
     JSON.stringify({ map, sequence }, null, 2)
   );
+
+  logger.success('Analyze dependencies');
 }