Aufbau eines modernen React-Bibliotheksstarters: Ein umfassender Leitfaden

Einführung

Das Erstellen einer modernen React-Bibliothek erfordert eine sorgfältige Berücksichtigung von Build-Tools, Entwicklungserfahrung und Ausgabeoptimierung. Dieser Leitfaden führt Sie durch den Aufbau eines professionellen React-Bibliotheksstarters mit TypeScript, SWC und Rollup – einer leistungsstarken Kombination, die überragende Leistung, Zuverlässigkeit und Entwicklererfahrung bietet.

Warum diese Tools wichtig sind

TypeScript: Typsicherheit und Entwicklererfahrung

• Statische Typprüfung: Fehler während der Entwicklung und nicht zur Laufzeit erkennen

• Erweiterte IDE-Unterstützung: Bessere automatische Vervollständigung, Refactoring und Code-Navigation

• Selbstdokumentierender Code: Typen dienen als lebendige Dokumentation

• Verbesserte Wartung: Macht große Codebasen einfacher zu verwalten

• Wachsende Community: Umfangreiche Typdefinitionen für beliebte Bibliotheken

SWC: Zusammenstellung der nächsten Generation

• Rust-Powered-Leistung: Bis zu 20-mal schneller als Babel
• Drop-in Replacement: Kompatibel mit bestehenden Babel-Konfigurationen
• Geringer Speicherbedarf: Effizientere Ressourcennutzung
• Native TypeScript-Unterstützung: Direkte Kompilierung ohne Zwischenschritte
• Aktive Entwicklung: Regelmäßige Updates und Verbesserungen

Rollup: Optimierte Bibliotheksbündelung

• Tree Shaking: Erweiterte Beseitigung toten Codes
• Mehrere Ausgabeformate: ESM-, CommonJS- und UMD-Unterstützung
• Kleinere Bundle-Größe: Kein unnötiger Laufzeitcode
• Plugin-Ökosystem: Umfangreiches Set an offiziellen und Community-Plugins
• Code-Splitting: Effiziente Chunk-Verwaltung

Leitfaden zur Projekteinrichtung

1. Projektstruktur initialisieren

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

# Create essential directories
mkdir src

2. Abhängigkeiten installieren

# 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. TypeScript-Konfiguration

Tsconfig.json erstellen:

{
  "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. Rollup-Konfiguration

Rollup.config.js erstellen:

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. Package.json-Konfiguration

Aktualisieren Sie Ihre package.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"
  },
}

Bibliothekscode schreiben

Komponentenbeispiel

Src/index.tsx erstellen:

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

# Create essential directories
mkdir src

Best Practices

1. Entwicklungsworkflow

• Verwenden Sie Git-Hooks (Husky) zum Flusen und Testen vor dem Commit
• Semantische Versionierung implementieren
• Kontinuierliche Integration/Bereitstellung einrichten

2. Dokumentation

• Fügen Sie eine detaillierte README.md hinzu
• Geben Sie Anwendungsbeispiele an
• Peer-Abhängigkeiten dokumentieren

3. Leistung

• Paketgröße minimal halten
• Umbaufreundlicher Exporte umsetzen
• Vermeiden Sie nach Möglichkeit Laufzeitabhängigkeiten

Veröffentlichung

1. Version in package.json aktualisieren
2. Erstellen Sie die Bibliothek: npm run build
3. Testen Sie den Build: npm pack
4. Veröffentlichen: npm veröffentlichen

Arbeitsbeispiel hinzufügen

Richten Sie eine Vite-App ein, um Beispiele bereitzustellen und Codeänderungen im Repo selbst zu testen. Dies geht auch mit einem Bilderbuch.

# 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

Fügen Sie Ihr Paket im Abschnitt „Abhängigkeiten“ der Beispieldatei package.json hinzu

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

Importieren Sie Ihre Komponente und testen Sie sie im Beispielprojekt.

Ihre React-Bibliothek ist jetzt zur Veröffentlichung bereit! ?

Wenn Sie mit einem gebrauchsfertigen Setup loslegen möchten, sehen Sie sich die vollständige Starter-Vorlage hier an: https://github.com/Abhirup-99/react-library-starter-template. Diese Vorlage enthält alles, was wir behandelt haben, und soll Ihnen dabei helfen, die Entwicklung Ihrer React-Bibliothek mit minimalem Setup zu starten.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonAufbau eines modernen React-Bibliotheksstarters: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!