webpack 2 将 webworker 公开为全局

Question

我正在尝试为 react/redux 应用程序编写测试，我们有一堆网络工作者目前是通过 require('worker-loader?inline!downloadTrackWorker')

导入的

我一直在兜圈子，想弄清楚如何分离出这段代码，这样我就可以在 node.js 中进行运行测试，而不会遇到加载 webworker 的问题。

我想到的一个解决方案是在我的 webpack 中全局公开 webworker，这意味着我可以在我的测试中定义一个存根或模拟。

在我的 webpack 配置中，我添加了

module: {
    loaders: [...],
    rules: [{
        test: require.resolve(APP_DIR + '/helpers/downloadTrackWorkerLoader'),
        loader: 'expose-loader',
        options: 'DownloadTrackWorker'
    }]
}

我的 trackWorkerLoader 很简单

const DownloadTrackWorker = require('worker-loader?inline!./downloadTrackWorker.js');

module.export = DownloadTrackWorker;

我也试过上面没有 inline，但没有运气。

我遇到了两个问题。

当我在我的控制台中寻找 DownloadTrackWorker 时，它是未定义的

更新后的 webpack.config，我收到一个错误，webpack 无法在

解析 may need appropriate loader

ReactDOM.render(
   <Provider store={store}>
     <Player />
   </Provider>,
   document.getElementById('root')
);

对我做错了什么有什么建议吗？在我看来，我看到的问题是相关的。

Answer 1

when I look for DownloadTrackWorker in my console, it is undefined

正如 Readme - Usage 中的 expose-loader 注释，您需要将其导入以便包含在捆绑包中并因此公开。这些规则不包括任何内容，但适用于满足测试的应用程序中的导入。除此之外，您也没有将加载程序应用于正确的文件。您想要将 expose-loader 应用到 trackWorkerLoader.js，因此正确的规则是：

{
    test: require.resolve(APP_DIR + '/helpers/trackWorkerLoader'),
    loader: 'expose-loader',
    options: 'DownloadTrackWorker'
}

现在您需要将其导入您应用中的某处：

require('./path/to/helpers/trackWorkerLoader');

这将正确地将 DownloadTrackWorker 公开为全局变量，但是您在 trackWorkerLoader.js 中输入错误而不是 module.exports，您输入的是 module.export。目前你实际上并没有导出任何东西。应该是：

module.exports = DownloadTrackWorker;

除了在 require 中内联 worker-loader（不谈论它的选项），您还可以将其定义为规则：

{
    test: require.resolve(APP_DIR + '/helpers/downloadTrackWorker'),
    loader: 'worker-loader',
    options: {
        inline: true
    }
}

现在您可以简单地要求它，而无需在 trackWorkerLoader.js 中指定加载器：

const DownloadTrackWorker = require('./downloadTrackWorker');

module.exports = DownloadTrackWorker;

with my updated webpack.config, I get an error that webpack can't parse may need appropriate loader

您同时定义了 module.loaders 和 module.rules。尽管 module.loaders 出于兼容性原因仍然存在，但如果 module.rules 存在，它将被完全忽略。因此，您之前配置的加载程序未被应用。只需将所有规则移动到 module.rules.

webpack 2 将 webworker 公开为全局

webpack 2 expose webworker as global

javascript

global

web-worker

webpack

webpack-2