如何将节点模块导入 web worker 脚本？

Question

我正在尝试构建使用 tensorflowjs 和 coco-ssd 模型的离子应用程序来检测来自相机的图像上的对象。此外，我需要能够在使用相机时切换手电筒。当我像 promise 调用 await 一样使用模型的检测功能时，它会停止另一个 'threads' 直到检测完成。这是为了防止手电筒立即切换，并且在按下按钮（切换手电筒的按钮）后，它必须等待大约半秒才能打开或关闭。

我已经决定在 web worker 中使用 coco-ssd，但我发现我无法在 web worker 中导入节点模块，因为这个错误：

SyntaxError: import declarations may only appear at top level of a module   worker-test.js:1

我已经搜索了一些类似的问题，但几乎没有人在 web worker 中导入模块，而那些导入的模块 - 他们在 javascript 中导入。要在 js 中启用模块导入，您只需将另一个参数传递给 worker 构造函数：new Worker('url/to/script.js', {type: 'module'}) 但问题是，你不能在 typescript 中将第二个参数传递给 worker 构造函数，所以我不能那样创建一个 worker。

相关文件：
test.page.ts

...
ionViewDidEnter() {
    this.testWorker();
  }

  testWorker() {
    const worker = new Worker('assets/worker-test/worker-test.js');

    worker.onmessage = function(event) {
      console.log('onmessage');
      console.log(event.data);
    };

    worker.postMessage('From main thread');
  }
...

工人-test.js

import * as cocoSsd from '@tensorflow-models/coco-ssd';

postMessage("posting message");

onmessage = function(data) {
    console.log('In worker');
    console.log(data.data);
    console.log(model);
};

let model;

cocoSsd.load().then((res) => {
    model = res;
});

离子信息：

   ionic (Ionic CLI)             : 4.12.0 (~/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

提前感谢您的帮助。

Answer 1

typescript 的编译选项应该针对 es2015 或 esnext。

{
  ...
  "compilerOptions": {
    "lib": ["esnext", "webworker"],
  }
}

另外添加 "webworker" 将表明该项目将使用 webworker api。

如何将节点模块导入 web worker 脚本？

How to import node module into web worker script?

angular

typescript

ionic-framework

ionic4

tensorflow.js