Xây dựng các gói npm hiệu quả với các mô-đun React, TypeScript và CSS: Hướng dẫn toàn diện

Tạo các gói npm có thể tái sử dụng có thể làm cho quá trình phát triển của bạn hiệu quả và thú vị hơn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn tạo một thiết lập dự án hiện đại và mạnh mẽ bằng cách sử dụng React, TypeScript, CSS Modules và các công cụ khác.

Trước khi chúng tôi bắt đầu, bạn có thể tìm thấy mã nguồn ở đây: https://github.com/helgastogova/npm-react-typescript-template . Kho lưu trữ này đóng vai trò là cơ sở để tạo các gói npm bằng React và TypeScript. Nó được cấu hình sẵn với quy trình xây dựng và một tập hợp các gói được đề xuất cho quy trình phát triển hiện đại.

Các tính năng chính bao gồm:

1. React & TypeScript : Phát triển giao diện người dùng hiện đại với tính an toàn kiểu mạnh mẽ và trải nghiệm nhà phát triển vượt trội.
2. Mô-đun CSS : Tạo kiểu các thành phần riêng biệt, tránh xung đột CSS và cho phép thiết kế mô-đun.
3. ESLint : Đảm bảo chất lượng mã bằng cách tuân thủ các phương pháp hay nhất của JavaScript và React.
4. Rollup : Kết hợp hiệu quả mã React và TypeScript vào một tệp duy nhất để phân phối.
5. PostCSS : Sử dụng các tính năng CSS thế hệ tiếp theo và xử lý tính tương thích của trình duyệt.
6. Giới hạn kích thước : Giám sát kích thước thư viện của bạn và ngăn kích thước vô tình tăng lên.

Hãy đi sâu vào từng công cụ một cách toàn diện hơn.

Mô-đun CSS

Các mô-đun CSS đóng vai trò là ngọn hải đăng an toàn trong lĩnh vực phong cách hỗn loạn. Họ triển khai phạm vi cục bộ cho phong cách của bạn, tránh xung đột và các vấn đề chồng chéo. Mỗi mô-đun CSS sẽ được "đóng gói" vào thành phần, đảm bảo các kiểu bạn xác định sẽ không bị rò rỉ và vô tình ảnh hưởng đến các thành phần khác.

Hãy xem xét thành phần đơn giản này nơi chúng tôi sử dụng Mô-đun CSS:

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

Và Mô-đun CSS liên quan của nó:

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

Trong trường hợp này, lớp .root từ TestComponent.module.css sẽ không ảnh hưởng đến bất kỳ lớp .root nào khác trong một mô-đun khác.

ESLint

ESLint giống như ngọn hải đăng hướng dẫn bạn vượt qua biển mã đầy biến động. Nó giúp duy trì chất lượng mã, phát hiện lỗi và thực thi các phương pháp mã hóa tốt nhất trước khi chúng trở thành sự cố.

Trong package.json của bạn, bạn có:

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

Chạy kẻ nói dối với npm run lint . ESLint sẽ quét qua các tệp TypeScript của bạn và cảnh báo bạn về bất kỳ sự cố tiềm ẩn nào. Điều này đặc biệt hữu ích cho các cơ sở mã lớn, nơi dễ dàng xảy ra các lỗi nhỏ hoặc sự không nhất quán.

Tổng số

Rollup là huấn luyện viên thể dục cá nhân cho mã của bạn. Nó sử dụng JavaScript, TypeScript và CSS của bạn và gộp chúng thành một gói tinh gọn, hiệu quả, sẵn sàng để phân phối.

Nó nhẹ và nhanh, nhưng lợi ích thực sự đến từ khả năng "rung cây" của nó. Tổng số có thể loại bỏ mã không sử dụng khỏi gói cuối cùng, làm cho gói của bạn gọn gàng nhất có thể. Dưới đây là ví dụ về cấu hình Tổng số của bạn có thể trông như thế nào:

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

đăngCSS

PostCSS giống như một người du hành thời gian, cho phép bạn viết CSS bằng cú pháp và các tính năng trong tương lai. Sau đó, nó quay ngược thời gian (có thể nói như vậy), chuyển đổi các phong cách hiện đại này thành mã mà ngay cả các trình duyệt cũ hơn cũng có thể hiểu được.

Bạn có thể thấy PostCSS hoạt động trong cấu hình Tổng số ở trên. Sử dụng rollup-plugin-postcss , CSS hiện đại của bạn được chuyển đổi và đưa vào gói cuối cùng của bạn. Cái hay của điều này là bạn có thể viết CSS bằng các tính năng mới nhất mà không phải lo lắng về khả năng tương thích của trình duyệt.

Kích thước giới hạn

Giới hạn kích thước là người canh gác luôn cảnh giác, đảm bảo thư viện của bạn không quá cồng kềnh. Nó tính toán chi phí thực của thư viện của bạn bằng cách thêm cả JavaScript và CSS sẽ được người dùng tải xuống. Đó là một công cụ có giá trị giúp bạn kiểm tra kích thước gói của mình.

Trong package.json của bạn:

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

Sau đó, bạn có thể chạy npm run size để kiểm tra kích thước gói của mình. Nếu vượt quá giới hạn bạn đã đặt (trong trường hợp này là 10 KB), tập lệnh sẽ báo lỗi. Đó là một cách tuyệt vời để đảm bảo bạn không vô tình làm tăng thời gian tải xuống của người dùng.

Cài đặt

Để bắt đầu sử dụng mẫu này, hãy sao chép kho lưu trữ:

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

Điều hướng vào thư mục:

 cd npm-react-typescript-template

Cài đặt các phụ thuộc:

 npm install

Bạn đã sẵn sàng để bắt đầu phát triển gói của mình! Điểm vào là src/index.tsx

Xây dựng gói

Sau khi tạo thành phần của riêng bạn và khi bạn đã sẵn sàng xây dựng gói của mình để phân phối, hãy chạy:

 npm run build

Gói đã xây dựng của bạn sẽ nằm trong thư mục dist , sẵn sàng để xuất bản lên npm.

Xuất bản lên npm

Đảm bảo rằng bạn đã đặt trường name trong package.json thành tên gói bạn muốn. Ngoài ra, hãy nhớ cập nhật số phiên bản trước mỗi lần xuất bản mới. Khi đã xong, hãy đăng nhập vào npm bằng cách sử dụng:

 npm login

Nhập tên người dùng, mật khẩu và email của bạn. Sau khi đăng nhập, bạn có thể xuất bản gói của mình với:

 npm publish

Bây giờ bạn đã xuất bản thành phần của mình trong thư viện npmjs và mọi người có thể bắt đầu sử dụng nó. Bạn thật tuyệt vời!

Chúc mừng mã hóa!