🔥Được vừa ra mắt khóa học Next.js Super đấy, xem thử đi nào

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

🎉 Nếu anh em thấy Front-End cạnh tranh quá thì chúng ta học thêm Back-End thôi.

Mình đang có khóa học🏆 Node.js Super, với các kiến thức như: Express.js, TypeScript, MongoDB, Socket.io, Docker, AWS, Swagger, ...

Vậy nên anh em có thể mua ngay từ bây giờ để tăng khả năng pass phỏng vấn nhé 😉

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

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


Khóa học ReactJs giúp bạn chinh phục mức lương 25 - 30 triệu/tháng

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ể 😅

Chúng ta đều hiểu rằng Javascript và React không hề dễ, chúng có quá nhiều concept cần phải học. Mình cũng cảm thấy nó khó! Nay lại có thể Typescript nữa 🥲, thật sự khó nuốt.

Nhưng đừng lo: Bạn có thể nắm vững các kiến thức trên chỉ trong một khóa học ReactJs Super - Shopee Clone Typescript

Mình đã bắt đầu code React vào năm 2019, và nó đã trở thành thư viện ưa thích của mình để xây dựng UI và web app. Mình cũng đã làm việc với nhiều framework khác như Angular, Vue nhưng thực sự chỉ có React là đem lại cho mình cảm xúc và sự hiệu quả. 💓

Nếu bạn đang gặp khó khăn với React, mình ở đây để giúp bạn!

Mình đã dành hơn 6 tháng để phát triển khóa học ReactJs Super - Shopee Clone Typescript. Trong khóa này bạn sẽ được học mọi thứ về thư viện ReactJs, 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, quizz, 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