在audiosprite中加载错误

我正在尝试在我的React应用程序中加载audiosprite，该应用程序在Webpack服务器上运行，我收到以下错误：

未找到模块：C：\ Users \ BenLi \ Desktop \ development projects \ app \ node_modules \ audiosprite中的'child_process'

不知道这可能是什么或为什么它发生在这个模块显然，Webpack不应该抛出child_process错误随之而来。

我把它包含在我的应用中就像这样：

import audiosprite from 'audiosprite';

来自此文件的错误：

function spawn(name, opt) {
  opts.logger.debug('Spawn', { cmd: [name].concat(opt).join(' ') })
  return require('child_process').spawn(name, opt)
}

我该如何解决这个错误？

TL; DR

没有办法解决这个问题，除非你（可能）切换到Browserify（需要自己测试），它提供了browserify-fs模块。由于浏览器无论如何都无法访问文件系统或子进程，因此无法在此用例中使用模块audiosprite。浏览器无法做到它无法做到的事情。

说明

这是因为Webpack。默认情况下，Webpack旨在编译代码以在Web浏览器环境中运行。存在的全部原因是将所有内容捆绑在一起以便浏览器友好（因此称为“web pack”）。

Node提供了一些内置模块，如child_process，path，os，fs等，它们只存在于Node环境中。当Webpack出现并尝试捆绑浏览器的代码时，浏览器无法访问这些模块。因此，当audiosprite等模块使用child_process时，默认情况下Webpack将它们捆绑在Web上，您无法再访问这些模块。这解释了为什么错误报告“找不到模块”。

“解决方案”

“修复”是指定您的Webpack配置，以便在类似节点的环境中进行编译，在该环境中您可以访问这些内置模块。这样，Webpack就不会搞乱内置模块，可以使用child_process。您可以通过指定target选项来完成此操作。来自the Webpack Configuration documentation：

target

• "web"编译用于类似浏览器的环境（默认）
• "node"编译用于类似node.js的环境（使用require加载块）

（文件简洁）

但是有一个结果。由于您将目标设置为节点环境，因此在使用浏览器时require将无法工作，因为浏览器环境中没有require。

您可以做的是保持目标环境相同（默认为"web"）并尝试模拟模块以满足您的需求。随着node option：

node

包括各种节点内容的polyfill或mocks：

• <node buildin>：true，"mock"，"empty"或false

并将其应用于Webpack配置文件：

node: {
    fs: "mock"
}

但这会错误地告诉你：

错误：没有可用的node.js核心模块'fs'的浏览器版本

所以这只是设计。没有什么可以做的，因为捆绑浏览器环境将不可避免地禁止您访问文件系统，因为它不能。您无法为执行浏览器中无法执行操作的模块提供浏览器模拟。 child_process和其他人也一样。

编辑：我一直在寻找一些替代品，Browserify可能会或可能不会工作。他们确实提供了browserify-fs模块作为Node的fs的替代品。我还没有测试这个，所以我不确定它是否有用，但它看起来比Webpack现在做的更好。