Question

这是我的组件：

import React, {Component} from 'react';
// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'worker-loader!../../workers/app.worker'

class MyComponent extends Component {

    componentDidMount() {

        let worker = Worker()

        worker.addEventListener('message', e => {
            console.log('succes', e.data)
        })

        worker.postMessage('please work')

    }

    render = () => {

        return(<div>Not That Relevant</div>)
    }
}

我非常简单的工人：

// eslint-disable-next-line no-restricted-globals
self.addEventListener('message', e =>{
    console.log(e.data)
    // eslint-disable-next-line no-restricted-globals
    self.postMessage(e.data);
})

在组件内部实例化worker会导致一个空白的Worker，即：

Worker {onmessage: null, onerror: null}

不用说：它什么也没做，并且app.worker路径是正确的。

此外，由于我导入了加载程序，所以我得到了：

Uncaught ReferenceError: window is not defined
    at bootstrap:1
    at bootstrap:791

所以我认为worker-loader在某种程度上与webpack-config混淆了。

为什么会这样？

React中的Worker Loader

0 个答案: