0Pricing
React Academy · Leçon

Générateurs de code et automatisation de l’espace de travail

Écrivez des générateurs Nx personnalisés pour créer uniformément des composants, des pages et des bibliothèques.

Générateurs de code et automatisation de l’espace de travail est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Que sont les générateurs Nx ?

Les générateurs Nx sont des outils de génération de code (semblables aux schémas) qui créent la structure des fichiers, mettent à jour les configurations et assurent la cohérence dans un dépôt monolithique. Exécutez les générateurs intégrés ou écrivez les vôtres.

Exécuter les générateurs intégrés

Utilisez nx generate avec un paquet de générateur et un nom. Ajoutez --dry-run pour prévisualiser les modifications sans écrire de fichiers.

# Generate a React component in the ui library:
npx nx generate @nx/react:component Button --project=ui --dry-run

# Generate a hook:
npx nx generate @nx/react:hook useAuth --project=data-access

Créer un générateur personnalisé

Générez un modèle de générateur vierge dans un projet de plugin local.

# Create a local plugin:
npx nx generate @nx/plugin:plugin my-plugin --directory=tools/my-plugin

# Add a generator to it:
npx nx generate @nx/plugin:generator feature-module --project=my-plugin

Structure d’un générateur

Un générateur se compose d’un schema.json (les entrées) et d’un index.ts (la logique qui modifie les fichiers et l’espace de travail).

// tools/my-plugin/src/generators/feature-module/schema.json
{
  "$schema": "...",
  "title": "Feature Module Generator",
  "properties": {
    "name": { "type": "string", "description": "Feature name" },
    "directory": { "type": "string", "default": "libs" }
  },
  "required": ["name"]
}

Index.ts du générateur

La fonction du générateur reçoit l’arbre (une abstraction du système de fichiers) et les options. Utilisez les API de l’arbre pour lire, écrire et mettre à jour les fichiers.

import { Tree, formatFiles, generateFiles } from '@nx/devkit';
import * as path from 'path';

export default async function (tree: Tree, options: FeatureGeneratorSchema) {
  generateFiles(
    tree,
    path.join(__dirname, 'files'), // template folder
    `libs/${options.name}`,       // output path
    { ...options, tmpl: '' }       // template variables
  );
  await formatFiles(tree); // run prettier on generated files
}

Fichiers modèles

Placez les fichiers modèles dans un dossier files/ à côté du générateur. Utilisez la syntaxe EJS pour le contenu dynamique.

// tools/my-plugin/src/generators/feature-module/files/src/index.ts__tmpl__
export * from './lib/<%= name %>';

// files/src/lib/__name@dasherize__.ts__tmpl__
export function <%= name %>() {
  return '<%= name %> feature';
}

Mettre à jour project.json

Les générateurs peuvent modifier des fichiers existants. Utilisez updateProjectConfiguration pour ajouter de nouvelles cibles à un projet.

import { updateProjectConfiguration, readProjectConfiguration } from '@nx/devkit';

const config = readProjectConfiguration(tree, options.project);
config.targets.storybook = {
  executor: '@storybook/nx:build-storybook',
  options: { outputDir: 'dist/storybook' },
};
updateProjectConfiguration(tree, options.project, config);

Exécuter votre générateur

Exécutez les générateurs personnalisés de la même manière que les générateurs intégrés, en faisant référence à votre plugin local.

npx nx generate my-plugin:feature-module my-feature --dry-run
npx nx generate my-plugin:feature-module my-feature

Migrations de l’espace de travail

Nx fournit des migrations automatiques lorsque vous mettez à jour la version de Nx. Exécutez nx migrate latest, puis nx migrate --run-migrations pour les appliquer.

npx nx migrate latest
# Review migrations.json
npx nx migrate --run-migrations

Automatiser le code passe-partout

Créez des générateurs personnalisés pour les modèles propres à votre équipe : modules de fonctionnalités avec une structure de dossiers standard, pages CRUD, bibliothèques d’accès aux données avec des hooks de requête préconfigurés, etc.

Tester les générateurs

Nx fournit un environnement de test pour les générateurs. Créez un arbre minimal dans les tests afin de vérifier la génération des fichiers sans toucher au véritable système de fichiers.

import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';

test('generates feature module', async () => {
  const tree = createTreeWithEmptyWorkspace();
  await generator(tree, { name: 'products' });
  expect(tree.exists('libs/products/src/index.ts')).toBe(true);
});

Vérification rapide

Quel est le rôle du dossier files/ dans un générateur Nx ?

Récapitulatif

Les générateurs Nx créent une structure de fichiers cohérente avec nx generate. Écrivez des générateurs personnalisés avec un schema.json (les entrées) et un index.ts (la logique). Utilisez le dossier files/ pour les modèles EJS. Testez les générateurs avec createTreeWithEmptyWorkspace afin de disposer d’un système de fichiers en mémoire sûr.

Questions Fréquemment Posées

La leçon « Générateurs de code et automatisation de l’espace de travail » est-elle gratuite ?

Oui — le texte complet de « Générateurs de code et automatisation de l’espace de travail » 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 « Générateurs de code et automatisation de l’espace de travail » ?

Écrivez des générateurs Nx personnalisés pour créer uniformément des composants, des pages et des bibliothèques. 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 4 sur 4.

Combien de temps prend la leçon « Générateurs de code et automatisation de l’espace de travail » ?

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