如何在 Web Worker 上填充 DOMParser 以供 AWS S3 SDK 上传使用？

Question

我们使用 AWS S3 SDK 将文件从浏览器上传到 S3 存储桶。由于文件的数量和大小可能很大并影响 UI 渲染和交互，因此我们决定将上传过程拉入 Web Worker 线程。这样用户就可以在我们的单页应用程序上自由导航和交互。

当我们上传小文件时，一切运行良好。问题是当 S3 SDK 尝试上传大文件时。它将文件分成几个块并单独上传每个块。 s3 服务器返回 XML 响应，S3 SDK 尝试使用 DOMParser 类解析它，该类未在 Web Worker 范围中定义。

有没有办法可以对 DOMParser 进行填充，以使 S3 SKD 在 Web Worker 上执行上传？

Answer 1

由于一些版本控制问题，jsdom 对我不起作用。但我能够使用以下代码为 aws sdk 填充 DOMParser。

var DOMParser = require('xmldom').DOMParser;
window.DOMParser = DOMParser;

运行 browserify 并创建 domparser.js

browserify main.js -o domparser.js

然后在导入aws sdk之前导入domparser.js

importScripts('domparser.js');
importScripts('https://sdk.amazonaws.com/js/aws-sdk-2.176.0.js');

Answer 2

回答我的问题：

我能够使用 jsdom 和 browserify

在 Web Worker 上填充 DOMParser

jsdom 模拟窗口环境，browserify 捆绑了 jsdom 在浏览器上执行（jsdom 本来是要在 Nodejs 上运行的）

效果很好。

Answer 3

在 2022 年，您还可以使用 linkedom 而不是 JSDOM 为 AWS sdk 填充 DOMParser。这会导致捆绑包变得更小（根据我的经验，约为 300kb，而不是 3mb）。

代码看起来像这样...

const linkedom = require('linkedom')
const { DOMParser } = linkedom
window.DOMParser = DOMParser

与其他答案一样，您可以使用 browserify 生成捆绑包。

browserify index.js -o domparser.js

然后只需在 AWS sdk 之前将该捆绑包导入到您的 Web Worker 中即可。

importScripts('domparser.js');