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 ที่จะได้รับเมื่อการสร้างโปรเจ็คเสร็จสิ้น

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 นี่เป็นไฟล์ที่อัพเดทหลังจากที่ได้ติดตั้งสามแพ็กเกจลงในโปรเจ็ค

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 ดังนี้

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 อาร์กิวเมนต์

hello.js
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

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

> marcuscode@1.0.0 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