0Pricing
React Academy · Aula

Geradores de código e automação do espaço de trabalho

Escreva geradores Nx personalizados para estruturar componentes, páginas e bibliotecas de forma consistente.

Geradores de código e automação do espaço de trabalho é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que são os geradores do Nx?

Os geradores do Nx são ferramentas de geração de código (como esquemas) que criam a estrutura inicial dos arquivos, atualizam configurações e mantêm a consistência em um monorrepositório. Execute geradores integrados ou escreva os seus próprios.

Executando geradores integrados

Use nx generate com um pacote e um nome de gerador. Adicione --dry-run para visualizar as alterações sem gravar arquivos.

# 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

Criando um gerador personalizado

Gere um modelo vazio de gerador dentro de um projeto 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

Estrutura de um gerador

Um gerador consiste em um schema.json (entradas) e um index.ts (lógica que modifica arquivos e o espaço de trabalho).

// 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 do gerador

A função do gerador recebe tree (uma abstração do sistema de arquivos) e as opções. Use as APIs de tree para ler, gravar e atualizar arquivos.

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
}

Arquivos de modelo

Coloque os arquivos de modelo em uma pasta files/ ao lado do gerador. Use a sintaxe EJS para inserir conteúdo dinâmico.

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

Atualizando project.json

Os geradores podem modificar arquivos existentes. Use updateProjectConfiguration para adicionar novos destinos a um projeto.

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

Executando seu gerador

Execute geradores personalizados da mesma forma que os integrados, fazendo referência ao seu plugin local.

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

Migrações do espaço de trabalho

O Nx fornece migrações automáticas quando você atualiza a versão do Nx. Execute nx migrate latest e depois nx migrate --run-migrations para aplicá-las.

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

Automatizando o código inicial

Crie geradores personalizados para padrões específicos da sua equipe: módulos de funcionalidades com uma estrutura de pastas padronizada, páginas CRUD, bibliotecas de acesso a dados com ganchos de consulta pré-configurados e assim por diante.

Testando geradores

O Nx fornece uma estrutura de testes para geradores. Crie uma árvore mínima nos testes para verificar a geração de arquivos sem alterar o sistema de arquivos real.

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ção rápida

Qual é a finalidade da pasta files/ em um gerador do Nx?

Recapitulação

Os geradores do Nx criam estruturas de arquivos de forma consistente por meio de nx generate. Escreva geradores personalizados com um schema.json (entradas) e um index.ts (lógica). Use a pasta files/ para os modelos EJS. Teste os geradores com createTreeWithEmptyWorkspace para obter um sistema de arquivos seguro em memória.

Perguntas Frequentes

A aula “Geradores de código e automação do espaço de trabalho” é grátis?

Sim — o texto completo de “Geradores de código e automação do espaço de trabalho” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Geradores de código e automação do espaço de trabalho”?

Escreva geradores Nx personalizados para estruturar componentes, páginas e bibliotecas de forma consistente. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Geradores de código e automação do espaço de trabalho”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Criando um monorepositório Nx com aplicativos React
  2. Bibliotecas compartilhadas e pacotes internos
  3. Comandos Nx Affected e armazenamento em cache
  4. Geradores de código e automação do espaço de trabalho
← Voltar para React Academy