Xuất bản Gói NPM đầu tiên của bạn

Giới thiệu
Nếu bạn là một nhà phát triển sử dụng Node.js để phát triển chính, bạn có thể đã nghe nói về NPM . Đối với những người chưa có, NPM là một trình quản lý gói được sử dụng cho Node.js để cung cấp các mô-đun mà các nhà phát triển có thể sử dụng trong các dự án của họ để tăng năng suất. Bản thân là một nhà phát triển Node.js, tôi sử dụng các gói NPM phổ biến như Lodash và Date Functions để làm cho quy trình phát triển của tôi dễ dàng hơn.
Sử dụng gói NPM rất đơn giản. Tất cả những gì bạn phải làm là cài đặt gói bằng NPM, nhập nó vào thành phần của bạn và gọi mô-đun bằng cách gọi các hàm.

Tuy nhiên, không phải tất cả các Gói NPM có sẵn đều có xu hướng giải quyết vấn đề của bạn. Đôi khi, bạn phải viết mã của riêng mình để giải quyết một vấn đề. Nhưng, điều gì sẽ xảy ra nếu một nhà phát triển khác gặp phải vấn đề tương tự? Chà, bằng cách chuyển đổi mã mà bạn vừa viết thành Gói NPM sẽ giúp các nhà phát triển khác tiết kiệm được vô số giờ.
Do đó, bài viết này sẽ khám phá cách tạo và xuất bản Gói NPM đầu tiên của bạn để những người dùng khác có thể truy cập và sử dụng thư viện của bạn!
Tạo gói NPM
Với mục đích trình diễn, hãy để chúng tôi tạo và xuất bản một thư viện toán học có khả năng:
- Xác định số chẵn & lẻ
- Thực hiện phép cộng, phép trừ, phép nhân và phép chia trên một nhóm số.
Bước 01 - Điều kiện tiên quyết
Trước khi chúng tôi bắt đầu phát triển thư viện, hãy đảm bảo rằng bạn có những điều sau đây.
- Node.JS: Tải xuống và cài đặt phiên bản ổn định mới nhất của Node.JS.
- NPM: Đảm bảo rằng bạn đã cài đặt NPM trên máy của mình (cài đặt này được cài đặt sẵn với Node.js).
- Tài khoản NPM: Để xuất bản các gói, bạn sẽ yêu cầu tài khoản NPM, do đó, hãy tạo tài khoản của bạn trên NPM để bắt đầu.
NPM yêu cầu mã thông báo xác thực để truy cập tài khoản NPM của bạn từ thiết bị đầu cuối.
Trong một thiết bị đầu cuối mới (hoặc Command Prompt), hãy chạy lệnh npm login
. Cung cấp tên người dùng và mật khẩu NPM của bạn và xác nhận để truy cập thành công vào tài khoản NPM của bạn thông qua NPM CLI.
Nếu bạn đã đăng nhập thành công vào tài khoản NPM của mình, bạn sẽ thấy kết quả bên dưới.

Bước 03 - Khởi tạo Gói NPM mới
Sau khi thiết lập NPM thành công, chúng ta có thể tạo một gói NPM trống mà chúng ta có thể sử dụng để viết thư viện toán học của mình.
Để làm như vậy, hãy điều hướng đến thư mục ưa thích của bạn và chạy lệnh bên dưới.
npm init
Sau đó, nó sẽ tạo một package.json
tệp chứa siêu dữ liệu, phụ thuộc của bên thứ ba.
Của bạn package.json
sẽ trông như hình dưới đây.
Bước 04 - Cấu hình ESLint
Cài đặt ESLint là tùy chọn, nhưng bạn nên làm như vậy khi viết mã JavaScript. ESLint giúp phát hiện các lỗi, lỗ hổng tiềm ẩn và thực thi các phương pháp mã hóa tốt nhất để đảm bảo thư viện của bạn hoạt động tốt.
Do đó, cá nhân tôi sử dụng ESLint trong tất cả các dự án JavaScript của mình.
Để thêm ESLint vào Gói NPM mới của bạn, chỉ cần chạy lệnh npm init @eslint/config
trong thư mục gốc của dự án của bạn. Trong quá trình này, hãy đảm bảo rằng bạn để lệnh cài đặt ESLint như một phần phụ thuộc vào sự phát triển.
Ngoài ra, lệnh sẽ yêu cầu bạn tùy chỉnh cấu hình linting của mình. Đối với điều này, hãy thêm các cấu hình hiển thị bên dưới.






