NPM đại cương - Xây dựng và đẩy package lên npm

NPM đại cương - Xây dựng và đẩy package lên npm

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 đề

Ở bài viết trước tôi đã tóm tắt quá trình hoàn thành việc đẩy một package lên npm, trong bài viết này tôi sẽ đi chi tiết cách làm package của tôi và cụ thể là một package cho vue.js cho việc nhập mã OTP.

Mã nguồn package tại github, và npm vue-otp-2.

Tạo khung

Ngay từ đầu tôi đã xác định làm package cho vue.js nên tôi đã tìm thấy một khung hỗ trợ cho việc đó đó là https://www.npmjs.com/package/vue-sfc-rollup.

Cụ thể package này giúp tôi khởi tạo một project với các thiết lập tối thiểu giúp cho việc phát triển nhanh chóng, nó bao gồm:

  • rollupjs.org - hỗ trợ cho việc build thư viện
  • Tích hợp sẵn babel.js
  • Một file SFC (Single File Component) mẫu để triển khai mã
  • ...

Viết logic

Về logic, package này chỉ đơn giản tạo ra một số lượng các ô vuông nhất định, mỗi ô vuông chỉ cho phép nhập một số. Khi nhập đủ các ô thì phát ra một event chứa dữ liệu đã nhập vào. Ngoài ra cũng có thể xoá dữ liệu trong các ô một cách liền mạch nữa, chứ không phải bấm vào từng ô để xoá đâu nhé :D.

Tư tưởng là vậy, trong quá trình làm tôi gặp một số vấn đề về xử lý sao cho package hoạt động mượt mà & phải không được gây ra bất kì lỗi lầm gì. Cuối cùng sau vài giờ làm việc thì tôi cũng đã đã hoàn thành được nó.

Kiểm thử

Sau khi hoàn thành tất cả mọi thứ thì tôi bắt đầu vào giai đoạn kiểm thử (test), nói là thế chứ thực chất trong quá trình viết code thì tôi vẫn phải test chứ.

Bước này là bước verify lại tất cả các case mà tôi có thể nghĩ ra, từ happy case cho đến những case ngoại lệ tôi đều kiểm tra lại hết. Vì không có nhiều thời gian nên tôi quyết định chọn con đường manual test. Nếu mọi người có thời gian thì có thể tìm hiểu thêm cách viết unit test thì sẽ khiến cho package "xịn xò" hơn đấy :D.

Tạo trang demo

Tất cả các case đều pass thì lúc này tôi tiến hành tạo một trang demo.

Demo khá là quan trọng vì nó sẽ giúp cho người dùng tương tác thực tế với package của bạn. Tạo niềm tin cho họ, đồng thời cũng giúp họ kiểm tra xem đây có phải là package họ thực sự cần. Ngoài ra có một trang demo cũng thể hiện sự đầu tư vào package của bạn, làm tăng thêm độ uy tín.

Tạo ra một trang demo cũng khá đơn giản, điều bạn cần là tìm một dịch vụ nào cho phép triển khai một ứng dụng vue.js lên đó. Thật may mắn tôi có biết đến vercel là hậu thân của (now.sh)[https://now.sh] có hỗ trợ điều đó.

Viết docs

Docs là rất quan trọng, phải có docs thì người dùng mới biết cách sử dụng package của bạn vì thế hãy đầu tư thời gian để hoàn thiện docs.

Docs cần rõ ràng & xúc tích, focus vào những tính năng chính mà package mang lại. Thông thường docs sẽ được trình bày theo "mô típ":

  • Giới thiệu ngắn gọn về package.
  • Get started: Giới thiệu cách cài đặt, cách sử dụng...
  • API: Phần này sẽ đi sâu vào phân tích những hàm, thuộc tính có trong package...
  • Dev: Hướng dẫn cách contribution.
  • License.
  • ...

Bạn hoàn toàn có thể viết docs trong file README.md hoặc sử dụng một số dịch vụ hỗ trợ trong việc trình bày như gitbook.

Publish package

Bước cuối cùng là tôi sẽ đẩy package lên npm thông qua cli của npm.

Nhưng trước khi đẩy các bạn cần lưu ý xem package của bạn có cần phải build ra không nhé. Thông thường build là bước để compiler code của bạn ra mã thuần Javascript.

Như trong package của tôi thì trước khi publish tôi cần chạy lệnh build:

$ npm run build

Sau đó là đẩy lên thôi:

$ npm login
$ npm publish

Tổng kết

Việc đẩy một package lên npm là không khó, tuy nhiên bạn cần phải chú ý trong việc lựa chọn nền tảng hoạt động của package cũng như các công cụ hỗ trợ việc build mã của bạn ra cho trình duyệt hay node.js hiểu để có thể sử dụng được.

Cao cấp
Hello

Bí mật ngăn xếp của Blog

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào 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...