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: . 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. https://github.com/helgastogova/npm-react-typescript-template Các tính năng chính bao gồm: : 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. React & TypeScript : 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. Mô-đun CSS : Đả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. ESLint : Kết hợp hiệu quả mã React và TypeScript vào một tệp duy nhất để phân phối. Rollup : 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. PostCSS : 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. Giới hạn kích thước 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 từ sẽ không ảnh hưởng đến bất kỳ lớp nào khác trong một mô-đun khác. .root TestComponent.module.css .root 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ố. ESLint Trong của bạn, bạn có: package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } Chạy kẻ nói dối với . 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. npm run lint Tổng số 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. Rollup 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 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. PostCSS Bạn có thể thấy PostCSS hoạt động trong cấu hình Tổng số ở trên. Sử dụng , 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. rollup-plugin-postcss Kích thước giới hạn 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. Giới hạn kích thước Trong của bạn: package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] Sau đó, bạn có thể chạy để 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. npm run size 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 , sẵn sàng để xuất bản lên npm. dist Xuất bản lên npm Đảm bảo rằng bạn đã đặt trường trong 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: name package.json 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 và mọi người có thể bắt đầu sử dụng nó. Bạn thật tuyệt vời! thư viện npmjs Chúc mừng mã hóa!
