474 lines
12 KiB
JavaScript
474 lines
12 KiB
JavaScript
/**
|
|
* {}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2022/09/06 14:43:01
|
|
*/
|
|
|
|
import fs from 'iofs'
|
|
import scss from '@bytedo/sass'
|
|
import Es from 'esbuild'
|
|
|
|
import { compile } from '@vue/compiler-dom'
|
|
import { red, cyan, blue } from 'kolorist'
|
|
|
|
import {
|
|
JS_EXP,
|
|
STYLE_EXP,
|
|
HTML_EXP,
|
|
CSS_SHEET_EXP,
|
|
V_DEEP,
|
|
PERCENT_EXP,
|
|
SHEETS_DEF,
|
|
LEGACY_POLYFILL
|
|
} from './constants.js'
|
|
import { createHmrScript, md5, uuid, urlJoin } from './utils.js'
|
|
|
|
const OPTIONS = {
|
|
style: 'compressed'
|
|
}
|
|
|
|
function minify(code) {
|
|
return Es.transformSync(code, { minify: true }).code.trim()
|
|
}
|
|
|
|
// 处理css中的 :deep()
|
|
function parseVDeep(curr, val, scoped) {
|
|
let res = V_DEEP.exec(curr)
|
|
if (res) {
|
|
scoped && (val = val.replace(/\[data\-[^\]]+\]/g, ''))
|
|
return `${res[1] + res[2]} ${val}`
|
|
} else {
|
|
return `${curr} ${val}`
|
|
}
|
|
}
|
|
|
|
// 处理style中的scoped属性
|
|
function scopeCss(css = '', hash) {
|
|
return css.replace(CSS_SHEET_EXP, (m, selector) => {
|
|
if (!selector.startsWith('@')) {
|
|
selector = selector.split(',')
|
|
|
|
selector = selector
|
|
.map(s => {
|
|
// 针对 @keyframe的处理
|
|
if (s === 'from' || s === 'to' || PERCENT_EXP.test(s)) {
|
|
return s
|
|
}
|
|
let tmp = s.split(' ')
|
|
let output = ''
|
|
let last
|
|
let scoped = false
|
|
|
|
while ((last = tmp.pop())) {
|
|
if (scoped) {
|
|
if (last.startsWith(':')) {
|
|
output = parseVDeep(last, output, true)
|
|
} else {
|
|
output = `${last}[data-${hash}] ${output}`
|
|
}
|
|
} else {
|
|
if (last.includes(':')) {
|
|
if (last.startsWith(':')) {
|
|
output = parseVDeep(last, output)
|
|
} else {
|
|
scoped = true
|
|
last = last.replace(':', `[data-${hash}]:`)
|
|
output = `${last} ${output}`
|
|
}
|
|
} else {
|
|
scoped = true
|
|
output = `${last}[data-${hash}] ${output}`
|
|
}
|
|
}
|
|
}
|
|
|
|
return output
|
|
})
|
|
.join(', ')
|
|
}
|
|
return selector + '{'
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 编译scss为css
|
|
* @param file <String> 文件路径或scss代码
|
|
* @param inject <String> 要注入的scss代码
|
|
*/
|
|
export function compileScss(file, inject = '') {
|
|
try {
|
|
if (fs.isfile(file)) {
|
|
return scss.compile(file, OPTIONS).css.trim()
|
|
} else {
|
|
return scss.compileString(inject + file, OPTIONS).css.trim()
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 解析js
|
|
* 主要是处理js的依赖引用
|
|
* @param code <String> js代码
|
|
*/
|
|
export function parseJs(
|
|
code = '',
|
|
imports,
|
|
{ IS_MPA, currentPage, IS_ENTRY, DEPLOY_PATH, LEGACY_MODE, define } = {},
|
|
filename,
|
|
linePatch = 1
|
|
) {
|
|
let fixedStyle = ''
|
|
let ASSETS_DIR = '/@/'
|
|
let isBuild = process.env.NODE_ENV === 'production'
|
|
|
|
if (isBuild) {
|
|
ASSETS_DIR = '/assets/'
|
|
}
|
|
|
|
try {
|
|
code = Es.transformSync(code).code || ''
|
|
} catch (e) {
|
|
let err = e.errors.pop()
|
|
let lines = code.split('\n')
|
|
|
|
console.log('%s: %s', red('Uncaught SyntaxError'), red(err.text))
|
|
// 将上下文几行都打印出来
|
|
for (let i = err.location.line - 3; i <= err.location.line + 1; i++) {
|
|
console.log(
|
|
' @ line %d: %s',
|
|
i + linePatch,
|
|
err.location.line === i + 1 ? red(lines[i]) : lines[i]
|
|
)
|
|
}
|
|
console.log(
|
|
' @ %s:%d:%d',
|
|
blue(filename),
|
|
err.location.line + linePatch - 1,
|
|
err.location.column
|
|
)
|
|
}
|
|
|
|
code = code
|
|
.replace(/\r\n/g, '\n')
|
|
.replace(/process\.env\.NODE_ENV/g, `'${process.env.NODE_ENV}'`)
|
|
.replace(
|
|
/(import|export) ([^'"]*?) from (["'])(.*?)\3/g,
|
|
function (m, t, alias, q, name) {
|
|
if (name.startsWith('@/')) {
|
|
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
}
|
|
|
|
if (!imports[name]) {
|
|
if (name.startsWith('./') || name.startsWith('../')) {
|
|
if (IS_ENTRY) {
|
|
if (IS_MPA) {
|
|
name = `pages/${currentPage}/` + name
|
|
}
|
|
name = urlJoin(DEPLOY_PATH, ASSETS_DIR, name)
|
|
}
|
|
} else if (
|
|
name.startsWith('/') &&
|
|
!name.startsWith('//') &&
|
|
!name.startsWith(urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
) {
|
|
name = name.replace(/^\//, urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
}
|
|
|
|
if (
|
|
!name.endsWith('.js') &&
|
|
!name.endsWith('.mjs') &&
|
|
!name.endsWith('.vue')
|
|
) {
|
|
if (name.includes('components')) {
|
|
name += '.vue'
|
|
} else {
|
|
name += '.js'
|
|
}
|
|
}
|
|
}
|
|
if (isBuild) {
|
|
name = name.replace(/\.vue$/, '.js')
|
|
}
|
|
if (alias.trim() === '*') {
|
|
return `${t} ${alias} from '${name}'`
|
|
}
|
|
let _alias = alias
|
|
let _import = ''
|
|
if (alias.includes('* as')) {
|
|
_alias = ' default ' + alias.replace('* as', '').trim()
|
|
}
|
|
|
|
_import = `import ${alias} from '${name}'`
|
|
_import += t === 'export' ? `\nexport ${_alias}` : ''
|
|
|
|
return _import
|
|
}
|
|
)
|
|
.replace(/import\((['"])(.*?)\1\)/g, function (m, q, name) {
|
|
if (isBuild) {
|
|
name = name.replace(/\.vue$/, '.js')
|
|
}
|
|
if (name.startsWith('@/')) {
|
|
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
}
|
|
if (name.endsWith('.json')) {
|
|
name += '.js'
|
|
}
|
|
return `import('${name}')`
|
|
})
|
|
.replace(/import (["'])(.*?)\1/g, function (m, q, name) {
|
|
if (name.endsWith('.css') || name.endsWith('.scss')) {
|
|
if (name.startsWith('@/')) {
|
|
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
}
|
|
|
|
if (isBuild) {
|
|
name = name.replace(/\.scss/, '.css')
|
|
}
|
|
// 修正那反人类的windows路径
|
|
let _name = name.replace(/\\/g, '/').replace('@/', '')
|
|
let tmp = `style_${uuid()}`
|
|
|
|
// 因为esm语法的变更, 原先的 import xx from xx assets {type: css} 变为了 with
|
|
// 而这个语法的变化, 构建工具无法做版本判断, 故, 统一降级到fetch()加载
|
|
if (LEGACY_MODE) {
|
|
fixedStyle +=
|
|
`{\n` +
|
|
` let stylesheet = document.createElement('style');\n` +
|
|
` stylesheet.setAttribute('name', '${_name}');\n` +
|
|
` stylesheet.textContent = ${tmp};\n` +
|
|
` document.head.appendChild(stylesheet);\n` +
|
|
`}\n`
|
|
|
|
return `let ${tmp};\n!(async function(){\n ${tmp} = await __fite_import('${name}', import.meta.url);\n})()`
|
|
} else {
|
|
// CSSStyleSheet.replaceSync 需要FF v101, Safari 16.4才支持
|
|
fixedStyle +=
|
|
`{\n` +
|
|
` let stylesheet = new CSSStyleSheet();\n` +
|
|
` stylesheet.path = '${_name}';\n` +
|
|
` stylesheet.replaceSync(${tmp} );\n` +
|
|
` __sheets__.push(stylesheet);\n` +
|
|
` document.adoptedStyleSheets = __sheets__;\n` +
|
|
`}\n`
|
|
|
|
return `const ${tmp} = await __fite_import('${name}', import.meta.url)`
|
|
}
|
|
} else {
|
|
if (name.startsWith('@/')) {
|
|
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
}
|
|
//
|
|
if (!imports[name]) {
|
|
if (name.startsWith('./') || name.startsWith('../')) {
|
|
if (IS_ENTRY) {
|
|
if (IS_MPA) {
|
|
name = `${currentPage}/` + name
|
|
}
|
|
name = urlJoin(DEPLOY_PATH, ASSETS_DIR, name)
|
|
}
|
|
} else if (
|
|
name.startsWith('/') &&
|
|
!name.startsWith('//') &&
|
|
!name.startsWith(urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
) {
|
|
name = name.replace(/^\//, urlJoin(DEPLOY_PATH, ASSETS_DIR))
|
|
}
|
|
|
|
if (
|
|
!name.endsWith('.js') &&
|
|
!name.endsWith('.mjs') &&
|
|
!name.endsWith('.vue')
|
|
) {
|
|
name += '.js'
|
|
}
|
|
}
|
|
|
|
return `import '${name}'`
|
|
}
|
|
})
|
|
|
|
for (let key in define) {
|
|
code = code.replaceAll(key, define[key])
|
|
}
|
|
|
|
if (fixedStyle) {
|
|
code += '\n\n' + (IS_ENTRY ? SHEETS_DEF : '') + fixedStyle
|
|
|
|
if (IS_ENTRY && !LEGACY_MODE) {
|
|
code += '\ndocument.adoptedStyleSheets = __sheets__'
|
|
}
|
|
}
|
|
|
|
return code
|
|
}
|
|
|
|
/**
|
|
* 将vue转为js
|
|
* @param file <String> 文件路径
|
|
* @return <String> 返回转换后的js代码
|
|
*/
|
|
export async function compileVue(file, imports, options = {}) {
|
|
// 修正那反人类的windows路径
|
|
let filename = file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')
|
|
let code = (fs.cat(file) || '').toString().replace(/\r\n/g, '\n')
|
|
let CACHE = options.CACHE || {}
|
|
let { isCustomElement } = options
|
|
let output = '',
|
|
scoped = false
|
|
|
|
let js = code.match(JS_EXP)
|
|
let scss = [...code.matchAll(STYLE_EXP)]
|
|
let html = code.match(HTML_EXP) || ['', '']
|
|
let linePatch = code.slice(0, js?.index || 0).split('\n').length // js起始行数修正
|
|
|
|
let hash = md5(file)
|
|
let scopeId = 'data-' + hash
|
|
|
|
scss = scss
|
|
.map(it => {
|
|
let css
|
|
if (it.length > 2) {
|
|
css = compileScss(it[2], options.INJECT_SCSS)
|
|
|
|
if (it[1].includes('scoped')) {
|
|
scoped = true
|
|
css = scopeCss(css, hash)
|
|
}
|
|
} else {
|
|
css = compileScss(it[1], options.INJECT_SCSS)
|
|
}
|
|
|
|
return css
|
|
})
|
|
.join(' ')
|
|
|
|
for (let fn of options.plugin) {
|
|
scss = await fn('css', scss)
|
|
}
|
|
|
|
js = js ? js[1] : 'export default {}'
|
|
|
|
try {
|
|
html = compile(html[1], {
|
|
mode: 'module',
|
|
prefixIdentifiers: true,
|
|
hoistStatic: true,
|
|
cacheHandlers: true,
|
|
scopeId: scoped ? scopeId : void 0,
|
|
sourceMap: false,
|
|
isCustomElement
|
|
}).code.replace('export function render', 'function render')
|
|
} catch (err) {
|
|
let lines = html[1].split('\n')
|
|
let line = lines[err.loc?.start.line - 1]
|
|
|
|
console.log('%s: %s', red('SyntaxError'), red(err.message))
|
|
console.log(
|
|
' @ %s%s%s',
|
|
line.slice(0, err.loc.start.column - 1),
|
|
red(err.loc.source),
|
|
line.slice(err.loc.end.column - 1)
|
|
)
|
|
console.log(
|
|
' @ (%s:%d:%d)\n',
|
|
file,
|
|
err.loc.start.line,
|
|
err.loc.start.column
|
|
)
|
|
html = `
|
|
import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
|
|
|
function render(_ctx, _cache) {
|
|
return (_openBlock(), _createElementBlock("div", null, "SyntaxError: ${err.message}"))
|
|
}
|
|
`
|
|
}
|
|
|
|
html = html
|
|
.replace(/import .* from "vue"/, str => {
|
|
output += str + '\n'
|
|
return ''
|
|
})
|
|
.trim()
|
|
|
|
if (CACHE[file]) {
|
|
CACHE[file] = {
|
|
changed: CACHE[file].js !== js || CACHE[file].html !== html,
|
|
js,
|
|
html
|
|
}
|
|
} else {
|
|
CACHE[file] = { changed: false, js, html }
|
|
}
|
|
|
|
output += parseJs(js, imports, options, file, linePatch).replace(
|
|
'export default {',
|
|
`\n${
|
|
options.LEGACY_MODE ? '' : SHEETS_DEF
|
|
}${html}\n\nconst __sfc__ = {\n render,\n`
|
|
)
|
|
|
|
if (scss) {
|
|
CACHE[file].css = scss
|
|
|
|
if (options.LEGACY_MODE) {
|
|
output += `
|
|
{
|
|
let stylesheet = document.createElement('style')
|
|
stylesheet.setAttribute('name', '${filename}')
|
|
stylesheet.textContent = \`${scss}\`
|
|
document.head.appendChild(stylesheet)
|
|
}
|
|
`
|
|
} else {
|
|
output += `
|
|
{
|
|
let stylesheet = new CSSStyleSheet()
|
|
stylesheet.path = '${filename}'
|
|
stylesheet.replaceSync(\`${scss}\`)
|
|
__sheets__.push(stylesheet)
|
|
}
|
|
document.adoptedStyleSheets = __sheets__
|
|
`
|
|
}
|
|
}
|
|
if (scoped) {
|
|
output += `__sfc__.__scopeId = '${scopeId}'\n`
|
|
}
|
|
output += `__sfc__.__file = '${filename}'\nexport default __sfc__`
|
|
|
|
return output
|
|
}
|
|
|
|
/**
|
|
* 解析模板html
|
|
*/
|
|
export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
|
|
return html
|
|
.replace(/\r\n/g, '\n')
|
|
.replace(
|
|
'</head>',
|
|
`${
|
|
process.env.NODE_ENV === 'development'
|
|
? ` <script>${minify(createHmrScript(LEGACY_MODE))}</script>\n`
|
|
: ` <script>${minify(LEGACY_POLYFILL)}</script>\n`
|
|
}</head>`
|
|
)
|
|
.replace('{{title}}', page.title || '')
|
|
.replace('{{keywords}}', page.keywords || '')
|
|
.replace('{{description}}', page.description || '')
|
|
.replace('{{importmap}}', JSON.stringify({ imports }))
|
|
.replace(
|
|
'<script src="main.js"></script>',
|
|
`<script type="module">\n${entry}\n</script>`
|
|
)
|
|
.replace(/\{\{#if(.*?)\}\}([\w\W]*?)\{\{#\/if\}\}/g, (m, c, code) => {
|
|
let res = Function('return ' + c)()
|
|
return res ? code : ''
|
|
})
|
|
.replace(/process\.env\.NODE_ENV/g, `'${process.env.NODE_ENV}'`)
|
|
}
|