javascript - 生产模式下的 webpack 问题（缩小问题）

Question

我正在为增强现实开发这个小项目，ARnft它基于 Jsartoolkit5 的更轻版本，JsartoolkitNFT仅用于NFT标记。代码遵循ES6标准（部分）并使用 webpack 作为捆绑器。在开发模式下一切都很好，但是当我进入生产模式时，该示例出现此错误：

05ff8846-4121-4380-86c3-9612f404732a:1 Uncaught SyntaxError: Function statements require a function name

它停在嵌入式 Worker 上。该应用程序不要进入内部，否则我将在开发控制台中收到一些消息。我将 Worker 注入到 Blob 对象中：

// create a Worker to handle loading of NFT marker and tracking of it
const workerBlob = new Blob(
  [workerRunner.toString().replace(/^function .+\{?|\}$/g, '')],
    { type: 'text/js-worker' }
  )
const workerBlobUrl = URL.createObjectURL(workerBlob)

worker = new Worker(workerBlobUrl)

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L207-L213

workerRunner 在这一行定义：

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L272

我认为这是我试图--optimize-minimize在脚本中添加的一个缩小问题：

"build-es6": "webpack --mode production --optimize-minimize",

，但没有帮助。我该如何解决这个问题？

谢谢

Answer 1

这个问题可以通过worker-loader插件解决。

而不是像问题中解释的那样将工作人员内联在 Blob 中：

• 创建一个外部 Worker.js 并导入文件（在本例中为 Utils.js）：

import Worker from './Worker.js' 

• 像往常一样使用工人：

let worker
// other code
worker = new Worker()
// other code with postMessage and onmesssage...

• 在 wepback.config.js 中

{
  test: /\worker\.js$/,
    use: {
      loader: 'worker-loader',
        options: { inline: true, fallback: false }
    }
}

您还可以在webpack上查看此提交和问题。