รวมคำสั่ง npm ที่ Dev ต้องรู้จัก

npm (Node Package Manager) คือเครื่องมือที่ใช้ในการติดตั้ง Javascript Library เข้ามาใช้หรือจะลบ(uninstall) ออกจาก Application ของเราก็ได้

รวมทั้งเรายังสามารถตั้ง Artifact Server ขึ้นมาเพื่อเก็บ JavaScript Library ที่เราพัฒนาขึ้นมาไว้ใช้ภายในองค์กรแบบส่วนตัวก็ได้

npm ทำอะไรได้บ้าง

1. Package Management - สามารถติดตั้ง อัปเดต และลบ Package ได้อย่างง่ายดาย
2. Versioning - รองรับการควบคุม Version ของ Package ทำให้สามารถเลือก Update เฉพาะ Version ที่ต้องการได้
3. Dependencies Management - ช่วยให้มั่นใจว่า Package ทั้งหมดในโปรเจกต์ของคุณได้รับการติดตั้งและอัปเดตอย่างถูกต้อง
4. NPM Scripts - ใช้ในการจัดการคำสั่งที่ใช้บ่อย เช่น การ Run server หรือ Compile Code
5. Publish Package - สามารถสร้างและแบ่งปัน Package ของคุณเองให้กับคนอื่นๆ ผ่าน npm registry

การติดตั้ง npm

โดยทั่วไป npm จะถูกติดตั้งมาพร้อมกับ Node.js ดังนั้นหากต้องการใช้งาน npm ให้ดาวน์โหลดและติดตั้ง Node.js จากเว็บไซต์ทางการ Node.js

ตรวจสอบเวอร์ชันของ npm และ Node.js

หลังจากติดตั้งเรียบร้อยแล้ว สามารถตรวจสอบเวอร์ชันของ npm และ Node.js ได้โดยใช้คำสั่งต่อไปนี้:

node -v  # ตรวจสอบเวอร์ชันของ Node.js
npm -v   # ตรวจสอบเวอร์ชันของ npm

คำสั่งพื้นฐานของ npm

คำสั่งต่างๆที่เราจะต้องใช้ในการทำงานกับ npm มีดังนี้ั

Install Package

npm install คือคำสั่งที่ใช้ติดตั้ง Dependencies(Javascript libraries) ที่เรานำเข้ามาใช้ใน project ซึ่งจะแบ่งการใช้งานออกเป็นเรื่องๆ ดังนี้

• ติดตั้ง Package ที่ระบุไว้ใน package.json

  npm install 
  

• ติดตั้ง Package เข้ามาใช้งานใน project

  npm install <package-name>
  

• ติดตั้ง Package เป็น dependency ของโปรเจกต์

  npm install <package-name> --save
  

  คำสั่งนี้จะนำชื่อ package ที่ติดตั้งเพิ่มเข้าไปใน package.json

• ติดตั้ง Package ที่ใช้ตอน dev เท่านั้น

  npm install <package-name> --save-dev
  

การระบุ Version ของ Package

นอกจากการติดตั้งโดยการระบุชื่อ Package เพียงอย่างเดียว เรายังสามารถระบุ Version ที่ต้องการด้วยการใช้เครื่องหมายต่างๆต่อไปนี้

1. ติดตั้ง Version ล่าสุด(เป็นค่า default อยุ่แล้วไม่ต้องกำหนดก็ได้)

   npm install <package-name>@latest
   

2. ติดตั้งเวอร์ชัน beta หรือ pre-release ล่าสุด

   npm install <package-name>@next
   

3. ติดตั้งแบบระบุ Version ลงไปเลย

   npm install <package-name>@<version>
   

   ยกตัวอย่างเช่น

   npm i express@5.0.0-alpha.5
   

4. นอกจากการระบุเลข Version ลงไปตรงๆแล้วเรายังสามารถใช้ ^ (Caret) และ ~ (Tilde) ในการควบคุม Version ที่ต้องการ Update ได้อีกด้วย

   • ^ (Caret) จะ Update package ที่มี Major เดิม เช่น ^1.2.3 จะ update ทุกๆ Version ที่นำหน้าด้วย 1

   • ~ (Tilde) จะ Update package ที่มี Version ใกล้เคียงกับ Version เดิม เช่น ~1.2.3 จะทำการ update ทุก Version ที่นำหน้าด้วย 1.2 (1.2.x)

   ถ้าเราใช้ ^ (Caret) นำหน้า ต้องคอยระวังวิธีการเขียน Code ที่อาจเปลี่ยนไปใน Version ใหม่ซึ่งอาจทำให้ Code เราพังได้

Update Package

ถ้าต้องการ update package เป็น Version ล่าสุดเราจะต้องใช้คำสั่ง npm update

npm update <package-name>

