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

Mar 22 2022
Cách tạo và xuất bản Gói NPM
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.

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.

Hình 01 - Sử dụng Gói NPM “date-fns” trong tệp Node.JS của bạn.

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:

  1. Xác định số chẵn & lẻ
  2. 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.

  1. Node.JS: Tải xuống và cài đặt phiên bản ổn định mới nhất của Node.JS.
  2. 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).
  3. 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.

Hình 02 - Đăng nhập NPM thành công

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.jsontệp chứa siêu dữ liệu, phụ thuộc của bên thứ ba.

Của bạn package.jsonsẽ 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/configtrong 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.

Hình 03 - ESLint - Sở thích 01 - Xác định việc sử dụng ESLint cho dự án
Hình 04 - ESLint - Preference 02 - Chọn loại mô-đun JS
Hình 05 - ESLint - Preference 03 - Lựa chọn khung cho dự án
Hình 06 - ESLint - Sở thích 04 - Lựa chọn ngôn ngữ ưu tiên cho dự án
Hình 07 - ESLint - Cấu hình 05 - Lựa chọn nền tảng cho lớp lót
Hình 08 - ESLint - Cấu hình 06 - Chọn hướng dẫn kiểu

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

Hình 09 - ESLint - Cấu hình 07 - Chọn hướng dẫn kiểu Airbnb
Hình 10— ESLint - Cấu hình 07 —Xác định loại tệp của Tệp cấu hình ESLint

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:

  1. number-functions.js- Viết các hàm phát hiện số lẻ / chẵn
  2. math-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.jstệ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.jstệ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_modulesdự án thử nghiệm.

Đầu tiên, trước tiên chúng ta hãy chạy npm linktrên Dự án NPM mà chúng ta đã tạo.

Hình 11 - Liên kết Gói NPM qua liên kết npm

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

Hình 12 - Liên kết Thư viện với Ứng dụng React để thử nghiệm

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.jsvà đang được gọi. Ngoài ra, tài liệu JavaScript cũng hiển thị.

Hình 13 - Xem tài liệu JavaScript được viết cho thư viện

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

Hình 14 - Sử dụng Thư viện trong Ứng dụng React

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

Hình 14 - Xuất bản Thư viện lên Kho lưu trữ NPM

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.

Tìm hiểu thêm

© Copyright 2021 - 2023 | vngogo.com | All Rights Reserved