Biến Component React thành gói npm

Khi phát triển ứng dụng, đôi khi bạn cần tạo một gói npm cho một component React để có thể tái sử dụng trong các dự án khác nhau. Bài viết này sẽ hướng dẫn bạn cách tổ chức mã nguồn một cách hợp lý để thực hiện điều đó. Chúng ta sẽ sử dụng các công cụ như Rollup, Vite và GitHub Pages.

Mục tiêu của bài viết

• Kết hợp React và TypeScript một cách hiệu quả.
• Đảm bảo rằng các thay đổi trong component sẽ ngay lập tức hiển thị trên trang demo (hot reload).
• Xây dựng component cuối cùng thành một gói npm.
• Xuất bản ứng dụng demo để người khác có thể xem cách hoạt động của nó.

Các bước chuẩn bị

1. Cài đặt môi trường phát triển

Trước tiên, bạn cần cài đặt Node.js và npm. Bạn có thể tải xuống từ trang chủ Node.js.

2. Tạo dự án mới

mkdir react-component-npm-package
cd react-component-npm-package
npm init -y

3. Cài đặt các phụ thuộc cần thiết

Cài đặt React, ReactDOM, TypeScript, Rollup, Vite và các plugin cần thiết:

npm install react react-dom typescript --save
npm install rollup rollup-plugin-typescript2 rollup-plugin-peer-deps-external --save-dev
npm install vite @vitejs/plugin-react --save-dev

4. Cấu hình TypeScript

Tạo file tsconfig.json với nội dung sau:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Cấu hình Rollup

1. Tạo file cấu hình Rollup

Tạo file rollup.config.js với nội dung sau:

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'cjs',
    sourcemap: true,
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    terser(),
  ],
};

2. Thêm script vào package.json

Cập nhật file package.json để thêm script build:

"scripts": {
  "build": "rollup -c"
}

Cấu hình Vite cho trang demo

1. Tạo thư mục và file demo

Tạo thư mục demo và file index.tsx:

mkdir demo
cd demo
npm init -y
npm install react react-dom

2. Cấu hình Vite

Tạo file vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

3. Thêm script vào package.json của demo

Cập nhật file package.json trong thư mục demo:

"scripts": {
  "dev": "vite"
}

Xuất bản ứng dụng trên GitHub Pages

1. Cài đặt gh-pages

npm install gh-pages --save-dev

2. Cập nhật package.json

Thêm các thông tin cần thiết vào package.json:

"homepage": "http://<username>.github.io/react-component-npm-package",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

3. Xuất bản

Chạy lệnh sau để xuất bản:

npm run deploy

Các mẹo và thực hành tốt nhất

• Sử dụng TypeScript: Giúp bạn phát hiện lỗi sớm hơn và cải thiện khả năng đọc mã.
• Theo dõi các thay đổi: Sử dụng hot reload để dễ dàng theo dõi các thay đổi trong quá trình phát triển.

Những cạm bẫy thường gặp

• Quên cấu hình peerDependencies: Đảm bảo bạn đã thêm các dependency cần thiết vào peerDependencies trong package.json.
• Chưa cài đặt các plugin: Đảm bảo bạn đã cài đặt đúng các plugin Rollup và Vite.

Kết luận

Bây giờ bạn đã có thể biến một component React thành một gói npm một cách đơn giản với Rollup và Vite. Hãy thử nghiệm và chia sẻ ứng dụng của bạn với cộng đồng!

Câu hỏi thường gặp (FAQ)

Làm thế nào để cài đặt gói npm của tôi?

Bạn chỉ cần chạy npm install <tên-gói> trong dự án của bạn.

Tôi có thể sử dụng gói này với các framework khác không?

Có, miễn là bạn cài đặt React và các dependency cần thiết.

Có cách nào khác để tạo gói npm không?

Có, bạn có thể sử dụng TSDX hoặc Create React Library, nhưng Rollup và Vite là lựa chọn tuyệt vời cho sự đơn giản và hiệu suất.

Tài nguyên tham khảo

• Rollup Documentation
• Vite Documentation

Hãy thử mã nguồn tại đây: GitHub Repository