Uninstall Package

เราสามารถเอา Package ที่ไม่ต้องการออกได้ด้วยคำสั่ง npm uninstall

npm uninstall <package-name>

Clear Cache

เมื่อเกิดปัญหาในการติดตั้ง ให้ลอง Clear cache ด้วยขั้นตอนต่างๆ ดังนี้

1. Clear cache ทั้งหมดของ npm บังคับลบไฟล์ที่อยู่ใน Cache ทั้งหมด

   npm cache clean --force
   

2. ตรวจสอบ Cache เพื่อดูว่ามีไฟล์อะไรอยู่ในแคชบ้าง

   npm cache verify
   

3. ลบโฟลเดอร์ Cache ถ้าคำสั่ง clean ไม่สามารถทำงานได้ให้ทำการลบ folder ~/.npm ออกเองได้เลย

ถ้าบน MacOS หรือ Linux ต้องใส่ sudo นำหน้าด้วย

หลังจากทำการ Clear cache เรียบร้อยแล้วให้ทำการติดตั้ง Package เข้าไปใหม่ด้วยคำสั่ง npm install คำสั่งนี้จะช่วยแก้ไขปัญหาการติดตั้ง Package ที่ผิดพลาด หรือปัญหาที่เกิดจากไฟล์ใน Cache ได้

รู้จักกับ package.json

เป็นไฟล์ที่บันทึกข้อมูลเกี่ยวกับโปรเจกต์และ dependencies ที่จำเป็น ตัวอย่างไฟล์ package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My Project",
  "dependencies": {
    "express": "^4.17.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

เราสามารถสร้างไฟล์ package.json ขึ้นมาได้เองด้วยคำสั่ง

npm init

หลังจากนั้นเราจะต้องตอบคำถามเหล่านี้

package name: (my-project):
version: (1.0.0):
description: My Project
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC) 

หลังจากนั้น npm จะสร้างตัวอย่างของ package.json มาให้เราตรวจสอบ ให้เราพิมพิ์ yes เพื่อยืนยันการสร้างไฟล์ package.json

แต่ถ้าเราต้องการสร้างไฟล์ขึ้นมาโดยใช้ค่า default ทั้งหมดจะต้องเติม -y เข้าไป

npm init -y

หลังจากที่ได้ไฟล์ package.json ออกมาแล้วเราค่อยเข้าไปแก้ไขทีเดียวแบบนี้อาจสะดวกมากกว่า

Run scripts ที่กำหนดไว้

ในกรณีที่เรากำหนด scripts ไว้ใน package.json เราจะใช้คำสั่ง npm run <ชื่อ script> ยกตัวอย่างเช่น ถ้าเรากำหนด script สำหรับเริ่มต้น Run server ไว้แบบนี้

1
2
3
4
5
6
7
8
9

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

หลังจากนั้นเราสามารถใช้ npm run ในการเรียกใช้งาน startup script ที่เรากำหนดไว้ได้

npm run start

package-lock.json

เป็นไฟล์ที่บันทึกรายละเอียดของ Dependencies(Library ของเราไปเรียกใช้ Library อื่นๆ) รวมถึงเวอร์ชันของ Package ที่ได้ติดตั้งของ Package เพื่อให้แน่ใจว่าเมื่อมีการติดตั้ง Package ใหม่ จะได้ผลลัพธ์ที่เหมือนเดิมในทุกครั้ง ถ้าเราอยากรู้ว่า JavaScript Library ที่ติดต้ังอยู่ตอนนี้เป็น Version ไหนให้เข้ามาดูที่ไฟล์นี้

Publish package ของเราขึ้น npm registry

นอกจากเราจะติดต้ัง JavaScript Library จาก npm registry แล้วเรายังสามารถนำ Library ของเราขึ้นไปไว้บน npm registry ซึ่งอาจเป็น npmjs.com หรือ Artifact server ของเราเองก็ได้ โดยใช้คำสั่ง npm publish

npm publish คืออะไร?

npm publish คือคำสั่งที่ใช้ในการเผยแพร่ (publish) Package ของคุณไปยัง npm registry ซึ่งช่วยให้ผู้อื่นสามารถติดตั้งและใช้งาน Package ของคุณได้ผ่านคำสั่ง npm install.

ขั้นตอนการใช้งาน npm publish

1. ลงชื่อเข้าใช้ npm

ก่อนที่จะเผยแพร่ Package คุณต้องลงชื่อเข้าใช้บัญชี npm ของคุณ ถ้ายังไม่มีต้องเข้าไปสมัครสมาชิกให้เรียบร้อยก่อน หลังจากนั้นให้ทำการ Login เข้าระบบผ่านทาง Command line ด้วยคำสั่ง

npm login

จากนั้นกรอก username, password และ email ของบัญชี npm

