React Academy · 课时

代码生成器与工作区自动化

Q: 「代码生成器与工作区自动化」这节课中我会学到什么？

编写自定义 Nx 生成器，以一致地搭建组件、页面和库。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写自定义 Nx 生成器，以一致地搭建组件、页面和库。

代码生成器与工作区自动化 是 CoddyKit 上的免费 React Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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（文件系统抽象）和选项。使用 tree API 读取、写入和更新文件。

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

自动化样板代码

针对团队特有的模式构建自定义生成器：具有标准文件夹结构的功能模块、增删改查页面、预配置查询钩子的数据访问库等。

测试生成器

Nx 为生成器提供测试工具。请在测试中创建一个最小 tree，以便在不接触真实文件系统的情况下验证文件生成。

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

快速检查

Nx 生成器中的 files/ 文件夹有什么作用？

回顾

Nx 通过 nx generate 以一致的方式搭建文件结构。使用 schema.json（输入）和 index.ts（逻辑）编写自定义生成器。使用 files/ 文件夹存放 EJS 模板。使用 createTreeWithEmptyWorkspace 测试生成器，以获得安全的内存文件系统。

常见问题解答

「代码生成器与工作区自动化」课时是免费的吗？

是的 — 「代码生成器与工作区自动化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「代码生成器与工作区自动化」这节课中我会学到什么？

编写自定义 Nx 生成器，以一致地搭建组件、页面和库。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「代码生成器与工作区自动化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy