Webpack - webpack-dev-server: ไม่พบคำสั่ง

ฉันกำลังทำงานกับ React webapp โดยใช้ webpack ควบคู่ไปกับบทช่วยสอนนี้

บังเอิญฉันเพิ่มโฟลเดอร์ node_modules ไปยังคอมไพล์ของฉัน git rm -f node_modules/*จากนั้นผมก็หยิบมันออกมาอีกครั้งโดยใช้

ตอนนี้เมื่อฉันลองเริ่มเซิร์ฟเวอร์ webpack ฉันได้รับข้อผิดพลาดต่อไปนี้:

> 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

ตอนแรกฉันคิดว่ามันเป็นแค่โครงการของฉัน แต่จากนั้นฉันก็ตรวจสอบจุดตรวจสอบรหัสของบทช่วยสอน: ข้อผิดพลาดเดียวกัน! ดูเหมือนว่าจะมีบางอย่างยุ่งเหยิงไปทั่วโลก

นี่คือสิ่งที่ฉันได้ลองทำแล้ว:

• rm node_modules และติดตั้งใหม่ด้วย npm install
• npm cache cleanตามที่มีคนกล่าวถึงเกี่ยวกับปัญหานี้ใน github
• ติดตั้ง webpack ทั่วโลกด้วยไฟล์ npm install -g webpack
• ลบโหนดและ npm ออกจากระบบของฉันโดยสมบูรณ์ (โดยใช้คู่มือนี้ ) และติดตั้งใหม่โดยใช้การชง

ข้อความแสดงข้อผิดพลาดยังคงมีอยู่ ฉันจะลองทำอะไรได้อีก?

PS: เนื้อหาของ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;

โอเคมันง่ายมาก:

npm install webpack-dev-server -g

สิ่งที่ทำให้ฉันสับสนที่ฉันไม่ต้องการสิ่งนั้นในตอนแรกอาจมีการเปลี่ยนแปลงด้วยเวอร์ชันใหม่

FYI ในการเข้าถึงสคริปต์ใด ๆ ผ่านทางบรรทัดคำสั่งเช่นเดียวกับที่คุณพยายามคุณจะต้องลงทะเบียนสคริปต์เป็นเชลล์สคริปต์(หรือสคริปต์ประเภทใด ๆ เช่น. js, .rb)ในระบบเช่นไฟล์เหล่านี้ใน dir /usr/binใน UNIX และระบบต้องรู้ว่าจะหาได้ที่ไหน กล่าวคือต้องโหลดตำแหน่งใน$PATHอาร์เรย์

ในกรณีของคุณสคริปต์webpack-dev-serverถูกติดตั้งไว้ที่ใดที่หนึ่งใน./node_modulesไดเร็กทอรีแล้ว แต่ระบบไม่ทราบวิธีเข้าถึง ดังนั้นในการเข้าถึงคำสั่งwebpack-dev-serverคุณต้องติดตั้งสคริปต์ในขอบเขตส่วนกลางด้วย

$ npm install webpack-dev-server -g

ในที่นี้-gหมายถึงขอบเขตทั่วโลก

อย่างไรก็ตามไม่แนะนำวิธีนี้เนื่องจากคุณอาจประสบปัญหาที่ขัดแย้งกันของเวอร์ชัน ดังนั้นแทนที่จะคุณสามารถตั้งค่าคำสั่งในnpm's package.jsonไฟล์เช่น:

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

การตั้งค่านี้จะช่วยให้คุณเข้าถึงสคริปต์ที่คุณต้องการด้วยคำสั่งง่ายๆ

$ npm start

สั้นมากที่จะจดจำและเล่น และรู้ตำแหน่งของโมดูลnpmwebpack-dev-server

สคริปต์webpack-dev-serverถูกติดตั้งแล้วภายในไดเร็กทอรี. / โหนด_modules คุณสามารถติดตั้งอีกครั้งทั่วโลกโดย

sudo npm install -g webpack-dev-server

หรือเรียกใช้แบบนี้

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

. หมายถึงดูในไดเรกทอรีปัจจุบัน

เส้นด้าย

ฉันมีปัญหาเมื่อทำงาน: yarn start

ได้รับการแก้ไขด้วยการรันครั้งแรก: yarn install

ฉันมีปัญหาเดียวกัน แต่ขั้นตอนด้านล่างช่วยให้ฉันหลุดพ้นจากปัญหานี้ได้

1. การติดตั้ง 'webpack-dev-server' ในเครื่อง (ในไดเร็กทอรีโครงการเนื่องจากไม่ได้เลือกจากการติดตั้งส่วนกลาง)

   การติดตั้ง npm - บันทึก webpack-dev-server

สามารถตรวจสอบได้ว่ามีโฟลเดอร์ "webpack-dev-server" อยู่ภายใน node_modules หรือไม่

2. ทำงานโดยใช้ npx สำหรับการเรียกใช้โดยตรง

npx webpack-dev-server --mode development --config ./webpack.dev.js

npm run start นอกจากนี้ยังใช้งานได้ดีโดยที่รายการของคุณในสคริปต์ package.json ควรเป็นเหมือนด้านบนโดยไม่มี npx

ฉันพบว่าคำตอบที่ยอมรับใช้ไม่ได้ในทุกสถานการณ์ เพื่อให้แน่ใจว่าใช้งานได้ 100% คุณต้องล้างแคช npm ด้วย โดยตรงไปที่แคชและล้างการล็อกแคชแบบไม่ระบุชื่อ -cli-metrics.json; หรือลองดูnpm cache cleanก็ได้

เนื่องจากผู้เขียนได้ล้างแคชก่อนที่จะลองใช้วิธีแก้ไขปัญหาที่แนะนำจึงเป็นไปได้ที่ไม่สามารถทำให้เป็นส่วนหนึ่งของข้อกำหนดเบื้องต้นได้

สำหรับการติดตั้งส่วนกลาง: npm ติดตั้ง webpack-dev-server -g

สำหรับการติดตั้งในเครื่อง npm install --save-dev webpack

เมื่อคุณอ้างถึง webpack ในไฟล์ package.json มันจะพยายามดูในตำแหน่ง node_modules \ .bin \

หลังจากการติดตั้งภายในเครื่องไฟล์ wbpack จะถูกสร้างขึ้นในตำแหน่ง: \ node_modules \ .bin \ webpack

ฉันสังเกตเห็นปัญหาเดียวกันหลังจากติดตั้ง VSCode และเพิ่มที่เก็บ Git ระยะไกล อย่างไรก็ตาม/node_modules/.binโฟลเดอร์ถูกลบและทำงานnpm install --save webpack-dev-serverในบรรทัดคำสั่งติดตั้งโฟลเดอร์ที่หายไปและแก้ไขปัญหาของฉัน

ฉันจะติดตั้งกับnpm install --save-dev webpack-dev-serverชุด package.json แล้วฉันและ webpack.config.js เช่นนี้: การตั้งค่า

จากนั้นฉันเรียกใช้ webpack-dev-server และได้รับข้อ ผิดพลาดนี้

ถ้าไม่ใช้npm install -g webpack-dev-serverติดตั้งแล้วจะแก้ไขอย่างไร?

ฉันคงข้อผิดพลาดโดยการเอาconfiguration has an unknown property 'colors' colors:trueมันได้ผล!

ฉันมีปัญหาคล้าย ๆ กับYarnไม่มีข้อใดที่ใช้ได้ผลสำหรับฉันดังนั้นฉันจึงเพียงแค่ถอด./node_modulesและเรียกใช้yarn installและปัญหาก็หายไป

npm ติดตั้ง webpack-dev-server -g - windows OS

คุณควรใช้ sudo ใน linux ดีกว่าเพื่อหลีกเลี่ยงข้อผิดพลาดในการอนุญาต

sudo npm ติดตั้ง webpack-dev-server -g

คุณสามารถใช้ sudo npm install webpack-dev-server --save เพื่อเพิ่มลงใน package.json

บางครั้งคุณอาจต้องเรียกใช้คำสั่งด้านล่าง

npm ติดตั้ง webpack-cli - บันทึกหรือ npm ติดตั้ง webpack-cli -g