YunFeiyang
/
noname
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加import css的支持(没有导出值)

This commit is contained in:
nonameShijian 2024-03-19 20:48:12 +08:00
parent 608b1e700d
commit 43e1e49eb0
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
service-worker.js
View File

@ -60,9 +60,9 @@ self.addEventListener('fetch', event => {
event.respondWith(rep); event.respondWith(rep);
return; return;
} }
if (!['.ts', '.json', '.vue'].some(ext => request.url.endsWith(ext))) return; if (!['.ts', '.json', '.vue', 'css'].some(ext => request.url.endsWith(ext))) return;
if (request.url.endsWith('.d.ts')) return; if (request.url.endsWith('.d.ts')) return;
if (request.url.endsWith('.json')) { if (request.url.endsWith('.json') || request.url.endsWith('css')) {
// @ts-ignore // @ts-ignore
if (!event.request.headers.get('origin')) return; if (!event.request.headers.get('origin')) return;
} }
@ -82,7 +82,7 @@ self.addEventListener('fetch', event => {
return res.text().then(text => { return res.text().then(text => {
let js; let js;
if (request.url.endsWith('.json')) { if (request.url.endsWith('.json')) {
js = `export default ${text}`; js = `export default ${ text }`;
} else if (request.url.endsWith('.ts')) { } else if (request.url.endsWith('.ts')) {
js = ts.transpile(text, { js = ts.transpile(text, {
module: ts.ModuleKind.ES2015, module: ts.ModuleKind.ES2015,
@ -93,7 +93,7 @@ self.addEventListener('fetch', event => {
}, request.url); }, request.url);
} else if (request.url.endsWith('.vue')) { } else if (request.url.endsWith('.vue')) {
const id = Date.now().toString(); const id = Date.now().toString();
const scopeId = `data-v-${id}`; const scopeId = `data-v-${ id }`;
// 后续处理sourceMap合并 // 后续处理sourceMap合并
const { descriptor } = sfc.parse(text, { filename: request.url, sourceMap: true }); const { descriptor } = sfc.parse(text, { filename: request.url, sourceMap: true });
// console.log({ descriptor }); // console.log({ descriptor });
@ -126,8 +126,8 @@ self.addEventListener('fetch', event => {
.replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`) .replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`)
.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(`import { __sfc_main__ } from '${ request.url }?type=script'`);
codeList.push(`__sfc_main__.__scopeId = '${scopeId}'`); codeList.push(`__sfc_main__.__scopeId = '${ scopeId }'`);
// 编译模板，转换成 render 函数 // 编译模板，转换成 render 函数
const template = sfc.compileTemplate({ const template = sfc.compileTemplate({
@ -146,7 +146,7 @@ self.addEventListener('fetch', event => {
.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(`import { render } from '${ request.url }?type=template'`);
codeList.push(`__sfc_main__.render = render;`); codeList.push(`__sfc_main__.render = render;`);
codeList.push(`export default __sfc_main__;`); codeList.push(`export default __sfc_main__;`);
// 一个 Vue 文件，可能有多个 style 标签 // 一个 Vue 文件，可能有多个 style 标签
@ -159,11 +159,19 @@ self.addEventListener('fetch', event => {
scoped: styleBlock.scoped, scoped: styleBlock.scoped,
}); });
const varName = `el${ styleIndex }`; const varName = `el${ styleIndex }`;
const styleDOM = `let ${ varName } = document.createElement('style');\n${ varName }.innerHTML = \`${styleCode.code}\`;\ndocument.body.append(${ varName });`; const styleDOM = `let ${ varName } = document.createElement('style');\n${ varName }.innerHTML = \`${ styleCode.code }\`;\ndocument.body.append(${ varName });`;
codeList.push(styleDOM); codeList.push(styleDOM);
} }
js = codeList.join('\n'); js = codeList.join('\n');
// console.log(js); // console.log(js);
} else if (request.url.endsWith('css')) {
const id = Date.now().toString();
const scopeId = `data-v-${ id }`;
js = `const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.setAttribute('data-vue-dev-id', \`${ scopeId }\`);
style.textContent = ${ JSON.stringify(text) };
document.head.appendChild(style);`;
} }
const rep = new Response(new Blob([js], { type: "text/javascript" }), { const rep = new Response(new Blob([js], { type: "text/javascript" }), {
status: 200, status: 200,