完成hmr功能
parent
6de1901742
commit
100e000609
|
|
@ -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(
|
||||
'</head>',
|
||||
" <script>window.process = {env: {NODE_ENV: 'development'}}</script></head>"
|
||||
` <script>window.process = {env: {NODE_ENV: '${
|
||||
isBuild ? 'production' : 'development'
|
||||
}'}}</script>\n${
|
||||
isBuild ? '' : ' <script src="/assets/ws.js"></script>'
|
||||
}</head>`
|
||||
)
|
||||
.replace('{{title}}', page.title || '')
|
||||
.replace('{{keywords}}', page.keywords || '')
|
||||
|
|
|
|||
64
lib/dev.js
64
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);
|
||||
}
|
||||
|
|
|
|||
11
lib/prod.js
11
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@bytedo/vue-live",
|
||||
"type": "module",
|
||||
"version": "0.0.15",
|
||||
"version": "0.1.0",
|
||||
"bin": {
|
||||
"vue-live": "index.js"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue