diff --git a/service-worker.js b/service-worker.js index 1c7e35a1b..43efb15ee 100644 --- a/service-worker.js +++ b/service-worker.js @@ -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,16 +111,17 @@ 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'`) ); codeList.push(`import { __sfc_main__ } from '${request.url}?type=script'`); - codeList.push(`__sfc_main__.__scopeId='${scopeId}'`); + codeList.push(`__sfc_main__.__scopeId = '${scopeId}'`); // 编译模板,转换成 render 函数 const template = sfc.compileTemplate({ @@ -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,