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

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

作为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;

您可以将其定义为规则，而不是在worker-loader中内联require（不讨论其选项）：

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

现在您只需要它而无需在trackWorkerLoader.js中指定加载器：

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

module.exports = DownloadTrackWorker;

使用我更新的webpack.config，我收到一个错误，webpack无法解析可能需要适当的加载器

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

webpack 2将webworker暴露为全球

1 个答案: