解决 1.95.0 vscode 无法实现 worker 发起网络请求的问题

public/index.html

@@ -12,27 +12,19 @@
     <link rel="stylesheet" href="vcd.css">
     <link rel="stylesheet" href="iconfont.css">
     <link rel="stylesheet" href="animation.css">
-    <!-- <script src="vcd.js"></script> -->
     <script></script>
 
     <script>
         window.readVcdFile = async () => {
             let inputVcdFile = 'test.vcd';
             let inputViewFile = 'test.view';
-
             const response = await fetch(inputVcdFile);
-            const blob = await response.blob();
-            const reader = new FileReader();
-            return new Promise((resolve, reject) => {
-                reader.onload = event => {
-                    const arrayBuffer = event.target.result;
-                    resolve([arrayBuffer, inputVcdFile, inputViewFile]);
-                };
-                reader.readAsArrayBuffer(blob);
-            });
+            const arrayBuffer = await response.arrayBuffer();            
+            return [arrayBuffer, inputVcdFile, inputViewFile];
         }
         window.workerPath = 'worker.js';
-        window.workerRoot = '';
+        window.vcdJsPath = 'vcd.js';
+        window.wasmPath = 'vcd.wasm';
     </script>
 </head>
 

public/worker.js

@@ -1,17 +1,8 @@
 self.onmessage = async event => {
-    const { arrayBuffer, workerRoot } = event.data;
-
-    self.locateFile = wasmBinaryFile => {
-        if (workerRoot) {
-            return workerRoot + (workerRoot.endsWith('/') ? '': '/') + wasmBinaryFile;
-        } else {
-            return wasmBinaryFile;
-        }
-    };
-    
-    importScripts('vcd.js');
-
-    const vcdstream = await makeVcdStream();
+    const { arrayBuffer, vcdSource, wasmBinary } = event.data;
+    eval(vcdSource);
+    const moduleArg = { wasmBinary };
+    const vcdstream = await makeVcdStream(moduleArg);
     vcdstream.consume(arrayBuffer);
     const info = vcdstream.getBasicInfo();
     self.postMessage(info);

src/App.vue

@@ -75,7 +75,13 @@ onMounted(async () => {
         type: 'classic'
     });
 
-    worker.postMessage({ arrayBuffer, workerRoot: window.workerRoot }, [arrayBuffer]);
+    const vcdSourceResponse = await fetch(window.vcdJsPath);
+    const vcdSource = await vcdSourceResponse.text();
+
+    const wasmBinaryResponse = await fetch(window.wasmPath);
+    const wasmBinary = await wasmBinaryResponse.arrayBuffer();
+    
+    worker.postMessage({ arrayBuffer, vcdSource, wasmBinary }, [arrayBuffer]);
 
     worker.addEventListener('message', event => {
         const workerVars = event.data;

src/hook/network.js

@@ -27,14 +27,15 @@ async function getCrossOriginWorkerURL (originalWorkerUrl, options = {}) {
     workerPath.pop();
 
     // 给 importScripts 的每一个引入的js文件增加 workerPath 组成绝对路径
-    const importScriptsFix = `const _importScripts = importScripts;
-const _fixImports = (url) => new URL(url, '${workerPath.join('/') + '/'}').href;
+//     const importScriptsFix = `const _importScripts = importScripts;
+// const _fixImports = (url) => new URL(url, '${workerPath.join('/') + '/'}').href;
 
-importScripts = (...urls) => _importScripts(...urls.map(_fixImports));
-`;
+// importScripts = (...urls) => _importScripts(...urls.map(_fixImports));
+// `;
 
     // 以 MIME 协议组成 blob，从而进行装载
-    let resultURL = `data:${type},` + encodeURIComponent(importScriptsFix + workerJsCode);
+    // let resultURL = `data:${type},` + encodeURIComponent(importScriptsFix + workerJsCode);
+    let resultURL = `data:${type},` + encodeURIComponent(workerJsCode);
     if (useBlob) {
         // 在外面再套一层 importScripts，这样第二次请求得到的 worker 就不是 blob worker 了
         // 直接使用 createObjectURL 请求一个 worker 的源码是不行的，因为这样得到的 blob worker