在audiosprite中加载时出错 – 找不到模块:'child_process'

我正试图加载在我的React应用程序在Webpack服务器上运行的audiosprite,我得到以下错误:

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) } 

我该如何解决这个错误?

TL; DR

除非你(也许)切换到Browserify (需要自己testing),它提供了一个browserify-fs模块,否则没有办法解决这个问题。 由于浏览器无法访问文件系统或subprocess,因此模块audiosprite无法在此用例中使用。 浏览器不能做它无能为力的事情。

说明

这是因为Webpack。 默认情况下,Webpack旨在编译代码以在Web浏览器环境中运行。 它存在的全部原因是将所有东西捆绑在一起,以便浏览器友好(因此名称为“networking包”)。

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

“解决scheme”

一个“修复”就是指定你的Webpackconfiguration来编译在类似Node的环境中的使用,在那里你可以访问这些内置模块。 这样,Webpack将不会混淆内置模块, child_process可以使用child_process 。 您可以通过指定target选项来执行此操作。 从Webpackconfiguration文档 :

target

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

(为了简洁起见文档被剪切)

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

你可以做的是保持目标环境相同(默认为"web" ),并尝试模拟你需要的模块。 使用node选项 :

node

包括polyfills或嘲笑各种节点的东西:

  • <node buildin>true"mock""empty"false

并将其应用于Webpackconfiguration文件:

 node: { fs: "mock" } 

但是这会错误地告诉你:

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

所以这只是devise。 没有什么可以做的,因为绑定浏览器环境将不可避免地禁止你访问文件系统,因为它不能。 您无法为模块提供浏览器模拟,而浏览器无法做到这一点。 child_process和其他人也是如此。

编辑:我一直在寻找一些替代品,和Browserify可能会或可能无法正常工作。 他们提供了一个browserify-fs模块来取代Node的fs 。 我还没有testing,所以我不确定它是否有用,但看起来比现在的Webpack更好。

我想你必须让NPM安装依赖关系

 npm install --save autiosprite