Как заставить веб-работника использовать тот же код машинописи, что и в приложении? - PullRequest
Новая
       27

Как заставить веб-работника использовать тот же код машинописи, что и в приложении?

2 голосов
/ 26 апреля 2020
Приложение

My reactjs состоит из набора машинописных файлов с четким разделением GUI и модели. Веб-работнику нужно большинство файлов моделей, так что, может быть, половина всех файлов. Я мог бы представить загрузку веб-работника с того же URL-адреса, что и приложение, так как модель не ссылается ни на GUI, ни на React, ни на другие недоступные вещи (по крайней мере, этого не должно быть, и если это так, его легко очистить вверх).

Кажется, что есть некоторые проблемы:

  • поиск правильных javascript файлов
  • внедрение правильного кода запуска в них

и, возможно, другие, о которых я еще не думал.

Общение с веб-работником не является проблемой, так как все, что мне нужно, - это один асин c вызов и передача некоторых простых данных.

Могут быть и другие проблемы, например, https://github.com/microsoft/TypeScript/issues/20595.

Прежде чем я узнал, что мне действительно нужно, я попробовал, например, ttps: // www.npmjs.com/package/@koale / useworker , что неплохо, но, похоже, в состоянии справиться только с простыми javascript зависимостями.

Поиск правильных javascript файлов

То, что я вижу в индексе. html 

<script src="/myapp/static/js/bundle.js"></script>
<script src="/myapp/static/js/0.chunk.js"></script>
<script src="/myapp/static/js/main.chunk.js"></script>
<script src="/myapp/main.4e45e2b4b645351b7733.hot-update.js"></script>

Полагаю, я мог бы жить без горячих обновлений, однако названия других r Три файла изменяются в процессе работы на что-то вроде , он выполняет некоторый код, сгенерированный кодом веб-пакета, что, скорее всего, приводит к сбою. Мне нужно как-то этого избежать.

Вопросы

  • Это вообще выполнимо?
  • Имеет ли это смысл или есть лучший подход?

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Для бесшовной интеграции рабочего кода с кодом основного потока я рекомендую использовать comlink-loader. Например, если у вас есть файл main.ts и файл thingy.worker.ts, вы можете легко загрузить его как рабочий, используя импорт TS: 

// main.ts
import { getThing } from "./thingy.worker.ts"; // make sure the file name ends with .worker.ts

async function test() {
  console.log(`the thingy is: ${await getThing()}`);
}

// thingy.worker.ts
export async function getThing() {
  return 3;
}

Вам нужно будет добавить его в конфигурацию вашего веб-пакета, например: 

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.(js|ts)$/i,
        use: [{
          loader: 'comlink-loader',
          options: {
            singleton: true
          }
        }]
      }
    ]
  }
}

Самое приятное, что intellisense вашего редактора будет работать между модулями и безопасность типов не будет нарушена. Больше документации доступно здесь .

0 голосов
/ 03 мая 2020

Вам необходимо скомпилировать отдельный файл js для вашего WebWorker. Существует библиотека React под названием реагирующий веб-работник , которая облегчит вам эту задачу Он, в свою очередь, использует рабочий плагин WebPack .

...