Đảm bảo rằng bạn chọn hướng dẫn kiểu Airbnb.


Sau khi cung cấp các tùy chọn cấu hình này, lệnh sẽ tạo tệp cấu hình ESLint ( .eslintrc.yml
) trong thư mục gốc với các cấu hình được hiển thị bên dưới.
Bước 05 - Định cấu hình Babel
Là những nhà phát triển JavaScript hiện đại, chúng tôi đã quen với việc sử dụng ECMA2015 +. Vì vậy, chúng tôi sẽ sử dụng ECMA2015 + để viết gói NPM của mình. Do đó, để tăng khả năng tương thích, chúng tôi cần chuyển đổi mã trong gói của mình sang JavaScript tương thích trên các trình duyệt. Đây là lúc Babel phát huy tác dụng.
Thật đơn giản để thêm Babel vào Dự án NPM của bạn.
Trước tiên, bạn sẽ cần cài đặt Babel trong dự án của mình như một phần phụ thuộc vào sự phát triển. Để làm như vậy, hãy chạy lệnh bên dưới.
npm install --save-dev @babel/cli @babel/core @babel/preset-env
Cấu hình được hiển thị ở trên sẽ đảm bảo rằng chúng tôi có thể sử dụng toán tử lây lan, các lớp và các câu lệnh nhập / xuất trong các tệp JavaScript của chúng tôi.
Bước 06 - Viết các hàm toán học
Tạo các thư mục cần thiết
Sau khi định cấu hình các phụ thuộc phát triển như ESLint & Babel, chúng ta có thể bắt đầu viết mã thư viện toán học.
Đầu tiên, chúng ta hãy tạo một thư mục mới có tên là “ lib
” trong thư mục gốc. Thư mục “ lib
” chỉ định mã thư viện.
Trong thư mục, tạo một thư mục khác có tên là “ modules
”.
Trong thư mục “ modules
”, tạo hai tệp:
number-functions.js
- Viết các hàm phát hiện số lẻ / chẵnmath-functions.js
- Viết các hàm cộng, trừ, chia, nhân một nhóm số.
.
├── package-lock.json
├── package.json
├── .eslintrc.yml
├── .gitignore
└── lib
└── modules
├── math-functions.js
└── number-functions.js
Khi xác định các chức năng cho gói NPM của bạn, hãy luôn đảm bảo rằng các chức năng của bạn có thể kiểm tra đơn vị. Nó đảm bảo rằng mã của bạn không có lỗi và đáng tin cậy.
Thêm các hàm lẻ / chẵn
Và, với ý nghĩ đó, chúng ta hãy thêm các hàm để suy ra số lẻ và số chẵn trong tệp - number-functions.js
. Mã này được hiển thị bên dưới.
Đoạn mã hiển thị ở trên cho thấy hai hàm được khai báo chấp nhận một số và kiểm tra chẵn và lẻ. Bạn có thể nhận thấy rằng cả hai chức năng đang được xuất. Nó được thực hiện để đảm bảo rằng người dùng cài đặt thư viện có thể nhập các chức năng cần thiết vào dự án của họ.
Thêm các hàm toán học
Sau đó, chúng tôi có thể điều hướng đến math-functions.js
tệp và thêm các chức năng cần thiết để thực hiện tính toán toán học. Các chức năng này được hiển thị bên dưới.
Đoạn mã hiển thị ở trên hoàn thành thư viện mà chúng tôi đang xây dựng. Bạn có thể nhận thấy rằng chúng tôi đã thêm một Tài liệu JavaScript cho mỗi chức năng. Nó được thực hiện để cung cấp hướng dẫn cho người dùng cuối hiểu về chức năng và các đầu vào và đầu ra của nó.
Xuất các Hàm trong Điểm nhập - index.js
Để đảm bảo rằng người dùng có thể nhập các chức năng mà không cần điều hướng quá sâu vào thư viện, chúng tôi có thể thêm tệp “ index.js
” trong thư mục gốc (điểm vào của thư viện) và nhập lại và xuất tất cả các hàm từ tệp đó. Bằng cách này, người dùng có thể nhập tất cả các chức năng thông qua index.js
tệp.
Điều này được hiển thị bên dưới.
Bước 07 - Kiểm tra Thư viện
Tạo tệp phân phối bằng Babel
Sau khi thêm các chức năng vào index.js
, bây giờ chúng ta có thể tạo mã phân phối cho thư viện.
Điều này được thực hiện với Babel bằng lệnh dưới đây.
npx babel lib --out-dir dist
Liên kết Gói để thử nghiệm cục bộ
Sau đó, chúng tôi có thể bắt đầu thử nghiệm Thư viện NPM.
Chúng tôi không cần phải xuất bản thư viện để kiểm tra nó. NPM cho phép chúng ta mô phỏng quá trình này bằng cách liên kết thư viện cục bộ thông qua lệnh npm link
. Điều này sẽ tạo ra một phiên bản toàn cầu của gói mà bạn có thể cài đặt cục bộ. Để mô phỏng quá trình cài đặt, hãy thực hiện lệnh npm link <<PACKAGE-NAME>>
thêm gói vào node_modules
dự án thử nghiệm.
Đầu tiên, trước tiên chúng ta hãy chạy npm link
trên Dự án NPM mà chúng ta đã tạo.

