NPM đại cương - Tôi đã đẩy package lên npm như thế nào?

NPM đại cương - Tôi đã đẩy package lên npm như thế nào?

Bài viết trong chủ đề này:
  1. NPM đại cương - Tôi đã đẩy package lên npm như thế nào?
  2. NPM đại cương - Xây dựng và đẩy package lên npm
Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

Vấn đề

Chắc hẳn mọi người ở đây ai cũng từng nghe, biết và sử dụng npm hằng ngày trong công việc. NPM là một kho lưu trữ packages khổng lồ mà chủ yếu là các thư viện javascript dùng cho lập trình web hay node.js.

Bản thân NPM chỉ là kho vậy thì các package từ đâu ra? Câu trả lời là từ cộng đồng, trong đó có thể có chính các bạn - những người hẳn đang có những ý tưởng thú vị và sẵn sàng chia sẻ.

Bản thân tôi sau rất nhiều lần dùng "chùa" các packages thì một biến cố lớn xảy đến, đó là tôi không thể tìm được một component nào nhập mã OTP cho vue.js cả (tại thời điểm lúc đó, còn bây giờ thì tôi cũng không rõ lắm :D). Thế là tôi đành phải tự viết, nhưng khoan thay vì dùng một mình thì tại sao tôi không đóng gói nó và chia sẻ lên mạng nhỉ? Lúc đó điều tôi nghĩ ngay đến là mạng "phân phối nội dung" NPM thần thánh.

Ý tưởng đến để xây dựng một package luôn xuất hiện ở mọi nơi, mặc dù bây giờ có hàng chục hoặc thậm chí hàng trăm package khác nhau nhưng cùng giải quyết cùng một vấn đề. Cạnh tranh với các package lâu đời có lượt download khổng lồ là khó. Tuy nhiên đóng góp một phần nhỏ bé cũng là đóng góp phải không mọi người? Điều bạn cần là tạo một package có độ tin cậy cao, phát hành đúng thời điểm cộng một chút may mắn.

Lựa chọn nền tảng cho packages

Các packages trên npm rất đa dạng, ví dụ có những package chỉ dành cho browser hoặc chỉ dành cho node.js, hay có cả những package hỗ trợ cả hai. Ngoài ra một package viết cho vue.js thì react.js không thể nào dùng được v.v...& v.v..

Vì thế ngay từ đầu bạn nên xác định sẽ viết package sử dụng cho nền tảng nào. Ví như như tôi đã chọn "package OTP INPUT cho vue.js".
Việc xây dựng một package sẽ dễ dàng hơn nếu như bạn tìm được "khung" phù hợp. Khung ở đây là một project được setup sẵn mọi thứ từ run build, run dev, run test... tất tần tật, việc của bạn chỉ là tập trung vào xử lý logic.
Hoặc nếu không tìm thấy hay không muốn dùng sẵn thì bạn có thể lựa chọn xây dựng từ đầu, đồng nghĩa với việc bạn phải setup tất cả mọi thứ. Dĩ nhiên là có thể lược bớt các thành phần như run dev, run test... nhưng như thế sẽ khiến package của bạn thiếu đi sự "chuyên nghiệp".

Một số khung phổ biết mà tôi biết:

Sau khi đã hoàn thành logic cho package, tôi sẽ cần phải tạo một file README.md trong đó mô tả cách sử dụng, các attributes v.v... đủ để cho mọi người hiểu. Ngoài ra còn chỉ cho họ cách để chạy dev, test... khi họ muốn contribute.
Bước cuối cùng là bước publish package lên npm.

Làm quen npm cli

CLI của npm giúp sẽ giúp tôi đẩy package lên repository. Mặc định khi cài node.js là sẽ có npm, vì thế ai chưa có thì cài node.js nhé!

Kiểm tra phiên bản npm:

$ npm -v
6.14.12

Đăng nhập vào npm:

$ npm login

Di chuyển đến thư mục chứa project cần publish, ví dụ ở đây tôi move đến thư mục vue-otp-2:

$ cd vue-otp-2

Đảm bảo rằng trong thư mục đó đã có file package.json. NPM sẽ dựa vào package.json để publish package của bạn, một file package.json cơ bản phải có name & version:

{
  "name": "vue-otp-2",  
  "version": "1.0.0",  
}

Trong đó name là tên package được dùng để install npm i vue-otp-2 còn version là phiên bản của package tại thời điểm publish.

Sau đó publish:

$ npm publish

Ngồi chờ cho đến khi publish thành công và bạn sẽ nhận được một email thông báo về việc này.

Một số lưu ý khi publish:

  • Hãy đảm bảo version package của bạn theo chuẩn semantic. Nếu chưa biết có thể xem thêm ở đây.

  • Hãy đảm bảo tên version của bạn là unique trên npm. Ví dụ bạn không thể đặt tên package là vue-opt-2 nữa đơn giản là tôi đã sở hữu cái tên đó rồi, còn nếu bạn vẫn muốn dùng cái tên đó thì npm cung cấp thêm một lựa chọn tên package nữa đại loại sẽ gắn thêm username của bạn vào tên: @hoaitx:vue-opt-2. Tham khảo cách thiết lập tại đây.

  • Ngoài name & version thì còn rất nhiều thông số thú vị để khiến cho profile package của bạn trông "ngầu" hơn. Tham khảo thêm tại đây.

Tips & tricks:

  • Một vài bạn publish thành công rồi nhưng lúc install vào project thì không sử dụng được thì rất có thể là chưa xác định đúng điểm nhập module trong package. Cụ thể package.json có một thuộc tính là main được dùng để xác định file nào sẽ được import vào khi gọi require/import mặc định là index.js. Ví dụ package có name là foo, khi gọi require("foo") thì nó tương ứng với đường dẫn là node_modules/foo/index.js.

  • Try on RunKit là một ứng dụng cho phép chúng ta dùng thử package trước khi quyết định có nên cài đặt hay không :D.

Tổng kết

Ở bài viết này tôi chỉ dừng lại ở mức tường thuật lại quá trình publish package của tôi lên npm. Ở bài viết sau tôi sẽ đi vào chi tiết từng bước tạo package.

À cho bạn nào thắc mắc từ đầu bài đến giờ chưa thấy link đến package của tôi thì nó đây https://www.npmjs.com/package/vue-otp-2.

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (0)

Nội dung bình luận...