如何創建自定義的Angular Schematics

這篇文章主要介紹如何創建自定義的Angular Schematics，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

本文對 Angular Schematics 進行了介紹，并創建了一個用于創建自定義 Component 的 Schematics ，然后在 Angular 項目中以它為模板演練了通過 Schematics 添加自定義的 Component 。

1. 什么是 Schematics?

 簡單來說，Schematics 是一個項目處理工具，可以幫助我們對 Angular 項目中的內容進行成批的處理。

比如我們在是使用 Angular CLI 的時候，可能使用過諸如 ng g c myComponent 之類的命令來幫助我們創建一個新 Component ，這個命令將各種工作成批完成，添加 Component 代碼文件、模板文件、樣式文件、添加到 Module 中等等。

現在，我們也可以自己來創建自定義的 Schematics 。在下面的介紹中，我們將創建一個自定義的 Schematics，實現這個類似的功能，我們還提供了命令選項的支持。

對于 Schematics 的介紹，請參考：Schematics?—?An Introduction

2. 演練創建 Schematics

首先您需要安裝  Schematics 的命令行工具。

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

然后，就可以使用這個工具來創建您的第一個 Schematics 了，我們將它命名為 my-first-schema。

schematics blank --name=my-first-schema

這會創建名為 my-frist-schema 的文件夾，在其中已經創建了多個文件，如下所示。

我們使用 blank 為我們后繼的工作打好基礎。

 然后，我們定義自己的 Schematics 。

需要將 src 文件夾中的 collection.json 修改成如下內容：

{
 "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
 "schematics": {
 "my-first-schema": {
  "aliases": ["mfs"],
  "factory": "./my-first-schema",
  "description": "my first schematic.",
  "schema": "./my-first-schema/schema.json"
 }
 }
}

$schema => 定義該 collection 架構的 url 地址.

schematics => 這是你的  schematics 定義.

my-first-schema => 以后使用這個  schematics 的 cli 名稱.

aliases => 別名.

factory => 定義代碼.

Description => 簡單的說明.

Schema => 你的 schema 的設置. 這個文件的內容應該如下所示。我們在其中定義了多個自定義的選項，在使用這個 Schematics 的時候，可以通過這些選項來設置生成的內容。

{
 "$schema": "http://json-schema.org/schema",
 "id": "my-first-schema",
 "title": "my1er Schema",
 "type": "object",
 "properties": {
  "name": {
  "type": "string",
  "default": "name"
  },
  "path": {
  "type": "string",
  "default": "app"
  },
  "appRoot": {
  "type": "string"
  },
  "sourceDir": {
  "type": "string",
  "default": "src/app"
  },
  "service": {
  "type": "boolean",
  "default": false,
  "description": "Flag to indicate whether service should be generated.",
  "alias": "vgs"
  }
 }
}

這里可以設置你的 schematics 的命令選項，類似于在使用 g 來創建一個新的組件的時候，您可以使用一個 --change-detection 的選項。

ng g c component-name --change-detection

您還需要為您的選項創建一個接口 schema.ts。

export interface schemaOptions {
 name: string;
 appRoot: string;
 path: string;
 sourceDir: string;
 service: boolean;
}

下面才是我們的核心內容 index.ts 。這里定義我們 schematics 的邏輯實現。

import { chain, mergeWith } from '@angular-devkit/schematics';
import { apply, filter, move, Rule, template, url, branchAndMerge } from '@angular-devkit/schematics';
import { normalize } from '@angular-devkit/core';
import { dasherize, classify} from "@angular-devkit/core/src/utils/strings";
import { schemaOptions } from './schema';

const stringUtils = {dasherize, classify};

function filterTemplates(options: schemaOptions): Rule {
 if (!options.service) {
 return filter(path => !path.match(/\.service\.ts$/) && !path.match(/-item\.ts$/) && !path.match(/\.bak$/));
 }
 return filter(path => !path.match(/\.bak$/));
}

export default function (options: schemaOptions): Rule {
 // TODO: Validate options and throw SchematicsException if validation fails
 options.path = options.path ? normalize(options.path) : options.path;
 
 const templateSource = apply(url('./files'), [
  filterTemplates(options),
  template({
   ...stringUtils,
   ...options
  }),
  move('src/app/my-schema')
  ]);
  
  return chain([
  branchAndMerge(chain([
   mergeWith(templateSource)
  ])),
  ]);

}

Classify is for a little magic in the templates for the schematics.

filterTemplates is a filter for use or add more files.

option.path it's very important you use this option for create the folders and files in the angular app.

templateSource use the cli options and “build” the files into “./files” for create you final template (with the cli options changes)

在 my-first-schema 文件夾中，創建名為 files 的文件夾，添加三個文件：

my-first-schema.component.ts

import { Component, Input, } from '@angular/core';

@Component({
 selector: 'my-first-schema-component',
 templateUrl: './my-first-schema.component.html',
 styleUrls: [ './my-first-schema.component.css' ]
})

export class MyFirstSchemaComponent {

 constructor(){
 console.log( '<%= classify(name) %>' );
 }

}

這是一個模板文件，其中可以看到 <%= classify(name) %> 的內容。當你在使用這個 schematics 的時候，classify 將用來獲取 options 中的 name 的值。

my-first-schema.component.html

<% if (service) { %>
 <h2>Hola Service</h2>
<% } %>

<% if (!service) { %>
 <h2>Hola no Service</h2>
<% } %>

這里的 service 同樣來自 options，我們定義了一個 Boolean 類型的選項。

my-first-schema.component.css，這個文件目前保持為空即可。

回到控制臺，在你的項目文件夾中執行 build 命令：npm run build

 定義已經完成。

3. 在 Angular 項目中使用這個 Schematics

下面，我們在其它文件夾中，創建一個新的 Angular 項目，以便使用剛剛創建的這個 Schematics。

ng new test-schematics

進入到這個項目中，使用我們新創建的 schematics。

在其 node-modules 文件夾中創建名為 mfs 的模塊文件夾，我們還沒有將新創建的 Schematics 上傳到 Npm 中，這里我們手工將其復制到新建的 Angular 項目中。

將您前面創建的 schematics 項目中所有的文件（除了 node_modules 文件夾和 package-lock.json 文件之外），復制到這個 mfs 文件夾中，以便使用。

現在，我們可以使用前面創建的這個 schematics 了。

ng g my-first-schema mfs? —?service ?—?name=”Mfs” ?—?collection mfs

這里設置了 name 和 service 的值。

你應該看到如下的輸出：

PS test-schematics> ng g my-first-schema mfs --service --name="Mfs" --collection mfs
  create src/app/my-schema/my-first-schema.component.css (0 bytes)
  create src/app/my-schema/my-first-schema.component.html (33 bytes)
  create src/app/my-schema/my-first-schema.component.ts (320 bytes)
PS test-schematics>

在剛才新建的 Angular 項目 src/app 文件夾中，已經新建了一個名為 my-first-schema 的文件夾，其中包含了三個文件。

打開 my-first-schema.component.ts 文件，可以看到替換之后的內容

import { Component, Input, } from '@angular/core';

@Component({
 selector: 'my-first-schema-component',
 templateUrl: './my-first-schema.component.html',
 styleUrls: [ './my-first-schema.component.css' ]
})

export class MyFirstSchemaComponent {

 constructor(){
 console.log( 'Mfs' );
 }

}

而在 my-first-schema.component.html 中，可以看到 --service 的影響。

<h2>Hola Service</h2>

以上是“如何創建自定義的Angular Schematics”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！