Tạo và publish một package lên npm trong 5 phút

Khi code JavaScript được một thời gian, anh em nảy ra một số ý tưởng hay muốn đóng góp cho cộng đồng, muốn mọi người sử dụng thì publish lên npm và github là một trong những cách tốt nhất.

Github thì đơn giản rồi, chỉ cần tạo một repo và push code lên là xong. Nếu bạn không biết git thì mình có bài viết về git cho bạn tại đây:

• Tôi học Git lại từ đầu (phần 1)

• Tôi học Git lại từ đầu (phần 2)

• Top những câu lệnh Git dùng trong thực tế

Còn cho lên npm thì sao? Có nhanh không?

Yep! Nó nhanh lắm mọi người, không có gì khó đâu. Oke bắt đầu luôn nhé.

🥇 Tạo package

Đầu tiên bạn tạo cho mình một folder mới, mình sẽ đặt tên là sum-phamhongduc.

Tiếp theo mình sẽ tạo một file README.md trong folder vừa tạo để mô tả cho package của mình.

Cho bạn nào chưa biết thì README.md là một file markdown, nó sẽ được hiển thị trên trang chủ của package trên npm.

README.md

# sum-phamhongduc
 
Một thư viện giúp bạn tính tổng của 2 số bất kỳ
 
Đơn giản, dễ dùng, cực kỳ nhẹ

Tiếp theo bạn mở terminal lên chuyển đến folder vừa tạo và tạo file package.json

cd sum-phamhongduc
npm init -y

package.json là file mà npm sẽ đọc để biết được package của bạn là gì, nó sẽ được sử dụng để publish package lên npm. Sau khi chạy các câu lệnh trên thì bạn sẽ có được file package.json như sau:

package.json

{
  "name": "sum-phamhongduc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Như bạn thấy name trong file package.json chính là tên package của chúng ta, các bạn thích tên gì thì tự đổi lại nhé.

Lưu ý là tên package không được trùng với các package đã có trên npm. Nếu trùng thì bạn sẽ không thể publish package của mình lên npm được.

Chúng ta sẽ thêm một số thông tin mô tả cho package của mình vào file package.json như sau:

package.json

{
  "name": "sum-phamhongduc",
  "version": "1.0.0",
  "description": "Một thư viện giúp bạn tính tổng của 2 số bất kỳ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/phamhongduc-dev/sum-phamhongduc"
  },
  "keywords": ["sum", "add", "tong", "cong"],
  "author": "Pham Hong Duc",
  "license": "MIT"
}

Về phần repository thì các bạn có cũng được, không cũng được. Chủ yếu là thêm một số thông tin Github cho package của mình. Cho nó uy tín 😂

Cái format repository.url nó có dạng git+URL_REPO

Nếu bạn chưa có repository trên Github thì cũng nên tạo cái đi, quản lý package cho nó dễ.

Tiếp theo mình sẽ tạo file index.js để chứa code chính của package sum-phamhongduc

index.js

const sum = (a, b) => a + b
exports.sum = sum

Cuối cùng thì chúng ta sẽ có package dạng như thế này

📦sum-phamhongduc
 ┣ 📜README.md
 ┣ 📜index.js
 ┗ 📜package.json

🥇 Test package của bạn trước khi publish

Bây giờ mình sẽ tạo folder mới ngay cạnh cái folder sum-phamhongduc để test package của mình.

 ┣ 📂sum-phamhongduc
 ┃ ┣ 📜README.md
 ┃ ┣ 📜index.js
 ┃ ┗ 📜package.json
 ┗ 📂test-folder
 ┃ ┗ 📜main.js

Tạo file main.js trong folder test-folder, mình sẽ dùng cú pháp require để import package sum-phamhongduc vào file main.js

main.js

const { sum } = require('sum-phamhongduc')
 
console.log(sum(1, 2))

Bây giờ vào folder sum-phamhongduc và chạy lệnh

npm link

Tiếp theo vào folder test-folder và chạy lệnh để tải package sum-phamhongduc về

npm link sum-phamhongduc

Lúc này bạn sẽ thấy trong folder test-folder sẽ có một folder node_modules chứa package sum-phamhongduc vừa được tải về.

📦test-folder
 ┣ 📂node_modules
 ┃ ┣ 📂sum-phamhongduc
 ┃ ┃ ┣ 📜README.md
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┗ 📜package.json
 ┃ ┗ 📜.package-lock.json
 ┗ 📜main.js

Bây giờ dùng Nodejs chạy thử file main coi như thế nào nhé, nhớ là cd vào trong thư mục test-folder trước khi chạy lệnh.

 node main.js

Kết quả là

3

Chuẩn không cần chỉnh!

🥇 Publish package lên npm

Các bạn làm theo từng bước sau

1. Tạo tài khoản và xác thực email trên npmjs.com. Nếu không xác thực email thì bạn sẽ không thể publish package lên npm.

2. Kiểm tra tên package của bạn có bị trùng tên với một package nào đó trên npm không, bằng cách search thử trên trang npmjs.com. Nếu trùng thì đổi tên lại cho phù hợp.

3. Đăng nhập npm trên terminal bằng lệnh npm login, nó sẽ bảo bạn nhấn Enter để mở website lên và thực hiện đăng nhập trên website, sao khi đăng nhập website xong là oke

4. Chạy câu lệnh npm publish để publish package lên npm. Nếu không xuất hiện lỗi gì thì thành công rồi đó.

Nếu xuất hiện các lỗi liên quan đến 403 thì bạn nên kiểm tra lại email đã verfiy hay chưa, tên package có bị trùng hay không.

Bây giờ thì package của bạn đã sẵn sàng được dùng bằng câu lệnh npm i sum-phamhongduc rồi đó.

🥇 Cập nhật package

Nãy mình chưa push package của mình lên trên git, bây giờ mình sẽ thực hiện push lên

git init
git add .
git commit -m "init"
git remote add origin git@github.com:phamhongduc-dev/sum-phamhongduc.git
git push -u origin main

Sau này mà muốn cập nhật package trên npm thì thực hiện theo các bước sau

1. Pull code từ github về

2. Sửa code

3. Vào file package.json sửa lại version

4. Login bằng lệnh npm login

5. Chạy lệnh npm publish

Nếu bạn muốn biết quy tắt đặt version thì có thể tham khảo About semantic versioning

🥇 Tài liệu tham khảo

• Contributing packages to the registry

• How To Create And Publish Your First NPM Package

Nguồn bài viết: https://duthanhduoc.com