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

Question

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

未找到模块：“child_process”在 C:\Users\BenLi\Desktop\development 项目\app\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-fs 模块的Browserify（需要自己测试）。由于浏览器无论如何都无法访问文件系统或子进程，因此无法在此用例中使用模块 audiosprite。浏览器不能做它不能做的事情。

说明

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

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

“解决方案”

“修复”是指定您的 Webpack 配置以编译以在类似 Node 的环境中使用，您确实可以访问这些内置模块。这样，Webpack 就不会与内置模块混淆，并且可以使用 child_process。您可以通过指定target 选项来执行此操作。来自the Webpack Configuration documentation：

target

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

^{（为简洁起见，文档被删减）}

但是有一个后果。由于您将目标设置为 Node 环境，因此在使用浏览器时 require 将不起作用，因为浏览器环境中没有 require。

您可以做的是保持目标环境相同（默认为"web"）并尝试根据您的需要模拟模块。用node option：

node

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

• <node buildin>: true, "mock", "empty" 或 false

并将其应用到 Webpack 配置文件中：

node: {
    fs: "mock"
}

但这会错误地告诉你：

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

所以这只是设计使然。您无能为力，因为捆绑浏览器环境将不可避免地禁止您访问文件系统，因为它不能。您不能为执行浏览器中不可能完成的事情的模块提供浏览器模拟。 child_process 和其他人也是如此。

编辑：我一直在寻找一些替代方案，Browserify 可能有效，也可能无效。他们确实提供了一个browserify-fs 模块来替代Node 的fs。我还没有对此进行测试，所以我不确定它是否有用，但它看起来比 Webpack 现在做的更好。

Answer 2

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

npm install --save autiosprite