Генераторы кода и автоматизация рабочей области
Пишите пользовательские генераторы Nx для единообразного создания компонентов, страниц и библиотек.
«Генераторы кода и автоматизация рабочей области» — бесплатный урок 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 — локальная установка не требуется.
Все уроки этого курса
- Создание монорепозитория Nx с приложениями React
- Общие библиотеки и внутренние пакеты
- Команды Nx Affected и кэширование
- Генераторы кода и автоматизация рабочей области