読み込みエラー - モジュールが見つかりません：「child_process」

Question

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

がどのように私はこのエラーを修正しますか？

Answer 1

TLあなたはNPMは、依存関係 をインストールさせる必要があり推測する。Browserify（必要に君（多分）スイッチがない限り、この周り何方法はありませんDR

これをテストするために）browserify-fsモジュールを提供しています。ブラウザはファイルシステムや子プロセスにアクセスすることができないため、このユースケースではモジュールaudiospriteを使用することはできません。ブラウザは不可能なことをすることはできません。

説明

これはWebPACKのです。 Webpackは、デフォルトでWebブラウザ環境で実行するようにコードをコンパイルするように設計されています。それが存在するすべての理由は、すべてをブラウザフレンドリーにすることです（したがって、名前 "Web Pack"）。

のみノード環境に存在するノードなどchild_process、path、os、fsなど、いくつかの組み込みモジュールを提供しています、など。 Webpackが来てブラウザのコードをバンドルしようとすると、ブラウザはこれらのモジュールにアクセスできない。したがって、audiospriteのようなモジュールがchild_processを使用すると、WebpackはそれらをデフォルトでWebにバンドルし、これらのモジュールにアクセスできなくなります。これは、エラーが「モジュールが見つからない」と報告する理由を説明しています。

「ソリューション」

A「修正」は、は、これらの組み込みモジュールへのアクセス権を持っているノードのような環境での使用のためにコンパイルするためにあなたのWebPACKの設定を指定することです。そうすれば、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)}

しかし、結果はあります。ノード環境としてターゲットを設定したため、requireはブラウザ環境ではrequireが存在しないため、ブラウザを使用しても機能しません。

あなたができることは、ターゲット環境を同じ（デフォルトで"web"）にしておき、必要なモジュールをモックしようとすることです。

node

Include polyfills or mocks for various node stuff:

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

そしてWebPACKのコンフィギュレーション・ファイルに適用されます：node optionで

node: { 
    fs: "mock" 
} 

しかし、これはあなたを語ってエラーになります：

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

だから、これは単なるデザインです。ブラウザ環境にバンドルすると、必然的にファイルシステムにアクセスできないため、ファイルシステムにアクセスできなくなりますので、何もできません。ブラウザでは不可能なことをするモジュールのブラウザモックを提供することはできません。同じことがchild_processなどになります。

編集：私はいくつかの選択肢を探していましたが、Browserifyは機能しない場合があります。ノードのfsの代わりにbrowserify-fsモジュールを提供しています。私はこれをまだテストしていないので、有用かどうかは分かりませんが、Webpackが現在行っていることよりもよく見えます。

Answer 2

私はちょうど

npm install --save autiosprite