From 69fc5f5415f0da92bb5f9deb55411277c2366951 Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 24 Feb 2023 15:45:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96scoped=E8=A7=A3=E6=9E=90;?= =?UTF-8?q?=E5=88=9D=E6=AD=A5=E6=94=AF=E6=8C=81=E5=A4=9A=E9=A1=B5=E5=BA=94?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/compile-vue.js | 54 +++++++++++++++++-------------- lib/constants.js | 2 +- lib/dev.js | 25 +++++++++++---- lib/prod.js | 79 ++++++++++++++++++++++++++++++++-------------- 4 files changed, 107 insertions(+), 53 deletions(-) diff --git a/lib/compile-vue.js b/lib/compile-vue.js index 66c0dc3..e2126e8 100644 --- a/lib/compile-vue.js +++ b/lib/compile-vue.js @@ -191,19 +191,39 @@ export function parseJs( export function compileVue(file, imports, options = {}, isBuild) { let code = (fs.cat(file) || '').toString().replace(/\r\n/g, '\n') let CACHE = options.CACHE || {} + let output = '', + scoped = false let js = code.match(JS_EXP) - let scss = code.matchAll(STYLE_EXP) + let scss = [...code.matchAll(STYLE_EXP)] let html = code.match(HTML_EXP) let hash = md5(file) - // console.log(typeof scss) - scss = [...scss].map(it => [it[0], it[1]]) + scss = scss + .map(it => { + let css + if (it.length > 2) { + css = compileScss(it[2]) + + if (it[1].includes('scoped')) { + scoped = true + css = scopeCss(css, hash) + } + } else { + css = compileScss(it[1]) + } + return css + }) + .join(' ') + js = js ? js[1] : '' html = (html ? html[1] : '').replace(/`/g, '\\`').replace(/\$\{/g, '\\${') - html = html.replace(/<([\w\-]+)([^>]*?)>/g, `<$1 data-${hash} $2>`) + + if (scoped) { + html = html.replace(/<([\w\-]+)([^>]*?)>/g, `<$1 data-${hash} $2>`) + } if (CACHE[file]) { CACHE[file] = { @@ -215,36 +235,24 @@ export function compileVue(file, imports, options = {}, isBuild) { CACHE[file] = { changed: false, js, html } } - js = parseJs(js, imports, options, isBuild).replace( + output += parseJs(js, imports, options, isBuild).replace( 'export default {', `export default {\n template: \`${html}\`,` ) - if (scss.length) { - scss = scss.map(it => { - let scoped = it[0].includes('scoped') - let css = compileScss(it[1]) - if (scoped) { - css = scopeCss(css, hash) - } - return css - }) - CACHE[file].css = scss.join(' ') + if (scss) { + CACHE[file].css = scss // 修正那反人类的windows路径 - js += ` + output += ` let stylesheet = new CSSStyleSheet() -stylesheet.path = '${file - .slice( - options.IS_MPA ? options.pagesDir.length : options.SOURCE_DIR.length - ) - .replace(/\\/g, '/')}' -stylesheet.replaceSync(\`${CACHE[file].css}\`) +stylesheet.path = '${file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')}' +stylesheet.replaceSync(\`${scss}\`) document.adoptedStyleSheets.push(stylesheet) ` } - return js + return output } /** diff --git a/lib/constants.js b/lib/constants.js index 5d6c6da..2e7d9b7 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -5,7 +5,7 @@ */ export const JS_EXP = /]*?>([\w\W]*?)<\/script>/ -export const STYLE_EXP = /]*?>([\w\W]*?)<\/style>/g +export const STYLE_EXP = /]*?)>([\w\W]*?)<\/style>/g export const HTML_EXP = /]*?>([\w\W]*?)\n<\/template>/ export const CSS_SHEET_EXP = /([@\w\.,#\-:>\+\~\|\(\)\[\]"'\=\s]+)\{/g diff --git a/lib/dev.js b/lib/dev.js index 599a288..4159624 100644 --- a/lib/dev.js +++ b/lib/dev.js @@ -149,12 +149,22 @@ export default async function createServer(root = '', conf = {}) { let file if (IS_MPA) { - file = join(pagesDir, rpath) + if (rpath.startsWith(currentPage)) { + rpath = rpath.slice(currentPage.length) + file = join(pagesDir, rpath) + } else { + file = join(SOURCE_DIR, rpath) + } } else { file = join(SOURCE_DIR, rpath) } if (!fs.isfile(file)) { - console.log(cyan(rpath), red(`not found!!!`)) + console.log( + '%s %s \n @try to read %s', + cyan(rpath), + red(`not found!!!`), + file + ) console.log( red( '请正确填写引入的文件路径, vue-live 不再自动补全【%s】\n' @@ -170,7 +180,6 @@ export default async function createServer(root = '', conf = {}) { IS_MPA, currentPage, SOURCE_DIR, - pagesDir, CACHE, DEPLOY_PATH }) @@ -197,11 +206,16 @@ export default async function createServer(root = '', conf = {}) { { pathname = pathname.replace(/^assets\/js\//, '') let file - if (pathname.startsWith(currentPage)) { - file = join(pagesDir, pathname) + if (IS_MPA) { + if (pathname.startsWith(currentPage)) { + file = join(pagesDir, pathname.slice(currentPage.length)) + } else { + file = join(pagesDir, pathname) + } } else { file = join(SOURCE_DIR, pathname) } + if (fs.isfile(file)) { code = fs.cat(file) } else if (fs.isfile(join(PUBLIC_DIR, pathname))) { @@ -306,7 +320,6 @@ export default async function createServer(root = '', conf = {}) { IS_MPA, currentPage, SOURCE_DIR, - pagesDir, CACHE, DEPLOY_PATH }) diff --git a/lib/prod.js b/lib/prod.js index 26dd654..2d17573 100644 --- a/lib/prod.js +++ b/lib/prod.js @@ -13,32 +13,23 @@ export default function compile(root = '', dist = '', conf = {}) { const IS_MPA = Object.keys(conf.pages).length > 1 let timeStart = Date.now() - let html = fs.cat(join(process.env.PWD, 'index.html')).toString() + let template = fs.cat(join(process.env.PWD, 'index.html')).toString() - let pagesDir = '', - currentPage = '' - - if (IS_MPA) { - } else { - let page - let list = fs.ls(SOURCE_DIR, true).map(it => ({ + let list = fs + .ls(SOURCE_DIR, true) + .map(it => ({ name: it.slice(SOURCE_DIR.length + 1), path: it, ext: parse(it).ext })) + .filter(it => fs.isfile(it.path)) - currentPage = Object.keys(conf.pages)[0] - page = conf.pages[currentPage] - - console.log('正在生成 %s ...', `${currentPage}.html`) - - for (let it of list) { - if (fs.isdir(it.path)) { - continue - } + let compileFiles = function (currentPage, page, files) { + for (let it of files) { // 入口文件, 特殊处理 - if (it.path === page.entry) { + if (page && it.path === page.entry) { let entry = fs.cat(page.entry).toString() + entry = parseJs( entry, conf.imports, @@ -46,7 +37,11 @@ export default function compile(root = '', dist = '', conf = {}) { true ) - let code = parseHtml(html, { page, imports: conf.imports, entry }, true) + let code = parseHtml( + template, + { page, imports: conf.imports, entry }, + true + ) fs.echo(code, join(dist, `${currentPage}.html`)) continue @@ -60,14 +55,19 @@ export default function compile(root = '', dist = '', conf = {}) { let code = compileVue( it.path, conf.imports, - { IS_MPA, currentPage, SOURCE_DIR, pagesDir, DEPLOY_PATH }, + { IS_MPA, currentPage, SOURCE_DIR, DEPLOY_PATH }, true ) Es.transform(code, { minify: true }).then(r => { fs.echo( r.code, - join(dist, `assets/js/${it.name.split('.').shift()}.js`) + join( + dist, + 'assets/js/', + IS_MPA ? currentPage : '', + it.name.replace(/\.vue$/, '.js') + ) ) }) } @@ -84,7 +84,10 @@ export default function compile(root = '', dist = '', conf = {}) { true ) Es.transform(code, { minify: true }).then(r => { - fs.echo(r.code, join(dist, `assets/js/${it.name}`)) + fs.echo( + r.code, + join(dist, 'assets/js/', IS_MPA ? currentPage : '', it.name) + ) }) } break @@ -105,11 +108,41 @@ export default function compile(root = '', dist = '', conf = {}) { break } } + } + for (let currentPage in conf.pages) { + let page = conf.pages[currentPage] + let dir = dirname(page.entry) + + let files = [] + + fs.ls(dir, true).forEach(it => { + if (fs.isdir(it)) { + return + } + let idx = list.findIndex(_ => _.path === it) + list.splice(idx, 1) + files.push({ + name: it.slice(dir.length + 1), + path: it, + ext: parse(it).ext + }) + }) + + console.log('正在生成 %s ...', `${currentPage}.html`) + compileFiles(currentPage, page, files) + } + + console.log('正在解析公共依赖 ...') + compileFiles('', null, list) + + // + if (fs.isdir(PUBLIC_DIR)) { + console.log('正在处理静态资源 ...') fs.ls(PUBLIC_DIR, true).forEach(it => { if (fs.isfile(it)) { let name = it.slice(PUBLIC_DIR.length + 1) - console.log('正在复制静态文件 %s ...', name) + console.log(' 正在复制 %s ...', name) fs.cp(it, join(dist, name)) } })