React Academy · Lektion

Kodgeneratorer och automatisering av workspaces

Skriv anpassade Nx-generatorer för att konsekvent skapa komponenter, sidor och bibliotek.

Lektion 4 av 413 steg

Kodgeneratorer och automatisering av workspaces är en gratis lektion i React Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Vad är Nx-generatorer?

Nx-generatorer är verktyg för kodgenerering, ungefär som schematics, som skapar en grundstruktur för filer, uppdaterar konfigurationer och upprätthåller enhetlighet i ett monorepo. Kör inbyggda generatorer eller skriv egna.

Köra inbyggda generatorer

Använd nx generate med ett generatorpaket och ett namn. Lägg till --dry-run för att förhandsgranska ändringarna utan att skriva några filer.

# 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

Skapa en anpassad generator

Generera en tom generatormall i ett lokalt pluginprojekt.

# 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

Generatorns struktur

En generator består av en schema.json (indata) och en index.ts (logik som ändrar filer och arbetsytan).

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

Generatorns Index.ts

Generatorfunktionen tar emot trädet (en abstraktion över filsystemet) och alternativen. Använd trädets API:er för att läsa, skriva och uppdatera filer.

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
}

Mallfiler

Placera mallfiler i en files/-mapp bredvid generatorn. Använd EJS-syntax för dynamiskt innehåll.

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

Uppdatera project.json

Generatorer kan ändra befintliga filer. Använd updateProjectConfiguration för att lägga till nya mål i ett projekt.

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

Köra din generator

Kör anpassade generatorer på samma sätt som inbyggda generatorer genom att ange ditt lokala plugin.

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

Migreringar av arbetsytan

Nx tillhandahåller automatiska migreringar när du uppdaterar Nx-versionen. Kör nx migrate latest och sedan nx migrate --run-migrations för att tillämpa dem.

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

Automatisera standardkod

Bygg anpassade generatorer för mönster som är specifika för ditt team: funktionsmoduler med standardiserad mappstruktur, CRUD-sidor, dataåtkomstbibliotek med förkonfigurerade query hooks med mera.

Testa generatorer

Nx tillhandahåller ett testharness för generatorer. Skapa ett minimalt träd i testerna för att verifiera filgenereringen utan att påverka det riktiga filsystemet.

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

Snabb kontroll

Vad används mappen files/ till i en Nx-generator?

Sammanfattning

Nx-generatorer skapar en enhetlig grundstruktur för filer via nx generate. Skriv anpassade generatorer med en schema.json (indata) och en index.ts (logik). Använd mappen files/ för EJS-mallar. Testa generatorer med createTreeWithEmptyWorkspace för ett säkert filsystem i minnet.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
88
Lektioner
324

Vanliga frågor

Är lektionen ”Kodgeneratorer och automatisering av workspaces” gratis?

Ja – hela texten till ”Kodgeneratorer och automatisering av workspaces” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Kodgeneratorer och automatisering av workspaces”?

Skriv anpassade Nx-generatorer för att konsekvent skapa komponenter, sidor och bibliotek. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Kodgeneratorer och automatisering av workspaces”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Skapa ett Nx-monorepo med React-appar
  2. Delade bibliotek och interna paket
  3. Nx Affected-kommandon och cachning
  4. Kodgeneratorer och automatisering av workspaces
← Tillbaka till React Academy