Membina Perpustakaan Reaksi Moden: Panduan Komprehensif-tutorial js-php.cn

Building a Modern React Library Starter: A Comprehensive Guide

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

Salin selepas log masuk

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

Salin selepas log masuk

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"]
}

Salin selepas log masuk

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'],
  },
];

Salin selepas log masuk

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"
  },
}

Salin selepas log masuk

Menulis Kod Perpustakaan

Contoh Komponen

Buat src/index.tsx:

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

# Create essential directories
mkdir src

Salin selepas log masuk

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

Kemas kini versi dalam package.json
Bina pustaka: npm run build
Uji binaan: pek npm
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

Salin selepas log masuk

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"]
}

Salin selepas log masuk

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!