npx คืออะไร? ต่างจาก npm ยังไง

npx คืออะไร?

npx คือ สั่งที่ใช้ในการ run javascript ที่อยู่ใน package นั้น โดยที่ไม่ต้องติดตั้ง หรือเราจะเรียกว่า package executor

npm คืออะไร?

npm คือ เครื่องมือที่ใช้ติดตั้ง(install) javascript packages คอยดูแลเรื่องการ update packages และ uninstall package ต่างๆเมื่อเราไม่ได้ใช้งานแล้ว

npx ต่างจาก npm ยังไง?

npx นั้นจะต่างกับ npm ตรงที่ npx จะใช้ run javascript ที่อยู่ใน packages นั้นโดยจะมีการติดตั้ง packages ด้วย npm หรือไม่ก็ได้ แต่ npm จะใช้ติดตั้ง packages ต่างๆ ในชีวิตจริงเราจะเห็นการทำงานร่วมกันทั้งแบบ npx อย่างเดียวไม่ต้องมี npm และใช้งานทั้ง npm และ npx ร่วมกัน

การติดตั้ง npx

ถ้าเราใช้ npm ตั้งแต่ version 5.2 เป็นต้นไป(ตอนนี้ 8.11) จะมี npx มาให้เราใช้อยู่แล้วไม่ต้องติดตั้งเพิ่ม

จริงๆแล้ว npx นั้นไม่ได้มี javascript หรือ binary ใดๆ มันเป็นแต่ alias(ชื่อเล่น) เท่านั้น จริงๆแล้วมันคือคำสั่ง npm exec นั่นเอง ซึ่ง npm exec จะสามารถเขียนย่อๆ เป็น npm x เลยกลายเป็น npx ในที่สุด

การที่เรา run คำสั่ง npx

$ npx tsc --init

จะถูกแปลเป็นคำสั่ง npm exec แบบนี้

$ npm exec -- tsc --init

ตัวอย่างการใช้งาน npx

การใช้งาน npx นั้นมีทั้่งแบบที่ต้องติดตั้ง package ด้วย npm ก่อนและแบบที่สามารถเรียกใช้งาน javascript ใน package นั้นได้เลย ซึ่งลองดูตัวอย่างการนำ npx ไปใช้งานดังนี้

ใช้ npx สร้าง React application

ตัวอย่างการใช้งาน npx มาเรียก create-react-app โดยที่ไม่ต้องติดตั้ง create-react-app

$ npx create-react-app react-app

หลังจากนี้เราจะได้ react application อยู่ใน demo-app เรียบร้อย โดยที่เราไม่ต้องติดตั้ง create-react-app เลย

ซึ่งการทำงานของ npx หลังบ้านก็จะมีการ Download package ลงมาเหมือนกันแต่จะเก็บไว้ใน folder temp ของ npx เอง เหมือนเป็น cache เพื่อความรวดเร็วครั้งต่อไปจะได้ไม่ต้อง load javascript package ตัวเดิมใหม่อีกรอบ

ใช้ npx สร้าง Angular application

ในตัวอย่างนี้เราจะใช้ npx ในการสร้าง project ขึ้นมาใหม่ด้วย Angular ซึ่งในตัวอย่างนี้เราจะทำการระบุลงไปเลยว่าจะใช้ package ไหน เพื่อป้องกันข้อผิดพลาด

$ npx -p angular@cli ng new angular-app

หลังจากนั้นเราจะได้ angular application อยู่ใน folder ชื่อ angular-app

ใช้ npx เรียก package kill-port

kill-port คือ Javascript package ตัวนึงที่ทำหน้าที่ kill process ที่กำลังใช้งาน port ที่เราต้องการอยู่ เช่นเราต้องการ kill port 3000 เราสามารถใช้ npx เรียก kill-port มาใช้งานแบบนี้

$ npx kill-port 3000
$ npx kill-port --port 3000

หรือถ้าเราต้องการ kill หลาย ports พร้อมๆกันเราสามารถใช้คำสั่ง kill-port โดยระบุ ports ที่ต้องการปิดเข้าไปพร้อมๆกันแบบนี้ได้เลย

$ npx kill-port --port 3000,5000,8080
$ npx kill-port 3000 5000 8080

ใช้ npx run nodemon

การใช้งาน nodemon เราต้องติดตั้ง package เข้ามาก่อน เพราะเราต้องการ command ที่ชื่อ nodemon

$ npm install --save-dev nodemon

เมื่อเราติดตั้ง nodemon เข้ามาแล้วเราจะ run nodemon ด้วย npx แบบนี้

$ npx nodemon src/index.js

เมื่อก่อนเราต้องไป run nodemon ใน folder .bin ด้วยตัวเองแบนี้

$ ./node_modules/.bin/nodemon

ดูขั้นตอนการติดตั้งและใช้งาน nodemon ได้ที่บทความเรื่อง ทำ Live Reload ด้วย Nodemon

ใช้ npx ในการเรียกใช้ Cypress

ในการทำงานกับ cypress เราต้องมี code ที่ต้องการใช้ cy.visit ใน Code ดังนั้นเราจึงต้อง install cypress เข้ามาในเครื่องก่อนด้วยคำสั่ง

$ npm install cypress --save-dev

หลังจากที่เราติดตั้ง cypress เข้ามาแล้ว เราต้องเรียกหน้า UI ของ cypress ขึ้นมาทำงาน เราจะใช้คำสั่ง

$ npx cypress open

ดูขั้นตอนการติดตั้งแบบเต็มๆได้ที่บทความเรื่อง เขียน Automated Testing ด้วย Cypress

ใช้งาน npx ผ่าน npm run

เราสามารถใช้งาน npx โดยใช้ npm run ได้ ถ้าเราต้องการใช้คำสั่งไหนบ่อยๆ แล้วก็ต้องการให้มันสั้นลง เราจะนำคำสั่งนั้นไปวางไว้ใน scripts ที่อยู่ใน package.json โดยจะมีขั้นตอนดังนี้

1. เปิดไฟล์ package.jsonแล้วเข้าไปสร้าง scripts เพิ่ม(บรรทัดที่ 4)

   1 2 3 4 5 6

   { ... "scripts": { "kill" : "npx kill-port 3000" } }

2. run คำสั่ง npx kill-port โดยใช้ npm run แบบนี้

   $ npm run kill
   

   kill คือชื่อที่เราตั้งเอง(บรรทัดที่ 4 ใน package.json)

หวังว่าบทความนี้จะทำให้ผู้อ่านเข้าใจการทำงานและการใช้งาน npx และ npm กันมากขึ้น แล้วพบกันในบทความต่อๆไปนะครับ