Как использовать компоненты React в WebWorker - PullRequest
Новая
       19

Как использовать компоненты React в WebWorker

1 голос
/ 04 ноября 2019

Я создаю генератор PDF с использованием пакетаact-pdf по адресу https://react -pdf.org / . Процесс преобразования компонентовact-pdf в pdf блокирует основной поток, поэтому я хотел бы преобразовать их в отдельный рабочий поток.

Я использую create-реагировать-приложение с работником-загрузчиком, чтобы распознатьФайлы WebWorker. Я с трудом придумываю способ импортировать компоненты реагирования в Webworker и конвертировать их, используя метод pdf (Component) .toBlob (), предоставленный response-pdf. Pdf (Component) .toBlob () принимает компонент реагирования в качестве входных данных и выводит файлы BLOB-объектов, это означает, что рабочий должен каким-то образом иметь возможность загружать компонент React. WebWorker работает должным образом, когда компоненты React не включены.

Я наивно пытался импортировать компоненты React в WebWorker и пытался запустить метод преобразования: 

pdf(<Component />).toBlob().then(blob=>{
   ...
  })

, что вызывает ошибку разбора модуля: 

Uncaught Error: Module parse failed: Unexpected token (14:8)
File was processed with these loaders:
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.

Я не очень разбираюсь в Webpack, поэтому понятия не имею, как решить эту проблему. Буду очень признателен за любую помощь.

Редактировать: Я использую конфигурацию веб-пакета по умолчанию create-Reaction-app с добавлением worker-loader, который обнаруживает файлы .worker.js и регистрирует их как Webworker. Я добавил загрузчик с помощью пакетаact-app-rewired: 

module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      })
      config.output['globalObject'] = 'this';
    return config;
  }

1 Ответ

1 голос
/ 04 ноября 2019

Этот ответ является продолжением дискуссии, которую мы провели в чате.

Здесь под рукой проблема .push() из функции переопределения. Как указано в документации MSDN :

Метод push () добавляет один или несколько элементов в конец массива и возвращает новую длинумассив.

Фактически config.module.rules.push() добавляет загрузчик в конец массива правил, обрабатывая таким образом сначала код React, а затем worker.js.

как Али. Zeaiter обнаружил, что решение состоит в том, чтобы использовать .unshift() ( cf. Doc ) вместо .push(), чтобы добавить загрузчик в массив правил и таким образом сначала обработать файл worker.js.

...