记一次worker踩坑

简单写一下worker的初次踩坑记录

1. 首先将.worker.js文件路径给Worker

需要注意的是这里的路径可能在打包后找不到文件，可以将.worker.js放在public文件夹下

const worker = new Worker('./downloadPhoto.worker.js');

2. 关于网络请求，worker支持XHR,fetch，当然也可以用基于XHR,fetch的第三方库

3. 在.worker.js中使用第三方库

importScripts("https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js");

4. 在.worker.js中没办法访问文件系统，也就是说没办法做上传、下载文件

5. 在将文件从.worker.js传递到外部时使用可转移的对象（Transferable object）

// downloadPhoto.worker.js
const buffer = content.buffer; // 获取底层的ArrayBuffer
postMessage({ methods: "download", message: { content } }, [buffer]);

// downloadPhoto.js
worker.onmessage = (e) => {
  ...
  const uint8Array = new Uint8Array(e.data.message.content);
  ...
})

6. 在微前端环境下，可能会出现跨域问题，我的解决办法是将.worker.js文件做为Blob

// downloadPhoto.worker.js
const buffer = content.buffer; // 获取底层的ArrayBuffer
postMessage({ methods: "download", message: { content } }, [buffer]);

// downloadPhoto.js
import downloadPhotoWorker from "./downloadPhoto.worker.js";
const workerURL = URL.createObjectURL(
  new Blob([`(${downloadPhotoWorker.toString()})()`])
);

const worker = new Worker(workerURL);