我怎样才能允许导入我的网络工作者？

Question

I have some basic code here.我这里有一些基本代码。

https://codesandbox.io/s/competent-nightingale-80r4ps?file=/src/App.js:24-332 https://codesandbox.io/s/competent-nightingale-80r4ps?file=/src/App.js:24-332

App.js : I create a webworker, and I have a function to post a message to that worker. App.js ：我创建了一个 webworker，我有一个 function 可以向该 worker 发送消息。 When I receive a message back, I run console.log(e.data);当我收到回复消息时，我运行console.log(e.data); . .

export default function App() {
  const worker = new Worker("Worker.js");

  worker.onmessage = (e) => {
    console.log(e.data);
  };

  function getCount() {
    worker.postMessage("get count");
  }
  return (
    <div className="App">
      <button onClick={getCount}>Get count!</button>
    </div>
  );
}

Worker.js : Inside the worker, I create a counter object and post a message with its value. Worker.js ：在工作人员内部，我创建了一个counter object 并发布了一条消息及其值。

class counter {
  constructor() {
    this.value = Math.floor(Math.random() * 100);
  }
}

onmessage = (e) => {
  const myCounter = new counter();
  this.postMessage(myCounter.value);
};

I would like to import the below helper functions and classes into my webworker, instead of embedding them in the file directly.我想将下面的辅助函数和类导入到我的 webworker 中，而不是直接将它们嵌入到文件中。 Is there a way to do this if my worker is located in public ?如果我的工作人员位于public ，有没有办法做到这一点？

My file structure is like this:我的文件结构是这样的：

root
-src
--utility1
--class1
-public
--webworker

Answer 1

Workers can have type classic or module .工人可以有类型classic或module 。 Workers with type module support ES6 modules.类型为module的 worker 支持 ES6 模块。

Example: index.html示例： index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Module Worker Example</title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

index.js

const worker = new Worker('Worker.js', { type: 'module' });

worker.onmessage = (e) => {
  console.log(e.data);
};

function getCount() {
  worker.postMessage('get count');
}

getCount();

Worker.js

import { Counter } from './Counter.js';

onmessage = (e) => {
  const myCounter = new Counter();
  postMessage(myCounter.value);
};

Counter.js

export class Counter {
  constructor() {
    this.value = Math.floor(Math.random() * 100);
  }
}

Currently, it's not supported by all major browsers.目前，并非所有主流浏览器都支持它。

An alternative option is a worker with type classic and importScripts :另一种选择是使用类型为classic和importScripts的 worker：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Module Worker Example</title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

index.js

const worker = new Worker('Worker.js');

worker.onmessage = (e) => {
  console.log(e.data);
};

function getCount() {
  worker.postMessage('get count');
}

getCount();

Worker.js

importScripts('./Counter.js');

onmessage = (e) => {
  const myCounter = new Counter();
  postMessage(myCounter.value);
};

Counter.js

class Counter {
  constructor() {
    this.value = Math.floor(Math.random() * 100);
  }
}

It works on all major browsers.它适用于所有主要浏览器。

我怎样才能允许导入我的网络工作者？

问题描述

1 个解决方案

解决方案1
0 2023-01-19 23:17:35

我怎样才能允许导入我的网络工作者？

问题描述

1 个解决方案

解决方案1 0 2023-01-19 23:17:35

解决方案1
0 2023-01-19 23:17:35