From 100e000609a0dd9390cb64965384013541982b8f Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 31 Jan 2023 19:17:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90hmr=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/compile-vue.js | 34 +++++++++++++++++++----- lib/dev.js | 64 ++++++++++++++++++++++++++++++++++------------ lib/prod.js | 11 +++++--- package.json | 2 +- 4 files changed, 83 insertions(+), 28 deletions(-) diff --git a/lib/compile-vue.js b/lib/compile-vue.js index debc363..0df2793 100644 --- a/lib/compile-vue.js +++ b/lib/compile-vue.js @@ -126,12 +126,16 @@ export function parseJs( .replace(/import (["'])(.*?)\1/g, function (m, q, name) { if (name.endsWith('.css') || name.endsWith('.scss')) { if (name.startsWith('@/')) { - name = name.replace('@/', '/assets/css/') + name = name.replace('@/', '/') + } + + if (isBuild) { + name = name.replace(/\.scss/, '.css') } let tmp = `style${Date.now()}` fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n` - return `import ${tmp} from '${name}' assert { type: 'css' }` + return `import ${tmp} from '${name}' assert { type: 'css' }\n${tmp}.path = '${name}'` } else { if (name.startsWith('@/')) { name = name.replace('@/', '/assets/js/') @@ -159,23 +163,34 @@ export function parseJs( */ export function compileVue(file, imports, options = {}, isBuild) { let code = (fs.cat(file) || '').toString() + let CACHE = options.CACHE || {} let js = code.match(JS_EXP) let scss = code.matchAll(STYLE_EXP) let html = code.match(HTML_EXP) - let fixedStyle = '\n\n' let hash = md5(file) // console.log(typeof scss) scss = [...scss].map(it => [it[0], it[1]]) js = js ? js[1] : '' + html = (html ? html[1] : '').replace(/`/g, '\\`').replace(/\$\{/g, '\\${') html = html.replace(/<([\w\-]+)([^>]*?)>/g, `<$1 data-${hash} $2>`) + if (CACHE[file]) { + CACHE[file] = { + changed: CACHE[file].js !== js || CACHE[file].html !== html, + js, + html + } + } else { + CACHE[file] = { changed: false, js, html } + } + js = parseJs(js, imports, options, isBuild).replace( 'export default {', - `${fixedStyle}export default {\n template: \`${html}\`,` + `export default {\n template: \`${html}\`,` ) if (scss.length) { @@ -187,13 +202,14 @@ export function compileVue(file, imports, options = {}, isBuild) { } return css }) + CACHE[file].css = scss.join(' ') js += ` let stylesheet = new CSSStyleSheet() stylesheet.path = '${file.slice( options.IS_MPA ? options.pagesDir.length : options.root.length )}' -stylesheet.replaceSync(\`${scss.join(' ')}\`) +stylesheet.replaceSync(\`${CACHE[file].css}\`) document.adoptedStyleSheets.push(stylesheet) ` } @@ -204,11 +220,15 @@ document.adoptedStyleSheets.push(stylesheet) /** * 解析模板html */ -export function parseHtml(html, { page, imports, entry }) { +export function parseHtml(html, { page, imports, entry }, isBuild = false) { return html .replace( '', - " " + ` \n${ + isBuild ? '' : ' ' + }` ) .replace('{{title}}', page.title || '') .replace('{{keywords}}', page.keywords || '') diff --git a/lib/dev.js b/lib/dev.js index 3c91c76..d9f18bb 100644 --- a/lib/dev.js +++ b/lib/dev.js @@ -13,6 +13,7 @@ import { COMMON_HEADERS } from './constants.js' const noc = Buffer.from('') const SERVER_OPTIONS = {} +const CACHE = {} //文件缓存, 用于hmr export default async function createServer(root = '', conf = {}) { const IS_MPA = Object.keys(conf.pages).length > 1 @@ -141,8 +142,10 @@ export default async function createServer(root = '', conf = {}) { IS_MPA, currentPage, root, - pagesDir + pagesDir, + CACHE }) + res.setHeader('content-type', MIME_TYPES.js) } break @@ -150,7 +153,12 @@ export default async function createServer(root = '', conf = {}) { case 'scss': case 'css': { - let file = join(root, pathname.replace(/^assets\/css\//, '')) + let file = join( + root, + pathname + .replace(/^assets\/css\//, '') + .replace(/^assets\/js\//, '') + ) code = compileScss(file) res.setHeader('content-type', MIME_TYPES.css) } @@ -228,33 +236,57 @@ export default async function createServer(root = '', conf = {}) { }) chokidar - .watch(root) - .on('all', (act, file) => { + .watch([root, join(root, '../index.html')]) + .on('all', (act, filePath) => { if (ready) { + let file = filePath.slice(root.length) + if (act === 'add' || act === 'change') { let ext = file.slice(file.lastIndexOf('.') + 1) - console.log(ext) switch (ext) { - case 'js': - ws.send({ action: 'reload' }) - break - case 'css': case 'scss': - ws.send({ action: 'render' }) + { + let content = fs.cat(filePath).toString() + ws.send({ action: 'render', data: { path: file, content } }) + } + break + + case 'vue': + { + // console.log('>>>>', file) + let content = compileVue(filePath, conf.imports, { + IS_MPA, + currentPage, + root, + pagesDir, + CACHE + }) + let tmp = CACHE[filePath] + // console.log(tmp); + if (tmp.changed) { + console.log('需要刷新了') + ws.send({ action: 'reload' }) + } else { + ws.send({ + action: 'render', + data: { path: file, content: tmp.css } + }) + } + } + break + + default: + ws.send({ action: 'reload' }) break } + } else if (act === 'unlink' || act === 'unlinkDir') { + ws.send({ action: 'reload' }) } } }) .on('ready', () => { ready = true - console.log('预处理完成,监听文件变化中,请勿关闭本窗口...') }) - - // setInterval(() => { - - // ws.send({action: Math.random() < 0.5 ? 'render' : 'reload',data:'hello from vue-live'}) - // }, 2000); } diff --git a/lib/prod.js b/lib/prod.js index bcd3783..52d921a 100644 --- a/lib/prod.js +++ b/lib/prod.js @@ -37,7 +37,7 @@ export default function compile(root = '', dist = '', conf = {}) { let entry = fs.cat(page.entry).toString() entry = parseJs(entry, conf.imports, { IS_MPA, currentPage }, true) - let code = parseHtml(html, { page, imports: conf.imports, entry }) + let code = parseHtml(html, { page, imports: conf.imports, entry }, true) fs.echo(code, join(dist, `${currentPage}.html`)) continue @@ -91,11 +91,14 @@ export default function compile(root = '', dist = '', conf = {}) { fs.cp(it.path, join(dist, it.name)) break - case 'scss': - case 'css': + case '.scss': + case '.css': { let code = compileScss(it.path) - fs.echo(code, join(dist, it.name)) + if (!it.name.startsWith('assets')) { + it.name = 'assets/js/' + it.name + } + fs.echo(code, join(dist, it.name.replace(/\.scss$/, '.css'))) } break diff --git a/package.json b/package.json index 5dabffc..17f854c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bytedo/vue-live", "type": "module", - "version": "0.0.15", + "version": "0.1.0", "bin": { "vue-live": "index.js" },