Kodgeneratorer och automatisering av workspaces
Skriv anpassade Nx-generatorer för att konsekvent skapa komponenter, sidor och bibliotek.
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-accessSkapa 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-pluginGeneratorns 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-featureMigreringar 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-migrationsAutomatisera 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.
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
- Skapa ett Nx-monorepo med React-appar
- Delade bibliotek och interna paket
- Nx Affected-kommandon och cachning
- Kodgeneratorer och automatisering av workspaces