无法在 web-worker 中导入 fabric.js？

Posted 2023-03-25

【中文标题】无法在 web-worker 中导入 fabric.js？

【英文标题】：Unable to import fabric.js in web-worker?

【发布时间】：2021-11-26 17:35:38

【问题描述】：

我正在将 webpack 用于 React.js 应用程序。我需要用织物做繁重的工作。所以我试图为此目的使用网络工作者。 我使用 worker-loader 插件来运行 web-worker。我的woker工作正常。 这是我的工人档案

var jsZip = require('jszip')
const PDFDocument = require('@react-pdf/pdfkit').default
const SVGtoPDF = require('svg-to-pdfkit')
const fabric = require('fabric')

self.onmessage = async ( data:  canvasInfo  ) => 

    const canvas = new fabric.StaticCanvas('canvas', 
      width:1024,
      height: 1024,
      selection: false,
    )

    // Doing heavy work with fabric canvas fn()

    self.postMessage(
      message:"success"
    )

但我收到以下错误：

Uncaught TypeError: jsdom.JSDOM is not a constructor
    at Object../node_modules/fabric/dist/fabric.js (fabric.js:25)
    at __webpack_require__ (bootstrap:21)
    at web.worker.js:5
    at web.worker.bundle.worker.js:140722
    at web.worker.bundle.worker.js:140724

我需要在我的 webpack 配置中添加什么来解决这个问题吗？

【参考方案1】：

网络工作者可能有未定义的窗口并正在触发 nodejs 代码路径。 您应该在 repo 上打开一个问题，我们应该考虑修复。 Fabricjs 确实使用了 dom 相关的方法，这些方法可能在 worker 中不可用

【讨论】：

我不需要从 web worker 与 dom 交互。我只想用fabric js创建一个虚拟画布在web worker中做一些工作。我正在使用 webworker，因为我不想影响 UI 的后台任务。

有没有办法在webworker中定义一个虚拟dom？