2. สร้างและตั้งค่า package.json

จากนั้นตรวจสอบให้แน่ใจว่า package.json มีค่าต่อไปนี้:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Application",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/your-repo.git"
  },
  "author": "Phanupong Permpimol",
  "license": "MIT"
}

ข้อควรระวัง: ชื่อ Package(name) ต้องไม่ซ้ำกับ Package ที่มีอยู่ใน npm registry สามารถตรวจสอบชื่อ Package ที่ใช้งานได้ที่ npmjs หรือใช้คำสั่ง npm search <ชื่อ package>

3. เพิ่มไฟล์ .npmignore (Option)

ไฟล์ .npmignore ใช้สำหรับระบุไฟล์ที่ไม่ต้องการให้เผยแพร่ไปยัง npm เช่น node_modules หรือไฟล์ที่ไม่เกี่ยวข้องกับ Package

node_modules
.git
.vscode
.env
README.md

4. ทดสอบก่อน Publish

ในการทดสอบ Package ก่อนนำไปเผยแพร่จะมีอยู่ 2 ขั้นตอนดังนี้

1. ใช้ npm link เพื่อทดสอบการทำงานของ Package โดยเราจะเข้าไปใน folder ของ Package ที่เราต้องการทดสอบแล้วหลังจากนั้นให้ใช้คำสั่ง npm link เพื่อทำให้ Package ที่เราสร้างกำลังพัฒนาอยู่กลายเป็น Global package(เหมือนกับการติดต้ังด้วย npm install -g)

   cd your-package-name
   npm link
   

   ซึ่งหลังบ้านจะเป็นการสร้าง Symlink จาก Folder ของ Package นี้เข้ากับ Global folder หลังจากนี้ถ้าคุณต้องการนำ Package นี้ไปใช้ใน Project ไหนให้จำลองการติดตั้งด้วยคำสั่ง

   npm link [your-package-name]
   

   จะเป็นการ copy code ใน project นี้เข้าไปไว้ใน node_modules เหมือนกับที่เรา install จาก npm registry

2. ใช้ npm pack สำหรับทดสอบการติดตั้ง โดยที่เราจะจำลองการติดต้ังโดยสร้าง zip ไฟล์ที่มีนามสกุล .tgz ด้วยคำสั่ง

   npm pack
   

   หลังจากนั้นให้จำลองการติดตั้งโดยใช้คำสั่ง

   npm install ./your-package-name-1.0.0.tgz
   

5. Publish Package ไปยัง npm registry

หลังจากนั้นให้ Publish package ขึ้นไปบน npm registry ด้วยคำสั่ง

npm publish

หากเป็น Package แบบ Scoped package เช่น @username/mypackage ให้ใช้ --access public เนื่องจากโดย default Scoped package จะถูกกำหนดค่า access เป็น private ซึ่งจะทำให้มีการตรวจสอบสิทธิก่อน install

npm publish --access public

Scoped package คือ Packages หลายๆ Packages ที่ถูกจัดกลุ่มภายใน scope เดียวกัน เทียบได้กับ namespaces ซึ่ง Scoped package ชื่อของ Package ที่เราตั้งไม่ไปซ้ำกับ Packages อื่นๆใน npm registry รวมทั้งเรายังสามารถใช้ Scoped package มาช่วยรวม Packages ที่เกี่ยวข้องกันมาไว้ใน scope เดียวกันได้อีกด้วย

6. ตรวจสอบ Package ใน npm registry

หลังจากเผยแพร่สำเร็จ คุณสามารถดู Package ของคุณได้ที่

https://www.npmjs.com/package/[your-package-name]

7. Update version ของ Package

หากต้องการ Update package ของคุณ ให้แก้ไขไฟล์ package.json โดยเพิ่มหมายเลขเวอร์ชัน เช่นจาก 1.0.0 เป็น 1.0.1 และรันคำสั่ง:

npm version patch
npm publish

สามารถใช้ npm version ตามระดับของการเปลี่ยนแปลง:

• Patch: npm version patch (1.0.0 → 1.0.1) สำหรับการแก้ไขเล็กน้อย
• Minor: npm version minor (1.0.0 → 1.1.0) สำหรับการเพิ่มฟีเจอร์
• Major: npm version major (1.0.0 → 2.0.0) สำหรับการเปลี่ยนแปลงที่ไม่เข้ากันกับเวอร์ชันก่อนหน้า

8. ลบ Package ออกจาก npm (ถ้าจำเป็น)

หากต้องการลบ Package ออกจาก npm สามารถใช้คำสั่ง:

npm unpublish <ชื่อ Package> --force

ข้อควรระวัง: npm ไม่อนุญาตให้ลบ Package ที่เผยแพร่เกิน 72 ชั่วโมง