From 4a424d4c066f7de69cbf561a5bc9279862739637 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sun, 21 Nov 2021 00:59:06 +0800 Subject: [PATCH] fix(cli/compile): add commonjs bundle affects: @varlet/cli, @varlet/ui --- .gitignore | 2 +- package.json | 2 + packages/varlet-cli/generators/sfc/.gitignore | 1 + .../varlet-cli/generators/sfc/package.json | 3 + packages/varlet-cli/generators/tsx/.gitignore | 1 + .../varlet-cli/generators/tsx/package.json | 3 + packages/varlet-cli/src/commands/compile.ts | 13 ++-- .../varlet-cli/src/compiler/compileModule.ts | 25 +++++-- .../varlet-cli/src/compiler/compileScript.ts | 75 ++++++++++++++++++- .../varlet-cli/src/compiler/compileStyle.ts | 27 ++++++- .../varlet-cli/src/config/babel.config.ts | 4 +- packages/varlet-cli/src/shared/constant.ts | 1 + packages/varlet-ui/package.json | 1 + 13 files changed, 134 insertions(+), 24 deletions(-) diff --git a/.gitignore b/.gitignore index 76cc301ba54..fd7e398345c 100644 --- a/.gitignore +++ b/.gitignore @@ -21,8 +21,8 @@ packages/varlet-cli/site/site.config.json packages/varlet-cli/site/*.site.config.json packages/varlet-ui/site +packages/varlet-ui/lib packages/varlet-ui/es -packages/varlet-ui/cjs packages/varlet-ui/umd packages/varlet-ui/coverage packages/varlet-ui/highlight diff --git a/package.json b/package.json index d30e07ff8a0..f211784984f 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "packages/varlet-cli/site/**", "packages/varlet-cli/generators/**", "packages/varlet-vscode-extension/dist/**", + "packages/varlet-ui/lib/**", "packages/varlet-ui/es/**", "packages/varlet-ui/umd/**", "packages/varlet-ui/site/**", @@ -55,6 +56,7 @@ "packages/varlet-cli/site/**", "packages/varlet-cli/generators/**", "packages/varlet-icons/dist/**", + "packages/varlet-ui/lib/**", "packages/varlet-ui/es/**", "packages/varlet-ui/umd/**", "packages/varlet-ui/site/**", diff --git a/packages/varlet-cli/generators/sfc/.gitignore b/packages/varlet-cli/generators/sfc/.gitignore index 9707300d3ea..a79f214a5f3 100644 --- a/packages/varlet-cli/generators/sfc/.gitignore +++ b/packages/varlet-cli/generators/sfc/.gitignore @@ -7,6 +7,7 @@ node_modules .DS_Store site +lib es umd coverage diff --git a/packages/varlet-cli/generators/sfc/package.json b/packages/varlet-cli/generators/sfc/package.json index c45f7f91eb0..dc4004a8319 100644 --- a/packages/varlet-cli/generators/sfc/package.json +++ b/packages/varlet-cli/generators/sfc/package.json @@ -2,6 +2,7 @@ "name": "basic-ui", "version": "0.0.0", "description": "A basic components library", + "main": "lib/index.js", "module": "es/index.js", "typings": "types/index.d.ts", "vetur": { @@ -64,6 +65,7 @@ "eslintConfig": { "root": true, "ignorePatterns": [ + "lib/**", "es/**", "umd/**", "site/**", @@ -80,6 +82,7 @@ "@varlet/stylelint-config" ], "ignoreFiles": [ + "lib/**", "es/**", "umd/**", "site/**", diff --git a/packages/varlet-cli/generators/tsx/.gitignore b/packages/varlet-cli/generators/tsx/.gitignore index 9707300d3ea..a79f214a5f3 100644 --- a/packages/varlet-cli/generators/tsx/.gitignore +++ b/packages/varlet-cli/generators/tsx/.gitignore @@ -7,6 +7,7 @@ node_modules .DS_Store site +lib es umd coverage diff --git a/packages/varlet-cli/generators/tsx/package.json b/packages/varlet-cli/generators/tsx/package.json index c45f7f91eb0..dc4004a8319 100644 --- a/packages/varlet-cli/generators/tsx/package.json +++ b/packages/varlet-cli/generators/tsx/package.json @@ -2,6 +2,7 @@ "name": "basic-ui", "version": "0.0.0", "description": "A basic components library", + "main": "lib/index.js", "module": "es/index.js", "typings": "types/index.d.ts", "vetur": { @@ -64,6 +65,7 @@ "eslintConfig": { "root": true, "ignorePatterns": [ + "lib/**", "es/**", "umd/**", "site/**", @@ -80,6 +82,7 @@ "@varlet/stylelint-config" ], "ignoreFiles": [ + "lib/**", "es/**", "umd/**", "site/**", diff --git a/packages/varlet-cli/src/commands/compile.ts b/packages/varlet-cli/src/commands/compile.ts index 0563ff81f40..81490f76056 100644 --- a/packages/varlet-cli/src/commands/compile.ts +++ b/packages/varlet-cli/src/commands/compile.ts @@ -1,13 +1,13 @@ import ora from 'ora' import logger from '../shared/logger' import { remove } from 'fs-extra' -import { ES_DIR, HL_DIR, UMD_DIR } from '../shared/constant' +import { ES_DIR, HL_DIR, LIB_DIR, UMD_DIR } from '../shared/constant' import { compileModule } from '../compiler/compileModule' import { compileTemplateHighlight } from '../compiler/compileTemplateHighlight' import { compileTypes } from '../compiler/compileTypes' export function removeDir() { - return Promise.all([remove(ES_DIR), remove(HL_DIR), remove(UMD_DIR)]) + return Promise.all([remove(ES_DIR), remove(LIB_DIR), remove(HL_DIR), remove(UMD_DIR)]) } export async function runTask(taskName: string, task: () => any) { @@ -25,10 +25,9 @@ export async function compile(cmd: { noUmd: boolean }) { process.env.NODE_ENV = 'compile' await removeDir() - await Promise.all([ - runTask('types', compileTypes), - runTask('template highlight', compileTemplateHighlight), - runTask('module', compileModule), - ]) + await Promise.all([runTask('types', compileTypes), runTask('template highlight', compileTemplateHighlight)]) + + await runTask('module', compileModule) + await runTask('commonjs', () => compileModule('commonjs')) !cmd.noUmd && (await runTask('umd', () => compileModule('umd'))) } diff --git a/packages/varlet-cli/src/compiler/compileModule.ts b/packages/varlet-cli/src/compiler/compileModule.ts index 9b1e248664c..426a6cac8e7 100644 --- a/packages/varlet-cli/src/compiler/compileModule.ts +++ b/packages/varlet-cli/src/compiler/compileModule.ts @@ -1,10 +1,18 @@ import { build } from 'vite' import { resolve } from 'path' import { copy, ensureFileSync, readdir, removeSync } from 'fs-extra' -import { EXAMPLE_DIR_NAME, TESTS_DIR_NAME, DOCS_DIR_NAME, SRC_DIR, ES_DIR, STYLE_DIR_NAME } from '../shared/constant' +import { + EXAMPLE_DIR_NAME, + TESTS_DIR_NAME, + DOCS_DIR_NAME, + SRC_DIR, + ES_DIR, + STYLE_DIR_NAME, + LIB_DIR, +} from '../shared/constant' import { getPublicDirs, isDir, isLess, isScript, isSFC } from '../shared/fsUtils' import { compileSFC } from './compileSFC' -import { compileLibraryEntry, compileScriptFile } from './compileScript' +import { compileESEntry, compileCommonJSEntry, compileScriptFile } from './compileScript' import { compileLess } from './compileStyle' import { getUMDConfig } from '../config/vite.config' import { getVarletConfig } from '../config/varlet.config' @@ -44,18 +52,21 @@ export async function compileFile(file: string) { isDir(file) && (await compileDir(file)) } -export async function compileModule(modules: string | boolean = false) { +export async function compileModule(modules: 'umd' | 'commonjs' | boolean = false) { if (modules === 'umd') { await compileUMD() return } - await copy(SRC_DIR, ES_DIR) + process.env.BABEL_MODULE = modules === 'commonjs' ? 'commonjs' : 'module' + + const dest = modules === 'commonjs' ? LIB_DIR : ES_DIR + await copy(SRC_DIR, dest) const moduleDir: string[] = await readdir(ES_DIR) await Promise.all( moduleDir.map((filename: string) => { - const file: string = resolve(ES_DIR, filename) + const file: string = resolve(dest, filename) if (isDir(file)) { ensureFileSync(resolve(file, './style/index.js')) @@ -66,5 +77,7 @@ export async function compileModule(modules: string | boolean = false) { }) ) - await compileLibraryEntry(ES_DIR, await getPublicDirs()) + const publicDirs = await getPublicDirs() + + await (modules === 'commonjs' ? compileCommonJSEntry(dest, publicDirs) : compileESEntry(dest, publicDirs)) } diff --git a/packages/varlet-cli/src/compiler/compileScript.ts b/packages/varlet-cli/src/compiler/compileScript.ts index 6ae34034f24..5c0b23b7e7c 100644 --- a/packages/varlet-cli/src/compiler/compileScript.ts +++ b/packages/varlet-cli/src/compiler/compileScript.ts @@ -1,7 +1,13 @@ import { transformAsync } from '@babel/core' import { bigCamelize, replaceExt } from '../shared/fsUtils' import { writeFileSync, readFileSync, removeSync, writeFile } from 'fs-extra' -import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE } from './compileStyle' +import { + extractStyleDependencies, + IMPORT_CSS_RE, + IMPORT_LESS_RE, + REQUIRE_CSS_RE, + REQUIRE_LESS_RE, +} from './compileStyle' import { resolve } from 'path' import type { BabelFileResult } from '@babel/core' @@ -24,8 +30,22 @@ export async function compileScript(script: string, file: string) { let { code } = (await transformAsync(script, { filename: file, })) as BabelFileResult - code = extractStyleDependencies(file, code as string, IMPORT_CSS_RE, 'css', false) - code = extractStyleDependencies(file, code as string, IMPORT_LESS_RE, 'less', false) + const modules = process.env.BABEL_MODULE + + code = extractStyleDependencies( + file, + code as string, + modules === 'commonjs' ? REQUIRE_CSS_RE : IMPORT_CSS_RE, + 'css', + false + ) + code = extractStyleDependencies( + file, + code as string, + modules === 'commonjs' ? REQUIRE_LESS_RE : IMPORT_LESS_RE, + 'less', + false + ) code = replaceVueExt(code as string) code = replaceTSXExt(code as string) code = replaceJSXExt(code as string) @@ -41,7 +61,7 @@ export async function compileScriptFile(file: string) { await compileScript(sources, file) } -export async function compileLibraryEntry(dir: string, publicDirs: string[]) { +export async function compileESEntry(dir: string, publicDirs: string[]) { const imports: string[] = [] const plugins: string[] = [] const constInternalComponents: string[] = [] @@ -112,3 +132,50 @@ ${lessImports.join('\n')} writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'), ]) } + +export async function compileCommonJSEntry(dir: string, publicDirs: string[]) { + const requires: string[] = [] + const plugins: string[] = [] + const cssRequires: string[] = [] + const lessRequires: string[] = [] + const publicComponents: string[] = [] + + publicDirs.forEach((dirname: string) => { + const publicComponent = bigCamelize(dirname) + + publicComponents.push(publicComponent) + requires.push(`const ${publicComponent} = require('./${dirname}')`) + plugins.push(`${publicComponent}.install && app.use(${publicComponent})`) + cssRequires.push(`require('./${dirname}/style')`) + lessRequires.push(`require('./${dirname}/style/less')`) + }) + + const install = ` +function install(app) { + ${plugins.join('\n ')} +} +` + + const indexTemplate = `\ +${requires.join('\n')}\n +${install} + +module.exports = { + install, + ${publicComponents.join(',\n ')} +} +` + + const styleTemplate = `\ +${cssRequires.join('\n')} +` + + const lessTemplate = `\ +${lessRequires.join('\n')} +` + await Promise.all([ + writeFile(resolve(dir, 'index.js'), indexTemplate, 'utf-8'), + writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'), + writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'), + ]) +} diff --git a/packages/varlet-cli/src/compiler/compileStyle.ts b/packages/varlet-cli/src/compiler/compileStyle.ts index 6cb42fc3c34..65da2ca92cc 100644 --- a/packages/varlet-cli/src/compiler/compileStyle.ts +++ b/packages/varlet-cli/src/compiler/compileStyle.ts @@ -7,6 +7,8 @@ export const EMPTY_SPACE_RE = /[\s]+/g export const EMPTY_LINE_RE = /[\n\r]*/g export const IMPORT_CSS_RE = /(? s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ') @@ -33,16 +35,33 @@ export function extractStyleDependencies( const styleImports = code.match(reg) ?? [] const cssFile = resolve(dir, './style/index.js') const lessFile = resolve(dir, './style/less.js') + const modules = process.env.BABEL_MODULE styleImports.forEach((styleImport: string) => { const normalizedPath = normalizeStyleDependency(styleImport, reg) - smartAppendFileSync(cssFile, `import '${normalizedPath}.css'\n`) - smartAppendFileSync(lessFile, `import '${normalizedPath}.${expect}'\n`) + smartAppendFileSync( + cssFile, + modules === 'commonjs' ? `require('${normalizedPath}.css')\n` : `import '${normalizedPath}.css'\n` + ) + smartAppendFileSync( + lessFile, + modules === 'commonjs' ? `require('${normalizedPath}.${expect}')\n` : `import '${normalizedPath}.${expect}'\n` + ) }) if (self) { - smartAppendFileSync(cssFile, `import '${normalizeStyleDependency(base, reg)}.css'\n`) - smartAppendFileSync(lessFile, `import '${normalizeStyleDependency(base, reg)}.${expect}'\n`) + smartAppendFileSync( + cssFile, + modules === 'commonjs' + ? `require('${normalizeStyleDependency(base, reg)}.css')\n` + : `import '${normalizeStyleDependency(base, reg)}.css'\n` + ) + smartAppendFileSync( + lessFile, + modules === 'commonjs' + ? `require('${normalizeStyleDependency(base, reg)}.${expect}')\n` + : `import '${normalizeStyleDependency(base, reg)}.${expect}'\n` + ) } return code.replace(reg, '') diff --git a/packages/varlet-cli/src/config/babel.config.ts b/packages/varlet-cli/src/config/babel.config.ts index e35ca9710ce..b160c6ab9d4 100644 --- a/packages/varlet-cli/src/config/babel.config.ts +++ b/packages/varlet-cli/src/config/babel.config.ts @@ -10,14 +10,14 @@ module.exports = (api?: ConfigAPI, options: PresetOption = {}) => { api.cache.never() } - const isTest = process.env.NODE_ENV === 'test' + const isCommonJS = process.env.NODE_ENV === 'test' || process.env.BABEL_MODULE === 'commonjs' return { presets: [ [ require.resolve('@babel/preset-env'), { - modules: isTest ? 'commonjs' : false, + modules: isCommonJS ? 'commonjs' : false, loose: options.loose, }, ], diff --git a/packages/varlet-cli/src/shared/constant.ts b/packages/varlet-cli/src/shared/constant.ts index 68a4267ccd7..5093aa224c0 100644 --- a/packages/varlet-cli/src/shared/constant.ts +++ b/packages/varlet-cli/src/shared/constant.ts @@ -4,6 +4,7 @@ export const CWD = process.cwd() export const VARLET_CONFIG = resolve(CWD, 'varlet.config.js') export const SRC_DIR = resolve(CWD, 'src') export const ES_DIR = resolve(CWD, 'es') +export const LIB_DIR = resolve(CWD, 'lib') export const UMD_DIR = resolve(CWD, 'umd') export const TYPES_DIR = resolve(CWD, 'types') export const ROOT_DOCS_DIR = resolve(CWD, 'docs') diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json index f70424a3d0a..b48de34e99e 100644 --- a/packages/varlet-ui/package.json +++ b/packages/varlet-ui/package.json @@ -3,6 +3,7 @@ "version": "1.23.3", "description": "A material like components library", "module": "es/index.js", + "main": "lib/index.js", "typings": "types/index.d.ts", "vetur": { "tags": "highlight/tags.json",