使用`worker-loader`导入网络工作者时，流程不起作用答案

【问题标题】：Flow doesn't work when using `worker-loader` for importing web workers使用`worker-loader`导入网络工作者时，流程不起作用
【发布时间】：2020-08-14 18:19:43
【问题描述】：

我在我的 react 应用程序中使用 flow 并开始使用 web workers 也使用 flow-immutable-models flow 在主线程执行的文件中工作，但在工作文件中不起作用。当 webpack 服务器在保存后重启时会卡在sails 插件上。过去有人遇到过问题吗？

我的代码如下：控制器文件

import ImportWorker from 'worker-loader!./ImportWorker.js';

....

const worker = new ImportWorker();
            worker.onmessage = this.handleMsg;
            this.worker = worker;

工作文件

//@flow
const parseCSV = ({
    file,
    config = {}
}): Promise<{
    file: File,
    parsedFile: {
        fileRows: Array<Object>,
        fileHeaders: Array<string>
    }
}> => {
    return new Promise((resolve, reject) => {
        // some passing logic
    });
};

// some handelIncomingMsg handler logic

onmessage = e => {
    try {
        handelIncomingMsg(e);
    } catch (err) {
        onError({ ...err, id: e.data.id });
    }
};

【问题讨论】：

标签： webpack sails.js flowtype web-worker worker-loader

【解决方案1】：

对于其他面临此问题的人，我在更改 webpack 加载器配置中的顺序后得到了修复。

旧配置

use: [
      {
           loader: 'babel-loader',
           query: {
               cacheDirectory: true
           }
     },
     {
           loader: 'worker-loader',
           query: {
               inline: true,
               fallback: false
           }
     }
]

新配置

use: [
      {
           loader: 'worker-loader',
           query: {
               inline: true,
               fallback: false
           }
      },
      {
           loader: 'babel-loader',
           query: {
               cacheDirectory: true
           }
     }         
]

【讨论】：