Angular Schematics 是一个由 Angular 团队提供的工作流工具,用于在 Angular 应用程序中自动化开发过程。Schematics 可以创建一个新的 Angular 应用,生成简单或复杂的代码片段,或者修改现有代码以添加新功能或行为。它提供了一个可扩展的方法,允许开发者以一种可维护的方式定制或扩展他们的开发工作流。
例如,当你在 Angular CLI 中运行 ng new
命令以创建一个新的 Angular 应用程序时,实际上是使用了 Schematics。Angular CLI 使用 Schematics 来生成应用程序的基础结构和必需的文件。同样,当你使用 ng generate component
命令创建新组件时,也是使用了 Schematics。
Schematics 是基于文件树的转换。它从一个原始的文件树开始(这可能是当前的项目文件系统或空的文件系统),应用一系列的转换(也就是 Schematics),并产生一个新的文件树。这个新的文件树可以用来更新实际的文件系统,也可以与原始的文件树进行比较以查看应用了 Schematics 后的变化。
每个 Schematic 都是一个函数,它接受一个 Tree
和一个 options
对象作为输入,并返回一个新的 Tree
。Tree
是一个虚拟文件系统,用于表示项目的文件和目录。options
对象包含了应用 Schematic 时的配置选项。Schematic 可以在 Tree
上进行各种操作,如创建、更新和删除文件。
虽然 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
.
联系客服