Question

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

未找到模块：'child_process' C：\ Users \用户本利\桌面\发展项目\应用\ node_modules \ audiosprite

不知道这可能是什么或为什么这个模块发生了显然，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)
}

如何解决此错误？

Answer 1

<强> TL; DR

除非您（可能）切换到提供Browserify模块的browserify-fs（需要自行测试），否则没有方式。由于浏览器无法访问文件系统或子进程，因此无法在此用例中使用模块audiosprite。浏览器无法做到它无法做到的事情。

解释

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

Node提供了一些内置模块，例如child_process，path，os，fs等仅存在于节点环境中。当Webpack出现并尝试捆绑浏览器的代码时，浏览器无法访问这些模块。因此，当audiosprite等模块使用child_process时，Webpack会默认将它们捆绑到Web中，您无法再访问这些模块。这解释了为什么错误报告未找到＆＃34;模块＆＃34;。

<强>＆＃34;解＆＃34;

A＆＃34;修复＆＃34;是指定您的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核心模块没有浏览器版本＆＃39; fs＆＃39;可用

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

修改：我一直在寻找其他选择，Browserify可能会也可能不会奏效。他们确实提供browserify-fs模块作为Node fs的替代品。我还没有对此进行测试，因此我不确定它是否有用，但它看起来比Webpack现在做的更好。

Answer 2

我想你必须让NPM安装依赖项只是

npm install --save autiosprite

在audiosprite中加载错误 - 找不到模块：'child_process'

2 个答案:

`target`

`node`