Web Workers - 如何导入模块

Question

我正在使用ES2015导入/导出模块。

在我的工作文件中，当我尝试导入像我通常那样的函数时：

worker.js

import { a, b, c } from "./abc.js";

我收到错误： SyntaxError: import declarations may only appear at top level of a module

当我在我的模块'abc.js'中导出函数时，我不知道如何使用旧的（并且显然在它的出路）语法中使用它们：

self.importScripts( "/app/abc.js" );

所以，我的问题是，我们如何将新的导入模块语法与worker一起使用？

第二个问题是，importScripts从模块导入时导入的内容是什么？没有导出全局对象父项？

Answer 1

任何浏览器都不支持ES2015工作模块（否则不支持模块）。一旦他们这样做，你必须创建一个像这样的工人：

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

请参阅：https://html.spec.whatwg.org/#module-worker-example

现在你必须使用importScripts()。

这些是每个浏览器的错误报告：

• Firefox
• Chromium（目前它位于旗帜后面：--enable-experimental-web-platform-features）
• Webkit
• Edge （也this uservoice page）

Answer 2

2020：

Chrome 80 has shipped module workers in February 2020（Chrome 82将为共享工作程序提供模块）。 Firefox / Safari目前不支持这些功能：tests

您可能想使用import-from-worker lib来为您完成繁重的工作（目前，您需要检查对worker模块的支持并亲自进行后备工作）。

Answer 3

worker中的ES模块已经在Chrome中可用，可以在启动chrome时使用适当的标志来启用实验性Web平台功能：

chrome.exe --enable-experimental-web-platform-features

这是将工作脚本作为模块加载所需的语法：

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

此功能已经开发了将近一年，并且不需要特殊标志就可以很快推出，但是，尚无正式发布日期。

Answer 4

对我来说，分配给self.的效果很好。 我已将导入文件导入另一个js文件：abcImported.js

import { a, b, c } from "./abc.js";

export {  a, b, c };

以及服务人员：

self.a = require('abcImported.js').a;
self.b = require('abcImported.js').b;

通过这种方式，它可以在worker内部访问。 （经过chrome测试）