commit
f6305b61a2
|
@ -16,13 +16,12 @@ if (typeof ts != 'undefined') {
|
|||
}
|
||||
// @ts-ignore
|
||||
if (typeof sfc != 'undefined') {
|
||||
console.log(`sfc loaded`, sfc);
|
||||
console.log(`sfc loaded`);
|
||||
sfc.registerTS(() => ts);
|
||||
} else {
|
||||
console.log(`sfc undefined`);
|
||||
}
|
||||
|
||||
|
||||
console.log('serviceWorker version 2.3');
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
|
@ -95,7 +94,9 @@ self.addEventListener('fetch', event => {
|
|||
} else if (request.url.endsWith('.vue')) {
|
||||
const id = Date.now().toString();
|
||||
const scopeId = `data-v-${id}`;
|
||||
const { descriptor } = sfc.parse(text);
|
||||
// 后续处理sourceMap合并
|
||||
const { descriptor } = sfc.parse(text, { filename: request.url, sourceMap: true });
|
||||
// console.log({ descriptor });
|
||||
const hasScoped = descriptor.styles.some((s) => s.scoped);
|
||||
// 编译 script,因为可能有 script setup,还要进行 css 变量注入
|
||||
const script = sfc.compileScript(descriptor, {
|
||||
|
@ -110,11 +111,12 @@ self.addEventListener('fetch', event => {
|
|||
});
|
||||
// 用于存放代码,最后 join('\n') 合并成一份完整代码
|
||||
const codeList = [];
|
||||
// 重写 default
|
||||
vueFileMap.set(
|
||||
request.url + '?type=script',
|
||||
// 重写 default
|
||||
sfc.rewriteDefault(script.content, "__sfc_main__")
|
||||
.replace(`const __sfc_main__`, `export const __sfc_main__`)
|
||||
// import vue重新指向
|
||||
.replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`)
|
||||
.replaceAll(`from 'vue'`, `from '/game/vue.esm-browser.js'`)
|
||||
);
|
||||
|
@ -127,24 +129,22 @@ self.addEventListener('fetch', event => {
|
|||
filename: request.url, // 用于错误提示
|
||||
id: scopeId,
|
||||
scoped: hasScoped,
|
||||
inlineTemplate: true,
|
||||
compilerOptions: {
|
||||
scopeId: hasScoped ? scopeId : undefined,
|
||||
}
|
||||
});
|
||||
|
||||
codeList.push(`import { render } from '${request.url}?type=template'`);
|
||||
|
||||
vueFileMap.set(request.url + '?type=template', template.code
|
||||
.replace(`function render(_ctx, _cache) {`, str => str + 'console.log(_ctx);')
|
||||
// .replace(`function render(_ctx, _cache) {`, str => str + 'console.log(_ctx);')
|
||||
.replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`)
|
||||
.replaceAll(`from 'vue'`, `from '/game/vue.esm-browser.js'`)
|
||||
);
|
||||
|
||||
codeList.push(`import { render } from '${request.url}?type=template'`);
|
||||
codeList.push(`__sfc_main__.render = render;`);
|
||||
codeList.push(`export default __sfc_main__;`);
|
||||
|
||||
// 一个 Vue 文件,可能有多个 style 标签
|
||||
let styleIndex = 0;
|
||||
for (const styleBlock of descriptor.styles) {
|
||||
const styleCode = sfc.compileStyle({
|
||||
source: styleBlock.content,
|
||||
|
@ -152,11 +152,12 @@ self.addEventListener('fetch', event => {
|
|||
filename: request.url,
|
||||
scoped: styleBlock.scoped,
|
||||
});
|
||||
const styleDOM = `var el = document.createElement('style');\nel.innerHTML = \`${styleCode.code}\`;document.body.append(el);`;
|
||||
const varName = `el${ styleIndex }`;
|
||||
const styleDOM = `let ${ varName } = document.createElement('style');\n${ varName }.innerHTML = \`${styleCode.code}\`;\ndocument.body.append(${ varName });`;
|
||||
codeList.push(styleDOM);
|
||||
}
|
||||
const code = codeList.join('\n');
|
||||
js = code;
|
||||
js = codeList.join('\n');
|
||||
// console.log(js);
|
||||
}
|
||||
const rep = new Response(new Blob([js], { type: "text/javascript" }), {
|
||||
status: 200,
|
||||
|
|
Loading…
Reference in New Issue