Node Package Manager (NPM)
ในบทนี้ คุณจะได้เรียนรู้การใช้งาน npm ซึ่งเป็นโปรแกรมที่ใช้สำหรับจัดการแพ็กเกจภาษา JavaScript บน Node.js มันเป็นเครื่องมือที่ช่วยอำนวยความสะดวกและแนะนำให้ใช้เมื่อคุณทำงานบน Node.js นี่เป็นเนื้อหาในบทนี้
- NPM คืออะไร
- การสร้างโปรเจ็คด้วย NPM
- ไฟล์ package.json
- package.json properties
- npm run script
NPM คืออะไร
npm หรือ Node Package Manager คือโปรแกรมสำหรับจัดการแพ็กเกจของภาษา JavaScript และเป็นตัวจัดการแพ็กเกจที่มาพร้อมกับตัวติดตั้งของ Node.js มันเป็นเครื่องมือที่ช่วยอำนวยความสะดวกและแนะนำให้ใช้โดย Node.js สำหรับใช้จัดการกับแพ็กเกจและไลบรารีของภาษา JavaScript ที่คุณต้องการใช้งานสำหรับการเขียนโปรแกรมบน Node.js
คุณสามารถใช้คำสั่ง npm
เพื่อติดตั้งแพ็กเกจหรือไลบรารีจาก npm registry หรือคลังของแพ็กเกจที่อยู่บน npmjs.com เพื่อนำมาใช้ในโปรเจ็คได้อย่างง่ายดาย คุณสามารถติดตั้ง อัพเดท และลบแพ็กเกจได้เพียงแค่ใช้คำสั่ง npm ผ่านทาง Command line
ทุกคนสามารถเขียนและส่งแพ็กเกจหรือไลบรารีของพวกเขาขึ้นไปยัง npm registry ได้ หากแพ็กเกจดังกล่าวอาจมีประโยชน์กับคนอื่นๆ ที่จะนำไปใช้ในงานของพวกเขา ปัจจุบันมีมากกว่า 1.3 ล้านแพ็กเกจที่ถูกเผยแพร่ไปยัง npm registry นั่นหมายความว่าคุณเกือบจะสามารถค้นหาทุกไลบรารีสำหรับใช้ในโปรเจ็คของคุณ
ในตอนที่คุณติดตั้ง Node.js นั้น npm ได้ถูกติดตั้งมาพร้อมกันอยู่แล้ว เพื่อตรวจสอบเวอร์ชันของ Node.js และ npm ที่ติดตั้งในเครื่องคอมพิวเตอร์ของคุณ พิมพ์คำสั่งเหล่านี้ลงบน Command line
node -v
และ
npm -v
นี่เป็นผลลัพธ์ที่คุณควรจะได้รับ
C:\Users\marcuscode> node -v
v14.15.5
C:\Users\marcuscode> npm -v
6.14.11
ทั้งสองคำสั่งควรแสดงเวอร์ชันของ Node.js และ npm ออกมา ถ้าหากคุณไม่สามารถใช้งานคำสั่งเหล่านี้ได้ นั่นหมายความว่าการติดตั้ง Node.js ของคุณยังไม่สมบูรณ์ โปรดตรวจสอบการติดตั้งของคุณหรือทำตามขั้นตอนในบท การติดตั้ง Node.js และเครื่องมือพัฒนาโปรแกรม
การสร้างโปรเจ็คด้วย NPM
เพื่อสร้างโปรเจ็ค Node.js ด้วย npm สร้างโฟล์เดอร์ใหม่ขึ้นมาและทำการ cd เข้าไปในโฟล์เดอร์ดังกล่าว ยกตัวอย่างเช่น เราสร้างโฟล์เดอร์ที่มีชื่อว่า marcuscode
สำหรับโปรเจ็คตัวอย่างของเรา
C:\Users\Metin\projects\marcuscode>
หลังจากที่คุณอยู่ในโฟล์เดอร์แล้ว พิมพ์คำสั่งต่อไปนี้เพื่อเริ่มต้นการสร้างโปรเจ็ค
C:\Users\Metin\projects\marcuscode> npm init
นี่เป็นผลลัพธ์การทำงานของคำสั่ง คุณจะถูกถามให้ใส่รายละเอียดต่างๆ เกี่ยวกับโปรเจ็ค เช่น ชื่อแพ็กเกจ เวอร์ชัน คำอธิบาย ไฟล์หลักของโปรแกรมและอื่นๆ ให้ใส่ค่าที่คุณต้องการและเมื่อเสร็จแล้ว npm จะสร้างไฟล์ที่มีชื่อว่า package.json
ซึ่งเป็นไฟล์ที่เก็บรายละเอียดเกี่ยวกับโปรเจ็คของเรา
C:\Users\Metin\projects\marcuscode>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (marcuscode)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\Metin\projects\marcuscode\package.json:
{
"name": "marcuscode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
นี่เป็นตัวอย่างของไฟล์ package.json ที่จะได้รับเมื่อการสร้างโปรเจ็คเสร็จสิ้น
{
"name": "marcuscode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
ไฟล์ package.json
package.json เป็นไฟล์ที่ใช้สำหรับอธิบายรายละเอียดเกี่ยวกับโปรเจ็ค มันใช้เก็บรายชื่อของแพ็กเกจและเวอร์ชันที่ใช้งานในโปรเจ็ค ซึ่งนี่เป็นไฟล์ที่ npm จะใช้ในการค้นหาและติดตั้งแพ็กเกจ และใช้ในการเผยแพร่แพ็กเกจขึ้นสู่ npm registry
หลังจากได้รับไฟล์ package.json จากการกำหนดค่าโปรเจ็คในขั้นตอนก่อนหน้าแล้ว ต่อไปมาทดลองติดตั้งแพ็กจำนวนหนึ่งสำหรับแสดงตัวอย่างเพื่ออธิบายส่วนประกอบของไฟล์ package.json ให้คุณพิมพ์สามคำสั่งต่อไปนี้ลงบน Command line เพื่อติดตั้งสามแพ็กเกจได้แก่ express, lodash และ jest
npm install express
npm install lodash
npm install --save-dev jest
คำสั่งจะใช้เวลาสักครู่ในการติดตั้งแพ็กเกจ เมื่อเสร็จแล้วคุณจะพบกับฟิลด์ใหม่ที่ปรากฏขึ้นมาในไฟล์ package.json นี่เป็นไฟล์ที่อัพเดทหลังจากที่ได้ติดตั้งสามแพ็กเกจลงในโปรเจ็ค
{
"name": "marcuscode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"lodash": "^4.17.21"
},
"devDependencies": {
"jest": "^26.6.3"
}
}
จะเห็นว่ามีฟิลด์ dependencies
และ devDependencies
ปรากฏขึ้นมาโดยมันเก็บรายการของแพ็กเกจพร้อมกับเวอร์ชันที่ใช้ในโปรเจ็คของเรา แต่คุณอาจสงสัยว่าทำไมมันต้องถูกแบ่งแยกออกเป็นสองฟิลด์
คำตอบก็คือ dependencies
ใช้สำหรับเก็บรายชื่อของแพ็กเกจหลักที่ใช้ในโปรเจ็ค ส่วน devDependencies
เก็บรายชื่อของแพ็กที่ใช้ในระหว่างการพัฒนาโปรแกรมเท่านั้น นั่นหมายความว่าโค้ดส่วนนี้จะไม่ถูกเผยแพร่ไปกับ Buddle ไฟล์เมื่อคุณเผยแพร่โปรเจ็คขึ้นไปยัง Production
เพื่อติดตั้งแพ็กเกจสำหรับใช้ในการพัฒนา ใส่ตัวเลือก --save-dev
ในคำสั่ง npm install
เหมือนกับที่เราทำกับแพ็กเกจ jest
npm install --save-dev jest
เนื่องจากแพ็กเกจ jest นั้นเป็นแพ็กเกจสำหรับการเขียนเทสในขั้นตอนพัฒนาโปรแกรม ดังนั้นเราติดตั้งมันเป็นแบบ devDependencies
ในการติดตั้งแพ็กเกจ คุณจะต้องทราบด้วยตัวเองว่าควรติดตั้งใน dependencies
หรือ devDependencies
โดยทั่วไปแล้วคำอธิบายของแพ็กเกจบน npm จะบอกว่าควรติดตั้งมันที่ไหน
package.json properties
คุณได้เห็นตัวอย่างของไฟล์ package.json อย่างง่ายไปแล้ว ซึ่งมันประกอบไปด้วย Property ต่างๆ เป็นจำนวนมาก ต่อไปเรามาดูกันว่า Property เหล่านั้นเก็บค่าอะไร และมันถูกนำไปใช้งานอย่างไรโดย npm
- name: ชื่อของแพ็กเกจสำหรับโปรเจ็คของคุณ
- version: เวอร์ชันปัจจุบันของแพ็กเกจ
- description: คำอธิบายสั้นๆ ของแพ็กเกจเพื่อให้คนอื่นทราบว่ามันเกี่ยวกับอะไร
- main: ไฟล์หรือทางเข้าหลักที่จะทำงานเมื่อแพ็กเกจนี้ถูกเรียกใช้งาน
- scripts: ทางลัดสำหรับกำหนดคำสั่ง Command line เพื่อรันผ่าน npm run
- author: ชื่อของผู้เขียนแพ็กเกจ นี่มักจะเป็นชื่อของคุณ
- license: ประเภทของ License ที่แพ็กเกจนี้ใช้
- dependencies: รายชื่อของแพ็กเกจหลักที่ใช้ในโปรเจ็ค
- devDependencies: รายชื่อของแพ็กเกจที่ใช้ในระหว่างการพัฒนา
นอกจากนี้ยังมีไฟล์อื่นที่เกี่ยวกับข้อง นั่นคือไฟล์ package-lock.json
ไฟล์นี้จะใช้สำหรับเก็บรายชื่อของแพ็กเกจที่ถูกใช้โดยแพ็กเกจที่ใช้ในโปรเจ็คที่ระบุในไฟล์ package.json
มันช่วยแก้ปัญหาการขัดแย้งกันระหว่างเวอร์ชันของแพ็กเกจ ไฟล์นี้ถูกสร้างขึ้นอัตโนมัติโดย npm ดังนั้นคุณไม่ควรไปแก้ไขมันโดยตรง
แพ็กเกจที่เราติดตั้งด้วย npm สำหรับใช้ในโปรเจ็คจะถูกเก็บอยู่ในโฟล์เดอร์ node_modules
ซึ่งนี่เรียกว่า local packages repository มันเก็บอยู่ในระดับเดียวกับไฟล์ package.json หรือ Project root มันถุูกอัพเดทอัตโนมัติเมื่อมีการติดตั้ง อัพเดท หรือลบแพ็กเกจ และเช่นเดียวกัน คุณไม่ควรไปแก้ไขมันโดยตรง
นั่นหมายความว่าไฟล์ package.json และไฟล์ package-lock.json เก็บรายละเอียดเกี่ยวกับแพ็กเกจที่มีการใช้งานในโปรเจ็ค เราสามารถใช้มันสำหรับอัพเดทแพ็กเกจใน local packages repository ได้โดยการพิมพ์คำสั่ง
npm install
นี่จะทำการติดตั้งและอัพเดทแพ็กเกจทั้งหมดที่ระบุไว้ในไฟล์ package.json และไฟล์ package-lock.json ลงในโฟล์เดอร์ node_modules
ในการทำงานจริง เราทำการ Git ignore โฟล์เดอร์นี้ เนื่องจากมันสามารถสร้างมากจาก package.json และ package-lock.json
NPM run script
โดยปกติแล้วเรารันโปรแกรมบน Node.js ผ่านทางคำสั่ง node
นี่เป็นวิธีพื้นฐานสำหรับการรันโปรแกรมภาษา JavaScript บน Node.js อย่างไรก็ตาม เราสามารถใช้คำสั่ง npm run
ในการรันโปรแกรมได้ มันเป็นคำสั่งที่ทำให้เราสามารถกำหนดทางลัดในการรันคำสั่งใดๆ ผ่าน Command line ได้ นี่เป็นรูปแบบการใช้งาน
npm run scriptName
ในการใช้งาน scriptName
เป็นชื่อของ Script ที่เราต้องการรัน และ Script จะต้องถูกกำหนดในไฟล์ package.json ในฟิลด์ scripts
โดยที่มี Key เป็นชื่อของ Script และค่าเป็นคำสั่งของโปรแกรมที่ต้องการรัน
ยกตัวอย่างเช่นเรามีไฟล์โปรแกรมที่ชื่อว่า hello.js และต้องการรันมันด้วยคำสั่ง
node hello.js metin 10
แทนที่จะรันมันด้วยคำสั่งนี้โดยตรง เราสามารถกำหนดมันไว้ใน npm scripts และรันผ่านคำสั่ง npm run แทนได้ ดังเรากำหนดมันไว้ในไฟล์ package.json ดังนี้
{
"name": "marcuscode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"helloMetin": "node hello.js metin 10",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"lodash": "^4.17.21"
},
"devDependencies": {
"jest": "^26.6.3"
}
}
ดูที่ฟิลด์ scripts
ในไฟล์ package.json เราได้สร้าง Script ที่มีชื่อว่า helloMetin
ซึ่งมีค่าเป็นคำสั่งจริงๆ ที่จะใช้ในการรันโปรแกรม คุณจะเห็น Script อื่นที่มีชื่อว่า test
นี่เป็นตัวอย่างที่ npm สร้างมาให้กับเรา เราสามารถลบมันได้เนื่องจากเราไม่ต้องการมันในตอนนี้
จากนั้นเราสร้างไฟล์โปรแกรม hello.js
ซึ่งเป็นโปรแกรมกล่าวคำทักทายชื่อตามจำนวนที่กำหนดจากค่าที่รับเข้ามาผ่าน Command line อาร์กิวเมนต์
let name = process.argv[2];
let loop = Number(process.argv[3]);
for (let i = 0; i < loop; i++) {
console.log(`${i + 1} Hello ${name}`);
}
จากนั้นเรารันโปรแกรมโดยการใช้คำสั่ง npm rum ดังนี้่
npm run helloMetin
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
> [email protected] helloMetin C:\Users\Metin\projects\marcuscode
> node hello.js metin 10
1 Hello metin
2 Hello metin
3 Hello metin
4 Hello metin
5 Hello metin
6 Hello metin
7 Hello metin
8 Hello metin
9 Hello metin
10 Hello metin
ผลลัพธ์การรันจะแตกต่างจากการรันผ่านคำสั่ง node
โดยตรงเล็กน้อย โดยสองบรรทัดแรกจะแสดงข้อมูลเกี่ยวกับโปรเจ็ค และคำสั่งที่ใช้รันในเบื้องหลัง นี่มีประโยชน์เมื่อคุณมีคำสั่งที่ยาวในการรัน และต้องการประหยัดเวลาในการพิมพ์
คุณอาจจะต้องการส่งอาร์กิวเมนต์เพิ่มเติมเข้าไปยังโปรแกรมที่รันผ่านคำสั่ง npm run
แทนที่จะกำหนดชื่อและจำนวนของการทักทาย คุณสามารถส่งผ่านพารามิเตอร์เหมือนกับการใช้คำสั่ง node
ได้ปกติ
คุณสามารถทำเช่นนั้นได้โดยการกำหนดคำสั่งใน package.json เป็น
"hello": "node hello.js",
จากนั้นในตอนรันคุณสามารถส่งอาร์กิวเมนต์เหมือนกับการรัน Command line โปรแกรมแบบปกติได้ ยกตัวอย่างเช่น
npm run hello Metin 10
ในกรณีนี้ npm จะนำอาร์กิวเมนต์เพิ่มเติมหลังจากชื่อของ Script ไปเชื่อมต่อกับ Command เพื่อรัน ดังนั้นคำสั่งสุดท้ายที่ใช้ในการรันจะเป็น
node hello.js metin 10
และนี่คือสิ่งที่เรามักทำในการรันโปรแกรมผ่านคำสั่ง npm จะเห็นว่ามันสามารถช่วยอำนวยความสะดวกและช่วยประหยัดเวลาในการพิมพ์ และเรายังสามารถใช้มันเป็นสถานที่เก็บคำสั่งที่ต้องใช้รันในโปรเจ็คได้อีกด้วย
ในบทนี้ คุณได้เรียนรู้การใช้งาน npm บน Node.js เราได้พูดถึงการนำมาใช้งานร่วมกับ Node.js เพื่อจัดการแพ็กเกจ อธิบายการทำงานของไฟล์ package.json และการใช้คำสั่ง npm run ในการรันโปรแกรม นี่เป็นสิ่งพื้นฐานที่คุณควรทราบเกี่ยวกับการใช้งาน npm