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

Question

我正在尝试加载 audiosprite在我在 Webpack 服务器上运行的 React 应用程序中，出现以下错误:

Module not found: 'child_process' in C:\Users\BenLi\Desktop\development projects\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

长话短说

除非您(也许)切换到 Browserify，否则没有解决这个问题的方法(需要自己测试)它提供了一个 browserify-fs 模块。由于浏览器无论如何都无法访问文件系统或子进程，因此模块 audiosprite不能在这个用例中使用。浏览器不能做它不能做的事。

解释

这是因为 Webpack。默认情况下，Webpack 旨在编译代码以在网络浏览器环境中运行。它存在的全部原因是将所有内容捆绑在一起以使其对浏览器友好(因此得名“web pack”)。

Node 提供了一些内置模块，例如 child_process , path , os , fs等仅存在于 Node 环境中。当 Webpack 出现并尝试为浏览器捆绑代码时，浏览器无权访问这些模块。因此，当模块如 audiosprite使用 child_process ，Webpack 默认为 web 捆绑它们，您不再有权访问这些模块。这就解释了为什么报错“找不到模块”。

“解决方案”

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

target

• "web" Compile for usage in a browser-like environment (default)
• "node" Compile for usage in a node.js-like environment (use require to load chunks)

^{(documentation cut for brevity)}

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

您可以做的是保持目标环境不变(默认为 "web")并尝试根据需要模拟模块。随着 node option :

node

Include polyfills or mocks for various node stuff:

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

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

node: {
    fs: "mock"
}

但这会错误地告诉你:

Error: No browser version for node.js core module 'fs' available

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

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