javascript - React 中的 Worker 加载器

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。

为什么会这样？

标签： javascriptreactjsweb-workerworker-loader