0Pricing
React Academy · Leçon

Bibliothèques partagées et paquets internes

Créez des bibliothèques d’interface et d’utilitaires partagées, puis importez-les dans les applications avec les alias de chemins TypeScript.

Bibliothèques partagées et paquets internes est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi utiliser des bibliothèques partagées ?

Au lieu de dupliquer les composants, les hooks et les utilitaires dans plusieurs applications, extrayez-les dans des projets de bibliothèques partagées utilisables par n’importe quelle application du dépôt monolithique.

Générer une bibliothèque

Utilisez les générateurs Nx pour créer des projets de bibliothèques typés et compilables.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

API publique de la bibliothèque

Exportez tout depuis un seul index.ts (l’API publique). Les consommateurs doivent importer uniquement depuis @myorg/ui, et non depuis des chemins internes profonds.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Types de bibliothèques : publiables ou compilables

Les bibliothèques compilables sont compilées progressivement pour accélérer les compilations du dépôt monolithique. Les bibliothèques publiables génèrent également un paquet compatible avec npm pour être utilisé à l’extérieur du projet.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Appliquer les limites entre les modules

Utilisez la règle ESLint @nx/enforce-module-boundaries pour empêcher les dépendances circulaires et limiter les projets pouvant s’importer les uns les autres.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Storybook pour les bibliothèques partagées

Exécutez Storybook avec la bibliothèque d’interface utilisateur afin de documenter les composants de manière isolée, indépendamment de toute application.

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Tester les bibliothèques

Chaque bibliothèque possède sa propre cible de test. Exécutez les tests de la bibliothèque et de toutes les applications concernées lorsque la bibliothèque est modifiée.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Gestion des versions dans les dépôts monolithiques

Dans un dépôt monolithique, tous les paquets partagent un seul package.json et une seule version. Pour les bibliothèques publiables, utilisez des outils comme @jscutlery/semver ou Changesets pour gérer les versions indépendamment.

Migrer du code existant vers des bibliothèques

Déplacez progressivement le code partagé vers une bibliothèque : créez la bibliothèque, déplacez les fichiers, mettez à jour les imports, puis laissez les alias de chemins TypeScript s’occuper du reste.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Documentation avec Compodoc ou Storybook Docs

Utilisez la balise autodocs de Storybook ou Compodoc pour générer la documentation de l’API à partir des types TypeScript et des commentaires JSDoc dans les fichiers de la bibliothèque.

Vérification rapide

Quel doit être le point d’entrée unique pour les consommateurs qui importent une bibliothèque Nx partagée ?

Récapitulatif

Générez des bibliothèques avec nx generate, exportez tout depuis un seul index.ts et appliquez les limites entre les modules avec des règles ESLint. Utilisez des bibliothèques compilables pour accélérer les compilations progressives, et des bibliothèques publiables lorsque vous devez publier sur npm. Exécutez Storybook avec les bibliothèques d’interface utilisateur pour obtenir une documentation isolée.

Questions Fréquemment Posées

La leçon « Bibliothèques partagées et paquets internes » est-elle gratuite ?

Oui — le texte complet de « Bibliothèques partagées et paquets internes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Bibliothèques partagées et paquets internes » ?

Créez des bibliothèques d’interface et d’utilitaires partagées, puis importez-les dans les applications avec les alias de chemins TypeScript. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Bibliothèques partagées et paquets internes » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Créer un monorepo Nx avec des applications React
  2. Bibliothèques partagées et paquets internes
  3. Commandes Nx Affected et mise en cache
  4. Générateurs de code et automatisation de l’espace de travail
← Retour à React Academy