From 51d2512311e166aaeb376591be1360ea6c6672cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 29 Nov 2019 13:20:43 +0800 Subject: [PATCH] chore(cli): split compilers --- packages/vant-cli/src/commands/dev.ts | 2 + packages/vant-cli/src/common/constant.ts | 2 + packages/vant-cli/src/compiler/compile-css.ts | 12 ++++ .../vant-cli/src/compiler/compile-less.ts | 11 ++++ .../vant-cli/src/compiler/compile-sass.ts | 6 ++ packages/vant-cli/src/compiler/compile-sfc.ts | 2 +- .../vant-cli/src/compiler/compile-style.ts | 55 +++++++------------ .../src/compiler/gen-package-entry.ts | 42 ++------------ .../src/compiler/gen-package-style.ts | 32 +++++++++++ 9 files changed, 90 insertions(+), 74 deletions(-) create mode 100644 packages/vant-cli/src/compiler/compile-css.ts create mode 100644 packages/vant-cli/src/compiler/compile-less.ts create mode 100644 packages/vant-cli/src/compiler/compile-sass.ts create mode 100644 packages/vant-cli/src/compiler/gen-package-style.ts diff --git a/packages/vant-cli/src/commands/dev.ts b/packages/vant-cli/src/commands/dev.ts index 0a8cca5ec..eaa127bfc 100644 --- a/packages/vant-cli/src/commands/dev.ts +++ b/packages/vant-cli/src/commands/dev.ts @@ -5,6 +5,7 @@ import { clean } from '../commands/clean'; import { buildESModuleOutputs } from './build'; import { siteDevConfig } from '../config/webpack.site.dev'; import { genPackageEntry } from '../compiler/gen-package-entry'; +import { genPacakgeStyle } from '../compiler/gen-package-style'; import { genMobileEntry } from '../compiler/gen-mobile-entry'; import { genDesktopEntry } from '../compiler/gen-desktop-entry'; import { genDepsMap } from '../compiler/gen-style-deps-map'; @@ -39,6 +40,7 @@ export async function dev() { await buildESModuleOutputs(); genDepsMap(); genPackageEntry(); + genPacakgeStyle(); genMobileEntry(); genDesktopEntry(); runWebpack(); diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts index edcac921c..af9e04d80 100644 --- a/packages/vant-cli/src/common/constant.ts +++ b/packages/vant-cli/src/common/constant.ts @@ -27,3 +27,5 @@ export const JEST_STYLE_MOCK_FILE = join(CONFIG_DIR, 'jest.style-mock.js'); // eslint-disable-next-line export const CONFIG = require(CONFIG_FILE); +// eslint-disable-next-line +export const PACKAGE_JSON = require(PACKAGE_JSON_FILE); diff --git a/packages/vant-cli/src/compiler/compile-css.ts b/packages/vant-cli/src/compiler/compile-css.ts new file mode 100644 index 000000000..9f718a31f --- /dev/null +++ b/packages/vant-cli/src/compiler/compile-css.ts @@ -0,0 +1,12 @@ +import postcss from 'postcss'; +import postcssrc from 'postcss-load-config'; +import { POSTCSS_CONFIG_FILE } from '../common/constant'; + +export async function compileCss(source: string | Buffer) { + const config = await postcssrc({}, POSTCSS_CONFIG_FILE); + const output = await postcss(config.plugins as any).process(source, { + from: undefined + }); + + return output; +} diff --git a/packages/vant-cli/src/compiler/compile-less.ts b/packages/vant-cli/src/compiler/compile-less.ts new file mode 100644 index 000000000..9ab6c17da --- /dev/null +++ b/packages/vant-cli/src/compiler/compile-less.ts @@ -0,0 +1,11 @@ +import { readFileSync } from 'fs-extra'; +import { render as renderLess } from 'less'; + +export async function compileLess(filePath: string) { + const source = readFileSync(filePath, 'utf-8'); + const { css } = await renderLess(source, { + filename: filePath + }); + + return css; +} diff --git a/packages/vant-cli/src/compiler/compile-sass.ts b/packages/vant-cli/src/compiler/compile-sass.ts new file mode 100644 index 000000000..c877fee8f --- /dev/null +++ b/packages/vant-cli/src/compiler/compile-sass.ts @@ -0,0 +1,6 @@ +import { renderSync as renderSass } from 'sass'; + +export async function compileSass(filePath: string) { + const { css } = renderSass({ file: filePath }); + return css; +} diff --git a/packages/vant-cli/src/compiler/compile-sfc.ts b/packages/vant-cli/src/compiler/compile-sfc.ts index 8ffc08f8b..4b18d762f 100644 --- a/packages/vant-cli/src/compiler/compile-sfc.ts +++ b/packages/vant-cli/src/compiler/compile-sfc.ts @@ -84,7 +84,7 @@ export async function compileSfc(filePath: string) { } writeFileSync(jsFilePath, script); - await compileJs(jsFilePath); + compileJs(jsFilePath); } // compile style part diff --git a/packages/vant-cli/src/compiler/compile-style.ts b/packages/vant-cli/src/compiler/compile-style.ts index d6ada1042..4fd246eff 100644 --- a/packages/vant-cli/src/compiler/compile-style.ts +++ b/packages/vant-cli/src/compiler/compile-style.ts @@ -1,46 +1,29 @@ -import postcss from 'postcss'; -import postcssrc from 'postcss-load-config'; import { parse } from 'path'; -import { render as renderLess } from 'less'; -import { renderSync as renderSass } from 'sass'; import { readFileSync, writeFileSync } from 'fs'; import { replaceExt } from '../common'; -import { POSTCSS_CONFIG_FILE } from '../common/constant'; +import { compileCss } from './compile-css'; +import { compileLess } from './compile-less'; +import { compileSass } from './compile-sass'; -async function compilePostcss(filePath: string, source: string | Buffer) { - const config = await postcssrc({}, POSTCSS_CONFIG_FILE); - const output = await postcss(config.plugins as any).process(source, { - from: undefined - }); - - writeFileSync(filePath, output); -} - -async function compileLess(filePath: string) { - const source = readFileSync(filePath, 'utf-8'); - const { css } = await renderLess(source, { - filename: filePath - }); - - return css; -} - -async function compileSass(filePath: string) { - const { css } = renderSass({ file: filePath }); - return css; -} - -export async function compileStyle(filePath: string) { +async function compileFile(filePath: string) { const parsedPath = parse(filePath); if (parsedPath.ext === '.less') { const source = await compileLess(filePath); - await compilePostcss(replaceExt(filePath, '.css'), source); - } else if (parsedPath.ext === '.scss') { - const source = await compileSass(filePath); - await compilePostcss(replaceExt(filePath, '.css'), source); - } else { - const source = readFileSync(filePath, 'utf-8'); - await compilePostcss(filePath, source); + return compileCss(source); } + + if (parsedPath.ext === '.scss') { + const source = await compileSass(filePath); + return compileCss(source); + } + + const source = readFileSync(filePath, 'utf-8'); + return compileCss(source); +} + +export async function compileStyle(filePath: string) { + const content = await compileFile(filePath); + + writeFileSync(replaceExt(filePath, '.css'), content); } diff --git a/packages/vant-cli/src/compiler/gen-package-entry.ts b/packages/vant-cli/src/compiler/gen-package-entry.ts index 7eae4cd3b..42e398307 100644 --- a/packages/vant-cli/src/compiler/gen-package-entry.ts +++ b/packages/vant-cli/src/compiler/gen-package-entry.ts @@ -1,21 +1,13 @@ -import { get } from 'lodash'; import { join } from 'path'; import { writeFileSync } from 'fs-extra'; -import { pascalize, getComponents, replaceExt } from '../common'; +import { pascalize, getComponents } from '../common'; import { - CONFIG, SRC_DIR, - PACKAGE_JSON_FILE, - PACKAGE_ENTRY_FILE, - PACKAGE_STYLE_FILE, - STYPE_DEPS_JSON_FILE + PACKAGE_JSON, + PACKAGE_ENTRY_FILE } from '../common/constant'; -// eslint-disable-next-line -const packageJson = require(PACKAGE_JSON_FILE); -// eslint-disable-next-line -const styleDepsJson = require(STYPE_DEPS_JSON_FILE); -const version = process.env.PACKAGE_VERSION || packageJson.version; +const version = process.env.PACKAGE_VERSION || PACKAGE_JSON.version; function genImports(components: string[]): string { return components @@ -27,26 +19,7 @@ function genExports(names: string[]): string { return names.map(name => `${name}`).join(',\n '); } -function getStyleExt(): string { - const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less'); - - if (preprocessor === 'sass') { - return '.scss'; - } - - return `.${preprocessor}`; -} - -function genStyleEntry() { - const ext = getStyleExt(); - const content = styleDepsJson.sequence - .map((name: string) => `@import "${join(SRC_DIR, `${name}/index${ext}`)}";`) - .join('\n'); - - writeFileSync(replaceExt(PACKAGE_STYLE_FILE, ext), content); -} - -function genScriptEntry() { +export function genPackageEntry() { const components = getComponents(); const names = components.map(item => pascalize(item)); @@ -85,8 +58,3 @@ export default { writeFileSync(PACKAGE_ENTRY_FILE, content); } - -export function genPackageEntry() { - genStyleEntry(); - genScriptEntry(); -} diff --git a/packages/vant-cli/src/compiler/gen-package-style.ts b/packages/vant-cli/src/compiler/gen-package-style.ts new file mode 100644 index 000000000..78c6447e8 --- /dev/null +++ b/packages/vant-cli/src/compiler/gen-package-style.ts @@ -0,0 +1,32 @@ +import { get } from 'lodash'; +import { join } from 'path'; +import { writeFileSync } from 'fs-extra'; +import { replaceExt } from '../common'; +import { + CONFIG, + SRC_DIR, + PACKAGE_STYLE_FILE, + STYPE_DEPS_JSON_FILE +} from '../common/constant'; + +// eslint-disable-next-line +const styleDepsJson = require(STYPE_DEPS_JSON_FILE); + +function getStyleExt(): string { + const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less'); + + if (preprocessor === 'sass') { + return '.scss'; + } + + return `.${preprocessor}`; +} + +export function genPacakgeStyle() { + const ext = getStyleExt(); + const content = styleDepsJson.sequence + .map((name: string) => `@import "${join(SRC_DIR, `${name}/index${ext}`)}";`) + .join('\n'); + + writeFileSync(replaceExt(PACKAGE_STYLE_FILE, ext), content); +}