0Pricing
React Academy · Lezione

Code generator e automazione del workspace

Scriva generatori Nx personalizzati per creare in modo coerente componenti, pagine e librerie.

Code generator e automazione del workspace è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cosa sono i generatori Nx?

I generatori Nx sono strumenti di generazione del codice, simili agli schematics, che creano la struttura dei file, aggiornano le configurazioni e mantengono la coerenza in tutto il monorepo. Può eseguire i generatori integrati o scriverne di propri.

Esecuzione dei generatori integrati

Utilizzi nx generate con il pacchetto e il nome di un generatore. Aggiunga --dry-run per visualizzare in anteprima le modifiche senza scrivere i file.

# 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

Creazione di un generatore personalizzato

Generi un modello vuoto di generatore all'interno di un progetto plugin locale.

# 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

Struttura di un generatore

Un generatore è composto da un schema.json (gli input) e un index.ts (la logica che modifica i file e il workspace).

// 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 del generatore

La funzione del generatore riceve l'albero (un'astrazione del file system) e le opzioni. Utilizzi le API di tree per leggere, scrivere e aggiornare i file.

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
}

File di modello

Inserisca i file di modello in una cartella files/ accanto al generatore. Utilizzi la sintassi EJS per i contenuti dinamici.

// 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';
}

Aggiornamento di project.json

I generatori possono modificare i file esistenti. Utilizzi updateProjectConfiguration per aggiungere nuovi target a un progetto.

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);

Esecuzione del proprio generatore

Esegua i generatori personalizzati nello stesso modo di quelli integrati, facendo riferimento al proprio plugin locale.

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

Migrazioni del workspace

Nx offre migrazioni automatiche quando aggiorna la versione di Nx. Esegua nx migrate latest e poi nx migrate --run-migrations per applicarle.

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

Automazione del boilerplate

Crei generatori personalizzati per i pattern specifici del team: moduli di funzionalità con una struttura di cartelle standard, pagine CRUD, librerie di accesso ai dati con hook di query preconfigurati e così via.

Test dei generatori

Nx offre un test harness per i generatori. Crei un albero minimo nei test per verificare la generazione dei file senza modificare il file system reale.

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);
});

Verifica rapida

Qual è lo scopo della cartella files/ in un generatore Nx?

Riepilogo

I generatori Nx creano in modo coerente la struttura dei file tramite nx generate. Scriva generatori personalizzati con un schema.json (gli input) e un index.ts (la logica). Utilizzi la cartella files/ per i modelli EJS. Testi i generatori con createTreeWithEmptyWorkspace per utilizzare in sicurezza un file system in memoria.

Domande Frequenti

La lezione «Code generator e automazione del workspace» è gratuita?

Sì — il testo completo di «Code generator e automazione del workspace» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Code generator e automazione del workspace»?

Scriva generatori Nx personalizzati per creare in modo coerente componenti, pagine e librerie. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Code generator e automazione del workspace»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Creazione di un monorepo Nx con app React
  2. Librerie condivise e package interni
  3. Comandi Nx Affected e caching
  4. Code generator e automazione del workspace
← Torna a React Academy