Créer un démarreur de bibliothèque React moderne : un guide complet

Introduction

La création d'une bibliothèque React moderne nécessite un examen attentif des outils de construction, de l'expérience en développement et de l'optimisation de la sortie. Ce guide vous guidera dans la création d'une bibliothèque React professionnelle à l'aide de TypeScript, SWC et Rollup, une combinaison puissante qui offre des performances, une fiabilité et une expérience de développement supérieures.

Pourquoi ces outils sont importants

TypeScript : sécurité des types et expérience des développeurs

• Vérification de type statique : détectez les erreurs pendant le développement plutôt que lors de l'exécution

• Support IDE amélioré : meilleure saisie semi-automatique, refactorisation et navigation dans le code

• Code auto-documenté : Les types servent de documentation vivante

• Maintenance améliorée : rend les bases de code volumineuses plus gérables

• Communauté croissante : définitions de types étendues pour les bibliothèques populaires

SWC : compilation de nouvelle génération

• Performance optimisée par la rouille : jusqu'à 20 fois plus rapide que Babel
• Remplacement instantané : Compatible avec les configurations Babel existantes
• Faible empreinte mémoire : utilisation plus efficace des ressources
• Prise en charge native de TypeScript : Compilation directe sans étapes intermédiaires
• Développement actif : mises à jour et améliorations régulières

Rollup : regroupement optimisé des bibliothèques

• Tree Shaking : élimination avancée des codes morts
• Formats de sortie multiples : prise en charge ESM, CommonJS et UMD
• Taille du bundle plus petite : pas de code d'exécution inutile
• Plugin Ecosystem : Riche ensemble de plugins officiels et communautaires
• Code Splitting : gestion efficace des fragments

Guide de configuration du projet

1. Initialiser la structure du projet

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

# Create essential directories
mkdir src

2. Installer les dépendances

# 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. Configuration du script dactylographié

Créez 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. Configuration du cumul

Créez 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. Configuration du package.json

Mettez à jour votre 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"
  },
}

Écriture du code de la bibliothèque

Exemple de composant

Créez src/index.tsx :

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

# Create essential directories
mkdir src

Meilleures pratiques

1. Flux de travail de développement

• Utilisez les hooks Git (husky) pour le peluchage et les tests avant la validation
• Implémenter le versioning sémantique
• Mettre en place l'intégration/le déploiement continu

2.Documents

• Inclure le fichier README.md détaillé
• Fournir des exemples d'utilisation
• Documenter les dépendances entre pairs

3. Performances

• Gardez la taille du paquet à un minimum
• Mettre en œuvre des exportations respectueuses du Tree Shaking
• Évitez les dépendances d'exécution lorsque cela est possible

Édition

1. Mettre à jour la version dans package.json
2. Construire la bibliothèque : npm run build
3. Tester le build : npm pack
4. Publier : publication npm

Ajouter un exemple fonctionnel

Configurez une application vite pour fournir un exemple et tester les modifications de code dans le dépôt lui-même. Cela peut également être fait avec un livre d'histoires.

# 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

ajoutez votre package dans la section dépendances de l'exemple 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"]
}

Importez votre composant et testez-le dans l'exemple de projet.

Votre bibliothèque React est maintenant prête à être publiée ! ?

Si vous souhaitez vous lancer avec une configuration prête à l'emploi, consultez le modèle de démarrage complet ici : https://github.com/Abhirup-99/react-library-starter-template. Ce modèle comprend tout ce que nous avons couvert et est conçu pour vous aider à démarrer le développement de votre bibliothèque React avec une configuration minimale.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!