在audiosprite中加载错误-找不到模块:"child_process" [英] Error loading in audiosprite - Module not found: 'child_process'

问题描述

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

I'm trying to load in audiosprite in my React app which is running on a Webpack server and I'm getting the following error:

未找到模块:'child_process' C:\ Users \ BenLi \ Desktop \ development projects \ app \ node_modules \ audiosprite

Module not found: 'child_process' in C:\Users\BenLi\Desktop\development projects\app\node_modules\audiosprite

不知道这可能是什么，或者为什么此模块会发生这种情况，显然，Webpack不应抛出它随附的child_process错误.

Have no idea what this could be or why it's occurring with this module as apparently, Webpack should not throw child_process errors as it comes with it.

我将其包含在我的应用中，如下所示:

I'm including it in my app like so:

import audiosprite from 'audiosprite';

文件中来自此处的错误:

The error in coming from here in the file:

function spawn(name, opt) {
  opts.logger.debug('Spawn', { cmd: [name].concat(opt).join(' ') })
  return require('child_process').spawn(name, opt)
}

如何解决此错误?

推荐答案

TL; DR

除非您(也许)切换到浏览器(需要)，否则没有的方法.自己进行测试)，它提供了一个 browserify-fs 模块.由于浏览器始终无法访问文件系统或子进程，因此在此用例中不能使用模块audiosprite.浏览器无法做其无能为力的事情.

There is no way around this unless you (maybe) switch to Browserify (need to test this myself) which offers a browserify-fs module. Since the browser has no access to the file system or child processes anyways, the module audiosprite can't be used in this usecase. The browser cannot do what it's incapable of.

说明

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

This is because of Webpack. Webpack, by default, is designed to compile code to run in a web-browser environment. The whole reason it exists is to bundle everything up to be browser-friendly (hence the name "web pack").

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

Node offers some built-in modules such as child_process, path, os, fs, etc. that only exist in a Node environment. When Webpack comes along and tries to bundle code for the browser, the browser does not have access to these modules. Thus, when modules such as audiosprite use child_process, Webpack bundles them for the web by default and you no longer have access to these modules. This explains why the error reports that the "module is not found".

解决方案"

修复"是指定您的Webpack配置以编译以供在类似Node的环境中使用，在该环境中您可以执行来访问这些内置模块.这样，Webpack不会弄乱内置模块，并且可以使用child_process.您可以通过指定target选项来执行此操作.从 Webpack配置文档:

A "fix" is to specify your Webpack configuration to compile for usage in a Node-like environment, where you do have access to these built-in modules. That way, Webpack won't mess with the built-in modules and child_process can be used. You can do this by specifying the target option. From the Webpack Configuration documentation:

target

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

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)

^{(为简洁起见，文档已剪裁)}

但是有结果.由于您将目标设置为节点环境，因此使用浏览器时require将不起作用，因为浏览器环境中没有require.

But there's a consequence. Because of you setting your target as a Node environment, require will not work when using the browser as there is no require in the browser environment.

您可以做的是保持目标环境不变(默认情况下为"web")，并尝试根据需要模拟模块.使用 node选项:

What you can do is keep the target environment the same ("web" by default) and try to mock the module for what you need. With the node option:

node

包括用于各种节点材料的polyfill或模拟:

node

Include polyfills or mocks for various node stuff:

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

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

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

And apply it to the Webpack configuration file:

node: {
    fs: "mock"
}

但这会错误地告诉您:

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

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

所以这只是设计使然.您无能为力，因为捆绑浏览器环境将不可避免地禁止您访问文件系统，因为无法这样做.您无法为某个模块提供浏览器模拟，而该模块执行的功能在浏览器中是不可能的. child_process和其他语言也是如此.

So this is just by design. There is nothing you can do because bundling for the browser environment will inevitably forbid you from accessing the file system because it can't. You can't provide a browser mock for a module which does things that are impossible in the browser. The same goes for child_process and others.

我一直在寻找其他选择，并且浏览器可能或可能不行.他们确实提供了 browserify-fs 模块来替代Node的fs.我尚未对此进行测试，因此不确定它是否有用，但看起来比Webpack现在要好.

I've been looking for some alternatives, and Browserify may or may not work. They do offer a browserify-fs module as a replacement to Node's fs. I have yet to test this so I'm not sure if it could be useful but it looks better than what Webpack does now.

这篇关于在audiosprite中加载错误-找不到模块:"child_process"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！