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
.