Ошибка при загрузке в audiosprite - модуль не найден: «child_process»

Question

Я пытаюсь загрузить в audiosprite в моем React приложение, которое работает на сервере WebPack, и я получаю следующее сообщение об ошибке:

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; DR

Там нет нет способ обойти это не, если вы (возможно) переключатель на Browserify (потребность чтобы проверить это самостоятельно), который предлагает модуль browserify-fs. Так как браузер не имеет доступа к файловой системе или дочерним процессам, модуль audiosprite не может использоваться в этой утилите. Браузер не может делать то, что он не способен.

Объяснение

Это из-за Webpack. Webpack, по умолчанию, предназначен для компиляции кода для работы в среде веб-браузера. Вся его причина заключается в том, чтобы связать все, чтобы быть удобным для браузера (отсюда и название «веб-пакет»).

Node предлагает несколько встроенных модулей, таких как child_process, path, os, fs и т.д. , которые существуют только в среде узла. Когда Webpack приходит и пытается связать код для браузера, браузер не имеет доступа к этим модулям. Таким образом, когда модули, такие как audiosprite, используют child_process, Webpack связывает их для Интернета по умолчанию, и у вас больше нет доступа к этим модулям. Это объясняет, почему ошибка сообщает, что «модуль не найден».

«Решение»

«исправить» А для указания конфигурации 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)}

Но есть следствие. Из-за того, что вы устанавливаете свою цель как среду 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.

Answer 2

Я думаю, вы должны позволить НПМ установить зависимость только

npm install --save autiosprite