Angular Schematics 实战 - 项目根目录新建一个文件

Angular Schematics 是一个由 Angular 团队提供的工作流工具，用于在 Angular 应用程序中自动化开发过程。Schematics 可以创建一个新的 Angular 应用，生成简单或复杂的代码片段，或者修改现有代码以添加新功能或行为。它提供了一个可扩展的方法，允许开发者以一种可维护的方式定制或扩展他们的开发工作流。

例如，当你在 Angular CLI 中运行 ng new 命令以创建一个新的 Angular 应用程序时，实际上是使用了 Schematics。Angular CLI 使用 Schematics 来生成应用程序的基础结构和必需的文件。同样，当你使用 ng generate component 命令创建新组件时，也是使用了 Schematics。

Schematics 的工作原理

Schematics 是基于文件树的转换。它从一个原始的文件树开始（这可能是当前的项目文件系统或空的文件系统），应用一系列的转换（也就是 Schematics），并产生一个新的文件树。这个新的文件树可以用来更新实际的文件系统，也可以与原始的文件树进行比较以查看应用了 Schematics 后的变化。

每个 Schematic 都是一个函数，它接受一个 Tree 和一个 options 对象作为输入，并返回一个新的 Tree。Tree 是一个虚拟文件系统，用于表示项目的文件和目录。options 对象包含了应用 Schematic 时的配置选项。Schematic 可以在 Tree 上进行各种操作，如创建、更新和删除文件。

创建自定义 Schematics

虽然 Angular CLI 提供了许多内置的 Schematics，但有时你可能需要创建自己的 Schematics 来满足特定的需求。例如，你可能需要一个 Schematic 来生成符合你的公司编码标准的特定类型的组件。

为了创建自定义 Schematics，你需要安装 @angular-devkit/schematics-cli。然后，你可以使用 schematics 命令创建一个新的 Schematics 集合：

schematics blank --name=my-schematics

这将创建一个名为 my-schematics 的新目录，其中包含一个基本的 Schematics 集合结构。在 my-schematics 目录中，有一个 src 目录，其中包含一个名为 my-schematics 的 Schematic。这个 Schematic 是空的，不做任何操作。

你可以修改 my-schematics Schematic 以执行你想要的操作。

首先，你需要安装和设置 Angular Schematics。你可以使用 npm（Node 包管理器）来安装它。在你的命令行中输入以下命令：

npm install -g @angular-devkit/schematics-cli

接下来，你需要创建一个新的 schematic 项目。在你的命令行中输入以下命令：

schematics blank --name=my-schematics

这将创建一个名为 my-schematics 的新项目。你可以将 my-schematics 替换为你想要的项目名称。这个新的项目将包含一个名为 my-schematics 的文件夹，该文件夹中包含了一些基本的 schematic 文件和配置。

你的新 schematic 项目应该如下所示：

my-schematics/
├── src/
│   └── my-schematics/
│       ├── files/
│       │   └── __name@dasherize@if-flat__
│       │       └── __name@dasherize__.component.ts.template
│       ├── index.ts
│       ├── schema.json
│       └── schema.ts
├── .gitignore
├── README.md
├── package.json
└── tsconfig.json

然后，你需要在 my-schematics 文件夹中创建一个新的 schematic。在这个例子中，我们将创建一个名为 create-file 的 schematic。在你的命令行中输入以下命令：

cd my-schematics
schematics schematic --name=create-file

这将创建一个新的 create-file 文件夹，该文件夹中包含了一个 index.ts 文件和一个 schema.json 文件。你的 create-file 文件夹应该如下所示：

create-file/
├── index.ts
└── schema.json

接下来，我们将在 create-file 文件夹中创建一个名为 hello.txt 的文件。在 index.ts 文件中，你需要导入 @angular-devkit/schematics 并创建一个新的 Rule。

一个 Rule 是一个接收一个 Tree 并返回一个新的 Tree 的函数。Tree 是你的项目的抽象表示，你可以用它来创建，删除和修改文件。

以下是你如何在 index.ts 文件中创建一个新的 Rule：

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function createFile(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('/hello.txt', 'Hello, World!');
    return tree;
  };
}

在这个 Rule 中，我们使用 tree.create 方法来创建一个新的文件。这个文件的路径是 /hello.txt，它的内容是 Hello World.