From 79dfc4b8cbe6b11d9ecce00e83c3ade1e639aca4 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 29 May 2022 21:41:57 +0800 Subject: [PATCH] feat(@vant/cli): auto complete mjs path (#10649) * feat(@vant/cli): auto complete mjs path * release: 3.5.0-beta.1 --- packages/vant-cli/src/common/constant.ts | 10 ++- .../vant-cli/src/compiler/compile-script.ts | 8 +- .../src/compiler/gen-style-deps-map.ts | 2 +- packages/vant-cli/src/compiler/get-deps.ts | 90 ++++++++++++++++--- packages/vant/package.json | 2 +- 5 files changed, 93 insertions(+), 19 deletions(-) diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts index ff9f7ec8e..89034bbb3 100644 --- a/packages/vant-cli/src/common/constant.ts +++ b/packages/vant-cli/src/common/constant.ts @@ -43,7 +43,15 @@ export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json'); export const POSTCSS_CONFIG_FILE = join(CJS_DIR, 'postcss.config.cjs'); export const JEST_CONFIG_FILE = join(CJS_DIR, 'jest.config.cjs'); -export const SCRIPT_EXTS = ['.js', '.jsx', '.vue', '.ts', '.tsx']; +export const SCRIPT_EXTS = [ + '.js', + '.jsx', + '.vue', + '.ts', + '.tsx', + '.mjs', + '.cjs', +]; export const STYLE_EXTS = ['.css', '.less', '.scss']; export function getPackageJson() { diff --git a/packages/vant-cli/src/compiler/compile-script.ts b/packages/vant-cli/src/compiler/compile-script.ts index ca1dd95b0..e1f14dd1f 100644 --- a/packages/vant-cli/src/compiler/compile-script.ts +++ b/packages/vant-cli/src/compiler/compile-script.ts @@ -16,12 +16,15 @@ export async function compileScript( return; } + const extensionMap = getVantConfig().build?.extensions; + const extension = extensionMap?.[format] || '.js'; + let code = readFileSync(filePath, 'utf-8'); if (!filePath.includes(`${sep}style${sep}`)) { code = replaceCSSImportExt(code); } - code = replaceScriptImportExt(code, '.vue', ''); + code = replaceScriptImportExt(code, filePath, extension); if (isJsx(filePath)) { const babelResult = await babel.transformAsync(code, { @@ -50,9 +53,8 @@ export async function compileScript( ({ code } = esbuildResult); - const extensionMap = getVantConfig().build?.extensions; - const extension = extensionMap?.[format] || '.js'; const jsFilePath = replaceExt(filePath, extension); + removeSync(filePath); outputFileSync(jsFilePath, code); } 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 9cd4c2ceb..e33605e55 100644 --- a/packages/vant-cli/src/compiler/gen-style-deps-map.ts +++ b/packages/vant-cli/src/compiler/gen-style-deps-map.ts @@ -22,7 +22,7 @@ export function checkStyleExists(component: string) { // analyze component dependencies function analyzeComponentDeps(components: string[], component: string) { const checkList: string[] = []; - const componentEntry = fillExt(join(SRC_DIR, component, 'index')); + const componentEntry = fillExt(join(SRC_DIR, component, 'index')).path; const record = new Set(); function search(filePath: string) { diff --git a/packages/vant-cli/src/compiler/get-deps.ts b/packages/vant-cli/src/compiler/get-deps.ts index 67fca202d..8c56f33a8 100644 --- a/packages/vant-cli/src/compiler/get-deps.ts +++ b/packages/vant-cli/src/compiler/get-deps.ts @@ -1,5 +1,5 @@ import { join } from 'path'; -import { SCRIPT_EXTS } from '../common/constant.js'; +import { SCRIPT_EXTS, STYLE_EXTS } from '../common/constant.js'; import { readFileSync, existsSync } from 'fs'; let depsMap: Record = {}; @@ -8,12 +8,19 @@ let existsCache: Record = {}; // https://regexr.com/47jlq const IMPORT_RE = /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g; +const EXPORT_FROM_RE = + /@?export\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g; function matchImports(code: string): string[] { const imports = code.match(IMPORT_RE) || []; return imports.filter((line) => !line.includes('import type')); } +function matchExportFroms(code: string): string[] { + const exportFroms = code.match(EXPORT_FROM_RE) || []; + return exportFroms.filter((line) => !line.includes('export type')); +} + function exists(filePath: string) { if (!(filePath in existsCache)) { existsCache[filePath] = existsSync(filePath); @@ -26,23 +33,36 @@ export function fillExt(filePath: string) { for (let i = 0; i < SCRIPT_EXTS.length; i++) { const completePath = `${filePath}${SCRIPT_EXTS[i]}`; if (exists(completePath)) { - return completePath; + return { + path: completePath, + isIndex: false, + }; } } for (let i = 0; i < SCRIPT_EXTS.length; i++) { const completePath = `${filePath}/index${SCRIPT_EXTS[i]}`; if (exists(completePath)) { - return completePath; + return { + path: completePath, + isIndex: true, + }; } } - return ''; + return { + path: '', + isIndex: false, + }; +} + +function getImportRelativePath(code: string) { + const divider = code.includes('"') ? '"' : "'"; + return code.split(divider)[1]; } function getPathByImport(code: string, filePath: string) { - const divider = code.includes('"') ? '"' : "'"; - const relativePath = code.split(divider)[1]; + const relativePath = getImportRelativePath(code); if (relativePath.includes('.')) { return fillExt(join(filePath, '..', relativePath)); @@ -64,7 +84,7 @@ export function getDeps(filePath: string) { const code = readFileSync(filePath, 'utf-8'); const imports = matchImports(code); const paths = imports - .map((item) => getPathByImport(item, filePath)) + .map((item) => getPathByImport(item, filePath)?.path) .filter((item) => !!item) as string[]; depsMap[filePath] = paths; @@ -74,14 +94,58 @@ export function getDeps(filePath: string) { return paths; } -// "import App from 'App.vue';" => "import App from 'App.xxx';" -export function replaceScriptImportExt(code: string, from: string, to: string) { - const importLines = matchImports(code); +/** + * 1. Replace .vue extension + * @example "import App from 'App.vue';" => "import App from 'App.xxx';" + * + * 2. if using .mjs or .cjs, complete the import path + * @example import './foo' -> import './foo.mjs' + * @example import './foo' -> import './foo/index.mjs' + */ +export function replaceScriptImportExt( + code: string, + filePath: string, + ext: string +) { + const imports = [...matchImports(code), ...matchExportFroms(code)]; - importLines.forEach((importLine) => { - const result = importLine.replace(from, to); - code = code.replace(importLine, result); + const updateImport = (index: number, newImport: string) => { + code = code.replace(imports[index], newImport); + imports[index] = newImport; + }; + + imports.forEach((line, index) => { + if (line.includes('.vue')) { + updateImport(index, line.replace('.vue', ext)); + } }); + if (ext === '.mjs' || ext === '.cjs') { + imports.forEach((line, index) => { + const isStyleImport = STYLE_EXTS.some((ext) => line.includes(ext)); + if (isStyleImport) { + return; + } + + const pathInfo = getPathByImport(line, filePath); + + if (pathInfo) { + const relativePath = getImportRelativePath(line); + + if (pathInfo.isIndex) { + const newLine = line.replace( + relativePath, + `${relativePath}/index${ext}` + ); + + updateImport(index, newLine); + } else { + const newLine = line.replace(relativePath, relativePath + ext); + updateImport(index, newLine); + } + } + }); + } + return code; } diff --git a/packages/vant/package.json b/packages/vant/package.json index d78ee0338..5aa387fad 100644 --- a/packages/vant/package.json +++ b/packages/vant/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "3.5.0-beta.0", + "version": "3.5.0-beta.1", "description": "Mobile UI Components built on Vue", "main": "lib/vant.cjs.js", "module": "es/index.mjs",