Membina Perpustakaan Reaksi Moden: Panduan Komprehensif

pengenalan

Mencipta pustaka React moden memerlukan pertimbangan yang teliti terhadap alatan binaan, pengalaman pembangunan dan pengoptimuman output. Panduan ini akan membimbing anda membina pemula perpustakaan React profesional menggunakan TypeScript, SWC dan Rollup—gabungan berkuasa yang menawarkan prestasi unggul, kebolehpercayaan dan pengalaman pembangun.

Mengapa Alat Ini Penting

TypeScript: Taip Keselamatan dan Pengalaman Pembangun

• Pemeriksaan Jenis Statik: Tangkap ralat semasa pembangunan dan bukannya masa jalan

• Sokongan IDE Dipertingkat: Autolengkap, pemfaktoran semula dan navigasi kod yang lebih baik

• Kod Pendokumentasian Kendiri: Jenis berfungsi sebagai dokumentasi hidup

• Penyelenggaraan yang Diperbaiki: Menjadikan pangkalan kod yang besar lebih mudah diurus

• Komuniti Berkembang: Takrif jenis yang luas untuk perpustakaan popular

SWC: Kompilasi Generasi Seterusnya

• Prestasi Dikuasakan Karat: Sehingga 20x lebih pantas daripada Babel
• Penggantian Drop-in: Serasi dengan konfigurasi Babel sedia ada
• Jejak Memori Rendah: Penggunaan sumber yang lebih cekap
• Sokongan Native TypeScript: Kompilasi langsung tanpa langkah perantaraan
• Pembangunan Aktif: Kemas kini dan penambahbaikan yang kerap

Gulung: Himpunan Perpustakaan Dioptimumkan

• Gegar Pokok: Penghapusan kod mati lanjutan
• Format Output Berbilang: sokongan ESM, CommonJS dan UMD
• Saiz Himpunan Lebih Kecil: Tiada kod masa jalan yang tidak diperlukan
• Ekosistem Plugin: Set kaya dengan pemalam rasmi dan komuniti
• Pembahagian Kod: Pengurusan bahagian yang cekap

Panduan Persediaan Projek

1. Mulakan Struktur Projek

mkdir react-library
cd react-library
npm init -y

# Create essential directories
mkdir src

2. Pasang Ketergantungan

# Core dependencies
npm install react react-dom --save-peer

# Development dependencies
npm install --save-dev typescript @types/react @types/react-dom \
  @swc/core @swc/helpers \
  rollup @rollup/plugin-swc @rollup/plugin-node-resolve \
  @rollup/plugin-commonjs rollup-plugin-peer-deps-external

3. Konfigurasi TypeScript

Buat tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "declaration": true,
    "declarationDir": "dist/types",
    "emitDeclarationOnly": true,
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

4. Konfigurasi Gulung

Buat rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { swc, defineRollupSwcOption } from '@rollup/plugin-swc';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import terser from '@rollup/plugin-terser';

const packageJson = require('./package.json');

const swcConfig = defineRollupSwcOption({
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: true,
    },
    transform: {
      react: {
        runtime: 'automatic',
        development: false,
        refresh: false,
      },
    },
    target: 'es2018',
  },
  minify: false,
});

export default [
  // ESM build
  {
    input: 'src/index.tsx',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      }),
      commonjs(),
      swc(swcConfig),
      terser(),
    ],
    external: ['react', 'react-dom'],
  },
  // CommonJS build
  {
    input: 'src/index.tsx',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
        exports: 'auto',
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      }),
      commonjs(),
      swc(swcConfig),
      terser(),
    ],
    external: ['react', 'react-dom'],
  },
];

5. Konfigurasi Package.json

Kemas kini pakej anda.json:

{
  "name": "your-library-name",
  "version": "1.0.0",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/types/index.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c",
    "types": "tsc",
    "prepare": "npm run types && npm run build",
    "lint": "eslint ."
  },
  "peerDependencies": {
    "react": ">=17.0.0 <19.0.0",
    "react-dom": ">=17.0.0 <19.0.0"
  },
}

Menulis Kod Perpustakaan

Contoh Komponen

Buat src/index.tsx:

mkdir react-library
cd react-library
npm init -y

# Create essential directories
mkdir src

Amalan Terbaik

1. Aliran Kerja Pembangunan

• Gunakan cangkuk Git (husky) untuk pra-komit linting dan ujian
• Laksanakan versi semantik
• Sediakan penyepaduan/pengerahan berterusan

2. Dokumentasi

• Sertakan README.md terperinci
• Berikan contoh penggunaan
• Dokumenkan kebergantungan rakan sebaya

3. Prestasi

• Pastikan saiz berkas minimum
• Melaksanakan eksport mesra gegar pokok
• Elakkan kebergantungan masa jalan apabila boleh

Penerbitan

1. Kemas kini versi dalam package.json
2. Bina pustaka: npm run build
3. Uji binaan: pek npm
4. Terbitkan: npm publish

Tambah contoh kerja

Sediakan apl vite untuk memberikan contoh dan menguji perubahan kod dalam repo itu sendiri. Ini juga boleh dilakukan dengan buku cerita.

# Core dependencies
npm install react react-dom --save-peer

# Development dependencies
npm install --save-dev typescript @types/react @types/react-dom \
  @swc/core @swc/helpers \
  rollup @rollup/plugin-swc @rollup/plugin-node-resolve \
  @rollup/plugin-commonjs rollup-plugin-peer-deps-external

tambah pakej anda dalam bahagian dependencies pada contoh package.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "declaration": true,
    "declarationDir": "dist/types",
    "emitDeclarationOnly": true,
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Import komponen anda dan ujinya dalam projek contoh.

Pustaka React anda kini sedia untuk diterbitkan! ?

Jika anda ingin menyelam dengan persediaan sedia untuk digunakan, lihat templat permulaan lengkap di sini: https://github.com/Abhirup-99/react-library-starter-template. Templat ini merangkumi semua yang telah kami bincangkan dan direka bentuk untuk membantu anda memulakan pembangunan perpustakaan React anda dengan persediaan yang minimum.

Selamat mengekod!

Atas ialah kandungan terperinci Membina Perpustakaan Reaksi Moden: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!