javascript Web Workers -如何导入模块

kpbpu008  于 2023-03-16  发布在  Java
关注(0)|答案(5)|浏览(294)

我正在使用ES 2015导入/导出模块。
在我的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从中没有导出全局对象父对象的模块导入时,它导入到什么?

rkttyhzu

rkttyhzu1#

2020年:

Chrome 80 has shipped module workers in February 2020(Chrome 82将为共享工作者提供模块)Firefox/Safari目前还不支持这些功能:tests
您可能希望使用import-from-worker lib来完成繁重的工作(现在,您需要检查worker中对模块的支持,然后自己做回退)。

eufgjt7s

eufgjt7s2#

Workers中的ES模块已经在Chrome中可用,启用了实验性Web平台功能,在启动Chrome时使用适当的标志:

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

以下是将工作脚本作为模块加载时需要使用的语法:

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

这个功能已经开发了将近一年,应该很快就可以使用了,不需要特殊的标志,但是,还没有正式的发布日期。

2vuwiymt

2vuwiymt3#

截至11月21日,在工作者中导入模块似乎仍然是不可靠的。一个解决方案是使用汇总从你的工作者中生成一个IIFE,如下所示:

//worker.js
import { MyModule } from 'my-module.js'
onconnect = async (e) => {
    var port = e.ports[0];
    MyModule.func()

    port.onmessage = (e) => {
        port.postMessage("Hi App");
    }
}

//rollup config
export default [
{
        'input': 'worker.js',
        'output': {
            'file': 'dist/worker.js',
            'format': 'iife'
        },
 },
]

//dist/worker.js (rollup output)

(function () {
    'use strict';
    //MyModule code here, generated by rollup
    
    MyModule.func()
    onconnect = async (e) => {
        var port = e.ports[0];
        port.onmessage = (e) => {
            port.postMessage("Hi App");
        };
    };

}());

//main app

const worker = new SharedWorker("/dist/worker.js");
worker.port.onmessage = (e) => {
    console.log('Message received from worker: ' + e.data);
}
worker.port.postMessage("Hi worker");

从本质上说,rollup是在做浏览器应该做的工作。这对我来说很好。当然,代码的大小会增加,因为模块代码也被复制到了worker中。但它仍然是DRY,因为代码是由rollup生成的。

wecizke3

wecizke34#

对我来说,赋值给self.很好。我把import放到了另一个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;

通过这种方式,它可以在工作人员内部访问。(在 chrome 合金中测试)

lfapxunr

lfapxunr5#

Workers中的ES 2015模块可在Safari和Chromium浏览器中使用。

如果其他浏览器/版本是您的目标,您仍然需要使用importScripts()
如果可用,您可以创建一个模块工作器,如下所示:

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

参见:https://html.spec.whatwg.org/#module-worker-example
以下是每个浏览器的错误报告:

  • Firefox:修复了自111* 以来标志后面的!*🏴
  • chrome 浏览器:

Dedicated Workers:* 自版本80起可用 * ✔️
Shared Workers:* 自版本83起可用 * ✔️
Service Workers:* 自版本91起可用 * ✔️

Safari桌面:* 从Safari 14.1开始提供 * ✔️
Safari移动的(iOS):* 从Safari 15开始提供 * ✔️

相关问题