在 Web Worker 中导入模块时不能在模块外部使用 import 语句

Question

我正在尝试在 Web Worker 中导入一个模块，该模块又导入另一个模块并收到以下错误

Uncaught SyntaxError: Cannot use import statement outside a module

。 我的网络工作者正在导入这样的脚本：

importScripts(
  './utils.js',
  './nn.js'
);

错误指向

'./utils.js'

的第二行，但其实际来源是

utils.js

的第一行，如下所示：

import * as DG from 'datagrok-api/dg';

我尝试在

"type": "module"

中设置

package.json

，但这导致我无法使用Webpack编译我的项目并产生其他错误。

我还尝试使用

new Worker('my.worker.js', {type: "module"})

创建一个工作程序，以便我可以在其中使用

import

语句，但在这种情况下，我无法向工作程序发布消息，甚至没有收到任何错误。此外，除了 Chrome 之外，其他地方都不支持 模块工作线程。

我尝试使用

workerize-loader 管理 Web Worker，但它不适用于我正在使用的 Webpack 5。

所以我的问题是：如何在包含模块导入的 Web Worker 中导入模块？

Answer 1

据我所知，webpack 不会处理使用

importScripts()

导入的脚本，这意味着如果你想使用 importScripts()，你必须配置 webpack 来输出 utils.js

 模块的编译版本。

但是我不知道如果你正在使用 webpack，为什么还要麻烦使用

importScripts()

。

你可以在你的worker中写入

import './utils.js'

，webpack会在构建你的worker脚本时将它们捆绑在一起。