React Academy · Урок

Генераторы кода и автоматизация рабочей области

Пишите пользовательские генераторы Nx для единообразного создания компонентов, страниц и библиотек.

Урок 4 из 413 шагов

«Генераторы кода и автоматизация рабочей области» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое генераторы Nx?

Генераторы Nx — это инструменты генерации кода (например, схемы), которые создают начальную структуру файлов, обновляют конфигурации и поддерживают единообразие в монорепозитории. Запускайте встроенные генераторы или пишите собственные.

Запуск встроенных генераторов

Используйте nx generate с пакетом генератора и его именем. Добавьте --dry-run, чтобы предварительно просмотреть изменения без записи файлов.

# 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

Создание пользовательского генератора

Создайте пустой шаблон генератора внутри локального проекта плагина.

# 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

Структура генератора

Генератор состоит из schema.json (входные данные) и index.ts (логика, изменяющая файлы и рабочее пространство).

// 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 генератора

Функция генератора получает дерево (абстракцию файловой системы) и параметры. Используйте интерфейсы tree для чтения, записи и обновления файлов.

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
}

Файлы шаблонов

Поместите файлы шаблонов в папку files/ рядом с генератором. Используйте синтаксис EJS для динамического содержимого.

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

Обновление project.json

Генераторы могут изменять существующие файлы. Используйте updateProjectConfiguration, чтобы добавлять новые цели в проект.

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

Запуск собственного генератора

Запускайте пользовательские генераторы так же, как встроенные, указывая свой локальный плагин.

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

Миграции рабочего пространства

Nx предоставляет автоматические миграции при обновлении версии Nx. Запустите nx migrate latest, а затем nx migrate --run-migrations, чтобы применить их.

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

Автоматизация шаблонного кода

Создавайте пользовательские генераторы для шаблонов, специфичных для вашей команды: модулей функциональности со стандартной структурой папок, страниц CRUD, библиотек доступа к данным с предварительно настроенными хуками запросов и т. д.

Тестирование генераторов

Nx предоставляет тестовую оболочку для генераторов. Создайте минимальное дерево в тестах, чтобы проверять генерацию файлов, не затрагивая настоящую файловую систему.

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

Быстрая проверка

Каково назначение папки files/ в генераторе Nx?

Итоги

Генераторы Nx единообразно создают начальную структуру файлов через nx generate. Пишите пользовательские генераторы с помощью schema.json (входные данные) и index.ts (логика). Используйте папку files/ для шаблонов EJS. Проверяйте генераторы с помощью createTreeWithEmptyWorkspace, используя безопасную файловую систему в памяти.

Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
88
Уроки
324

Часто задаваемые вопросы

Урок «Генераторы кода и автоматизация рабочей области» бесплатный?

Да — полный текст урока «Генераторы кода и автоматизация рабочей области» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Генераторы кода и автоматизация рабочей области»?

Пишите пользовательские генераторы Nx для единообразного создания компонентов, страниц и библиотек. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Генераторы кода и автоматизация рабочей области»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание монорепозитория Nx с приложениями React
  2. Общие библиотеки и внутренние пакеты
  3. Команды Nx Affected и кэширование
  4. Генераторы кода и автоматизация рабочей области
← Назад к React Academy