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

Question

我正在尝试在我的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)
}

我该如何解决这个错误？

Answer 1

TL; DR

有没有解决这个办法,除非你(也许)切换到Browserify(需要将这个测试自己),它提供了一个browserify-fs模块.由于浏览器无论如何都无法访问文件系统或子进程,因此该模块audiosprite不能用于此用例.浏览器无法做到它无法做到的事情.

说明

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

节点提供了一些内置的模块,如child_process,path,os,fs,等等,只有在节点环境中存在.当Webpack出现并尝试捆绑浏览器的代码时,浏览器无法访问这些模块.因此,当audiosprite使用诸如use之类的模块时child_process,默认情况下Webpack将它们捆绑为Web,并且您无法再访问这些模块.这解释了为什么错误报告"找不到模块".

"解决方案"

"固定"是指定的WebPack配置中的一个节点般的环境,在这里您可以编译使用都可以访问这些内置模块.这样,Webpack就不会搞乱内置模块而且child_process可以使用.您可以通过指定target选项来执行此操作.从Webpack配置文档:

target

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

^{(文件简洁)}

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

您可以做的是保持目标环境相同("web"默认情况下)并尝试模拟模块以满足您的需求.使用node选项:

node

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

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

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

node: {
    fs: "mock"
}

但这会错误地告诉你:

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

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

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