Kiểm tra gói cục bộ
Sau đó, bạn có thể kiểm tra cục bộ gói. Đối với điều này, tôi sẽ sử dụng một ứng dụng React mẫu được tạo qua npx create-react-app my-test-app
.
Trong ứng dụng React, hãy mở một thiết bị đầu cuối và chạy lệnh npm link <<PACKAGE-NAME>>
để liên kết gói toán học được mô phỏng cục bộ với ứng dụng React của bạn để bạn có thể kiểm tra nó.

Sau đó, chúng ta có thể bắt đầu sử dụng thư viện trong ứng dụng React. Việc sử dụng mẫu được hiển thị bên dưới.
Đoạn mã trên cho thấy thư viện đang được nhập vào App.js
và đang được gọi. Ngoài ra, tài liệu JavaScript cũng hiển thị.

Các kết quả đầu ra cho việc sử dụng thư viện được hiển thị bên dưới.

Thư viện của chúng tôi đã vượt qua các bài kiểm tra một cách thành công! Chúng tôi có thể tiến hành và xuất bản Gói NPM lên Kho lưu trữ NPM để những người dùng khác có thể tải xuống và sử dụng thư viện.
Bước 08 - Xuất bản thư viện lên NPM
Để xuất bản Thư viện NPM của bạn, hãy mở một thiết bị đầu cuối trên Dự án NPM và chạy lệnh hiển thị bên dưới.
npm publish

Và viola! Bạn đã tạo và xuất bản thành công gói NPM đầu tiên của mình.
Bạn có thể dùng thử gói này bằng cách chạy lệnh bên dưới.
npm i math-computers // install the package we published
Bài viết này đã cung cấp thành công thông tin chi tiết về cách tạo và xuất bản Gói NPM mà các nhà phát triển bên thứ ba có thể tải xuống để họ sử dụng.
Tôi hy vọng rằng bài viết này khuyến khích bạn tạo Gói NPM của riêng mình và giúp đóng góp cho cộng đồng nhà phát triển Node.JS!
Thư viện mẫu được phát triển trong bài viết này có thể truy cập được trong kho lưu trữ GitHub của tôi và trên NPM .
Tôi hy vọng rằng bạn thấy bài viết này hữu ích.
Cảm ơn bạn đã đọc.