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

Châm ngôn của mình là học để kiếm tiền.

Vì thế mình build các khóa học của mình để giúp anh em tiến bộ nhanh hơn x10 lần , để kiếm được nhiều tiền hơn

  • 🏆 React.js Super: Trở thành React.js Developer trong 7 ngày với mức thu nhập 20 triệu/tháng
  • 🏆 Node.js Super: Giúp bạn học cách phân tích, thiết kế, deploy 1 API Backend bằng Node.js
  • 🏆 Next.js Super: Mình sẽ chia sẻ từ A-Z kiến thức về Next.js, thứ giúp mình kiếm hơn 1 tỉ/năm
  • 🏆 Deploy Super: CI/CD Deploy tự động React, Node, Next lên VPS qua Github Actions kết hợp Telegram Bot

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 npmgithub 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:

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-duthanhduoc.

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

md
# sum-duthanhduoc

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

bash
cd sum-duthanhduoc
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

json
{
  "name": "sum-duthanhduoc",
  "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

json
{
  "name": "sum-duthanhduoc",
  "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/duthanhduoc/sum-duthanhduoc"
  },
  "keywords": ["sum", "add", "tong", "cong"],
  "author": "Du Thanh Duoc",
  "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-duthanhduoc

index.js

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

txt
📦sum-duthanhduoc
  📜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-duthanhduoc để test package của mình.

txt
  📂sum-duthanhduoc
   📜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-duthanhduoc vào file main.js

main.js

js
const { sum } = require('sum-duthanhduoc')

console.log(sum(1, 2))

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

bash
npm link

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

bash
npm link sum-duthanhduoc

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

txt
📦test-folder
  📂node_modules
   📂sum-duthanhduoc
    📜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.

bash
 node main.js

Kết quả là

bash
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 đó.

💡 Mẹo:

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-duthanhduoc 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

bash
git init
git add .
git commit -m "init"
git remote add origin git@github.com:duthanhduoc/sum-duthanhduoc.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


👉 Kiến thức trong khóa học Next.js này đã giúp mình kiếm hơn 1 tỉ đồng/năm

Phew! Cuối cùng bạn cũng đã đọc xong. Bài viết này có hơi dài một tí vì mình muốn nó đầy đủ nhất có thể 😅

Website bạn đang đọc được viết bằng Next.js TypeScript và tối ưu từng chi tiết nhỏ như SEO, hiệu suất, nội dung để đảm bảo bạn có trải nghiệm tốt nhất.

Với lượt view trung bình là 30k/tháng (dù website rất ít bài viết). Website này đem lại doanh thu 1 năm vừa qua là hơn 1 tỉ đồng

Đó chính là sức mạnh của SEO, sức mạnh của Next.js.

Mình luôn tin rằng kiến thức là chìa khóa giúp chúng ta đi nhanh nhất.

Mình đã dành hơn 6 tháng để phát triển khóa học Next.js Super | Dự án quản lý quán ăn & gọi món bằng QR Code. Trong khóa này các bạn sẽ được học mọi thứ về framework Next.js, các kiến thức từ cơ bản cho đến nâng cao nhất, mục đích của mình là giúp bạn chinh phục mức lương 25 - 30 triêu/tháng

Nếu bạn cảm thấy bài viết này của mình hữu ích, mình nghĩ bạn sẽ thích hợp với phong cách dạy của mình. Không như bài viết này, khóa học là sự kết hợp giữa các bài viết, video, bài tập nhỏ và dự án lớn có thể xin việc được ngay. Học xong mình đảm bảo bạn sẽ lên tay ngay. 💪🏻

Avatar Dư Thanh Được

Dư Thanh Được

Một developer thích nghiên cứu và chia sẻ kiến thức về lập trình, blockchain, marketing. Chuyên code và dạy lập trình website