Webpack - webpack-dev-server: comando non trovato

Question

Sto lavorando a una webapp React utilizzando il webpack, liberamente insieme a this tutorial.

Per inciso, ho aggiunto la cartella node_modules al mio git. L'ho rimosso di nuovo usando git rm -f node_modules/*.

Ora, quando cerco di avviare il server webpack, ottengo il seguente errore:

> webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors 

sh: webpack-dev-server: command not found 

npm ERR! Darwin 14.4.0 
npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve" 
npm ERR! node v0.12.4 
npm ERR! npm v2.10.1 
npm ERR! file sh 
npm ERR! code ELIFECYCLE 
npm ERR! errno ENOENT 
npm ERR! syscall spawn 
npm ERR! Blabber@0.0.1 devserve: `webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors` 
npm ERR! spawn ENOENT 

In un primo momento ho pensato che fosse solo il mio progetto, ma poi ho controllato il codice checkpoint del tutorial: stesso errore! Quindi qualcosa sembra essere incasinato a livello globale.

Ecco quello che ho provato finora:

• rm node_modules e reinstallare con npm install
• npm cache clean come qualcuno ha detto per quanto riguarda this issue on github
• installare webpack a livello globale con npm install -g webpack
• cancellare completamente nodo e NPM dal mio sistema (utilizzando this guide) e reinstallare utilizzando brew

Il messaggio di errore persiste. Cos'altro posso provare?

PS: Il contenuto di webpack.dev.config.js è:

var config = require('./webpack.config.js'); 
var webpack = require('webpack'); 

config.plugins.push(
    new webpack.DefinePlugin({ 
    "process.env": { 
     "NODE_ENV": JSON.stringify("development") 
    } 
    }) 
); 

module.exports = config; 

Answer 1

Va bene, è stato facile:

npm install webpack-dev-server -g 

Quello che mi ha confuso che non ho bisogno che in un primo momento, probabilmente le cose sono cambiate con un nuovo versione.

Answer 2

FYI, to access any script via command-line like you were trying, you need to have the script registered as a shell-script (or any kind of script like .js, .rb) in the system like these files in the the dir /usr/bin in UNIX. And, system must know where to find them. i.e. the location must be loaded in $PATH array.

---

Nel tuo caso, lo script webpack-dev-server è già installato da qualche parte dentro ./node_modules directory, ma il sistema non sa come accedervi. Quindi, per accedere al comando webpack-dev-server, è necessario installare lo script nello scope globale .

$ npm install webpack-dev-server -g 

Qui, -g fa riferimento all'ambito globale.

---

Tuttavia, questo non è consigliato perché si potrebbero riscontrare problemi di versione in conflitto; così, invece è possibile impostare un comando in package.json file di npm 's come:

"scripts": { 
    "start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors" 
    } 

Questa impostazione vi permetterà di accedere allo script che si desidera con un semplice comando

$ npm start 

così breve da memorizzare e giocare. E, npm conosce la posizione del modulo webpack-dev-server.

Answer 3

Io installo con npm install --save-dev webpack-dev-server quindi ho impostato package.json e webpack.config.js in questo modo: setting.

Quindi eseguo webpack-dev-server e ottieni questo errore error.

Se non si utilizza npm install -g webpack-dev-server da installare, quindi come risolverlo?

Ho corretto l'errore configuration has an unknown property 'colors' rimuovendo colors:true. Ha funzionato!

Answer 4

Lo script webpack-dev-server è già installato nella directory ./node_modules. Si può o installare nuovamente a livello globale da

sudo npm install -g webpack-dev-server 

o correre in questo modo

./node_modules/webpack-dev-server/bin/webpack-dev-server.js -d --config webpack.dev.config.js --content-base public/ --progress --colors 

. mezzi guardare nella directory corrente.

Answer 5

Ho trovato che la risposta accettata non funziona in tutti gli scenari. Per assicurarsi che funzioni al 100%, è necessario ANCHE cancellare la cache npm. O accedi direttamente alla cache e cancella i blocchi, le cache, anonymous-cli-metrics.json; o si può provare npm cache clean.

Poiché l'autore ha eliminato la cache prima di provare la soluzione consigliata, è possibile che non sia riuscita a farla parte dei prerequisiti.