From 0bdad6f97c6e22ef1c5911303e73a98f71d7a30d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 2 Dec 2019 20:57:55 +0800 Subject: [PATCH] feat(cli): optimize gen style deps map --- packages/vant-cli/src/commands/build.ts | 36 +++++----- packages/vant-cli/src/commands/commit-lint.ts | 6 +- packages/vant-cli/src/commands/lint.ts | 14 ++-- packages/vant-cli/src/common/index.ts | 7 +- .../vant-cli/src/compiler/compile-site.ts | 7 +- .../src/compiler/gen-style-deps-map.ts | 70 ++++++++++++++++--- 6 files changed, 100 insertions(+), 40 deletions(-) diff --git a/packages/vant-cli/src/commands/build.ts b/packages/vant-cli/src/commands/build.ts index c3d15879c..b2b330435 100644 --- a/packages/vant-cli/src/commands/build.ts +++ b/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'); } } diff --git a/packages/vant-cli/src/commands/commit-lint.ts b/packages/vant-cli/src/commands/commit-lint.ts index 2685b99ff..13ff1285e 100644 --- a/packages/vant-cli/src/commands/commit-lint.ts +++ b/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. diff --git a/packages/vant-cli/src/commands/lint.ts b/packages/vant-cli/src/commands/lint.ts index fdd8c24ab..349b5fca3 100644 --- a/packages/vant-cli/src/commands/lint.ts +++ b/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'); } }); } diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts index 1f1b15ad6..10bdf60b2 100644 --- a/packages/vant-cli/src/common/index.ts +++ b/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 }; diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts index 850e7cc28..bf6a86faa 100644 --- a/packages/vant-cli/src/compiler/compile-site.ts +++ b/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(); diff --git a/packages/vant-cli/src/compiler/gen-style-deps-map.ts b/packages/vant-cli/src/compiler/gen-style-deps-map.ts index 872de07d5..07136628f 100644 --- a/packages/vant-cli/src/compiler/gen-style-deps-map.ts +++ b/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'); }