Angular 13 Web Worker使用@azure/storage-blob报DOM缺失错误

问题根源 #

@azure/storage-blob 解析接口返回的XML内容时，默认会从全局上下文查找document/DOMParser/Node/XMLSerializer这几个DOM API，而Web Worker运行上下文不存在这些浏览器主线程才有的DOM对象，直接导入使用就会抛依赖缺失错误。不推荐引入全量JSDOM适配，JSDOM是面向Node.js环境的实现，打包到浏览器端会带来数MB的体积冗余，还会触发大量Node内置模块的兼容问题，用轻量浏览器兼容的XML DOM实现做polyfill即可。

具体配置步骤 #

1. 安装轻量DOM实现依赖 #

执行命令安装无Node依赖、兼容浏览器环境的XML DOM库：

npm install @xmldom/xmldom --save

2. 在Web Worker文件顶部提前注入全局polyfill #

核心注意点：polyfill注入必须写在所有@azure/storage-blob相关导入语句之前，Azure SDK在模块初始化阶段就会做全局依赖检测，顺序错误依然会抛错。
修改后的Worker完整代码参考：

/// <reference lib="webworker" />
// --------------- polyfill 注入 start ---------------
import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
const workerGlobal = self as unknown as Record<string, unknown>;
workerGlobal.DOMParser = DOMParser;
workerGlobal.XMLSerializer = XMLSerializer;
// SDK仅检测document对象存在性，不需要完整实现，传空对象即可通过校验
workerGlobal.document = {};
// 补全Node节点类型常量，满足XML解析逻辑的调用需求
workerGlobal.Node = {
  ELEMENT_NODE: 1,
  ATTRIBUTE_NODE: 2,
  TEXT_NODE: 3,
  CDATA_SECTION_NODE: 4,
  ENTITY_REFERENCE_NODE: 5,
  ENTITY_NODE: 6,
  PROCESSING_INSTRUCTION_NODE: 7,
  COMMENT_NODE: 8,
  DOCUMENT_NODE: 9,
  DOCUMENT_TYPE_NODE: 10,
  DOCUMENT_FRAGMENT_NODE: 11,
  NOTATION_NODE: 12
};
// --------------- polyfill 注入 end ---------------

// polyfill注入完成后再导入Azure相关模块
import { BlobServiceClient } from '@azure/storage-blob';
import { environment } from '../../environments/environment';

const sasURL = environment.sasURL;
const blobServiceClient = new BlobServiceClient(sasURL);
const containerName = environment.containerName;

// List blobs inside a container
async function main() {
  const containerClient = blobServiceClient.getContainerClient(containerName);

  let i = 1;
  let blobs = containerClient.listBlobsFlat();
  for await (const blob of blobs) {
    console.log(`Blob ${i++}: ${blob.name}`);
  }
}

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  main();
  postMessage(response);
});

3. 修正Angular构建配置（可选，仅打包报错时配置） #

Angular 13默认会对引入的CommonJS模块打印警告，如果构建时抛出@xmldom/xmldom相关的依赖解析错误，打开项目根目录的angular.json，找到对应项目的build配置项，在options节点下添加如下配置跳过CommonJS依赖检查：

"allowedCommonJsDependencies": [
  "@xmldom/xmldom"
]

补充说明 #

• 如果你后续将@azure/storage-blob升级到12.20.0及以上版本，官方已经原生适配Web Worker运行环境，不需要再手动注入上述polyfill，直接导入使用即可。
• 不要尝试在Web Worker中引入JSDOM做适配：JSDOM依赖大量Node.js内置API，Angular打包时需要额外补全十余个Node核心模块的浏览器polyfill，最终产物会额外增大3-5MB，投入产出比极低。

内容的提问来源于stack exchange，提问作者Research Stuff