什么是Angular Schematics？如何在本地開發(fā)你的 Angular Schematics？下面本篇文章就來給大家詳細(xì)介紹一下，并通過一個(gè)例子來更好的熟悉，希望對大家有所幫助！

什么是Angular Schematics？

Angular Schematics 是基于模板(Template-based)的，Angular 特有的代碼生成器，當(dāng)然它不僅僅是生成代碼，也可以修改我們的代碼，它使得我們可以基于 Angular CLI 去實(shí)現(xiàn)我們自己的一些自動化操作?！鞠嚓P(guān)教程推薦：《angular教程》】

相信在平時(shí)開發(fā) Angular 項(xiàng)目的同時(shí)，大家都用過 ng generate component component-name, ng add @angular/materials, ng generate module module-name，這些都是 Angular 中已經(jīng)為我們實(shí)現(xiàn)的一些 CLI，那么我們應(yīng)該如何在自己的項(xiàng)目中去實(shí)現(xiàn)基于自己項(xiàng)目的 CLI 呢？本文將會基于我們在 ng-devui-admin 中的實(shí)踐來進(jìn)行介紹。歡迎大家持續(xù)的關(guān)注，后續(xù)我們將會推出更加豐富的 CLI 幫助大家更快搭建一個(gè) Admin 頁面。

如何在本地開發(fā)你的 Angular Schematics

在本地開發(fā)你需要先安裝 schematics 腳手架

npm install -g @angular-devkit/schematics-cli  # 安裝完成之后新建一個(gè)schematics項(xiàng)目 schematics blank --name=your-schematics

新建項(xiàng)目之后你會看到如下目錄結(jié)構(gòu)，代表你已經(jīng)成功創(chuàng)建一個(gè) shematics 項(xiàng)目。

重要文件介紹

• tsconfig.json： 主要與項(xiàng)目打包編譯相關(guān)，在這不做具體介紹

• collection.json：與你的 CLI 命令相關(guān)，用于定義你的相關(guān)命令

{   "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",   "schematics": {     "first-schematics": {       "description": "A blank schematic.",       "factory": "./first-schematics/index#firstSchematics"     }   } }

first-schematics: 命令的名字，可以在項(xiàng)目中通過 ng g first-schematics:first-schematics 來運(yùn)行該命令。description: 對該條命令的描述。factory: 命令執(zhí)行的入口函數(shù) 通常還會有另外一個(gè)屬性 schema，我們將在后面進(jìn)行講解。

• index.ts：在該文件中實(shí)現(xiàn)你命令的相關(guān)邏輯

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';  export function firstSchematics(_options: any): Rule {   return (tree: Tree, _context: SchematicContext) => {     return tree;   }; }

在這里我們先看幾個(gè)需要了解的參數(shù)：tree：在這里你可以將 tree 理解為我們整個(gè)的 angular 項(xiàng)目，你可以通過 tree 新增文件，修改文件，以及刪除文件。_context：該參數(shù)為 schematics 運(yùn)行的上下文，比如你可以通過 context 執(zhí)行 npm install。Rule：為我們制定的操作邏輯。

實(shí)現(xiàn)一個(gè) ng-add 指令

現(xiàn)在我們通過實(shí)現(xiàn)一個(gè) ng-add 指令來更好的熟悉。

同樣是基于以上我們已經(jīng)創(chuàng)建好的項(xiàng)目。

新建命令相關(guān)的文件

首先我們在 src 目錄下新建一個(gè)目錄 ng-add，然后在該目錄下添加三個(gè)文件 index.ts, schema.json, schema.ts，之后你的目錄結(jié)構(gòu)應(yīng)該如下：

配置 collection.json

之后我們在 collection.json 中配置該條命令：

{   "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",   "schematics": {     ...,     "ng-add": {       "factory": "./ng-add/index",       "description": "Some description about your schematics",       "schema": "./ng-add/schema.json"     }   } }

在 files 目錄中加入我們想要插入的文件

關(guān)于 template 的語法可以參考 ejs 語法

app.component.html.template

<div class="my-app">   <% if (defaultLanguage === 'zh-cn') { %>你好，Angular Schematics!<% } else { %>Hello, My First Angular Schematics!<% } %>   <h1>{{ title }}</h1> </div>

app.component.scss.template

.app {   display: flex;   justify-content: center;   align-item: center; }

app.component.ts.template

import { Component } from '@angular/core';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'] }) export class AppComponent {   title = <% if (defaultLanguage === 'zh-cn') { %>'你好'<% } else { %>'Hello'<% } %>; }

開始實(shí)現(xiàn)命令邏輯

• schema.json：在該文件中定義與用戶的交互

{   "$schema": "http://json-schema.org/schema",   "id": "SchematicsDevUI",   "title": "DevUI Options Schema",   "type": "object",   "properties": {     "defaultLanguage": {       "type": "string",       "description": "Choose the default language",       "default": "zh-cn",       "x-prompt": {         "message": "Please choose the default language you want to use: ",         "type": "list",         "items": [           {             "value": "zh-cn",             "label": "簡體中文 (zh-ch)"           },           {             "value": "en-us",             "label": "English (en-us)"           }         ]       }     },     "i18n": {       "type": "boolean",       "default": true,       "description": "Config i18n for the project",       "x-prompt": "Would you like to add i18n? (default: Y)"     }   },   "required": [] }

在以上的定義中，我們的命令將會接收兩個(gè)參數(shù)分別為 defaultLanguage，i18n，我們以 defaultLanguage 為例講解對參數(shù)的相關(guān)配置：

{   "defaultLanguage": {     "type": "string",     "description": "Choose the default language",     "default": "zh-cn",     "x-prompt": {       "message": "Please choose the default language you want to use: ",       "type": "list",       "items": [         {           "value": "zh-cn",           "label": "簡體中文 (zh-ch)"         },         {           "value": "en-us",           "label": "English (en-us)"         }       ]     }   } }

type 代表該參數(shù)的類型是 string。default 為該參數(shù)的默認(rèn)值為 zh-cn。x-prompt 定義與用戶的交互，message 為我們對用戶進(jìn)行的相關(guān)提問，在這里我們的 type 為 list 代表我們會為用戶提供 items 中列出的選項(xiàng)供用戶進(jìn)行選擇。

• schema.ts：在該文件中定義我們接收到的參數(shù)類型

export interface Schema {   defaultLanguage: string;   i18n: boolean; }

• index.ts：在該文件中實(shí)現(xiàn)我們的操作邏輯，假設(shè)在此次 ng-add 操作中，我們根據(jù)用戶輸入的 defaultLanguage, i18n 來對用戶的項(xiàng)目進(jìn)行相應(yīng)的更改，并且插入相關(guān)的 npm 包，再進(jìn)行安裝。

import {   apply,   applyTemplates,   chain,   mergeWith,   move,   Rule,   SchematicContext,   SchematicsException,   Tree,   url } from '@angular-devkit/schematics'; import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks'; import { Schema as AddOptions } from './schema';  let projectWorkspace: {   root: string;   sourceRoot: string;   defaultProject: string; };  export type packgeType = 'dependencies' | 'devDependencies' | 'scripts'; export const PACKAGES_I18N = [   '@devui-design/icons@^1.2.0',   '@ngx-translate/core@^13.0.0',   '@ngx-translate/http-loader@^6.0.0',   'ng-devui@^11.1.0' ]; export const PACKAGES = ['@devui-design/icons@^1.2.0', 'ng-devui@^11.1.0']; export const PACKAGE_JSON_PATH = 'package.json'; export const ANGULAR_JSON_PATH = 'angular.json';  export default function (options: AddOptions): Rule {   return (tree: Tree, context: SchematicContext) => {     // 獲取項(xiàng)目空間中我們需要的相關(guān)變量     getWorkSpace(tree);      // 根據(jù)是否選擇i18n插入不同的packages     const packages = options.i18n ? PACKAGES_I18N : PACKAGES;     addPackage(tree, packages, 'dependencies');      // 執(zhí)行 npm install     context.addTask(new NodePackageInstallTask());      // 自定義的一系列 Rules     return chain([removeOriginalFiles(), addSourceFiles(options)]);   }; }

下面時(shí)使用到的函數(shù)的具體實(shí)現(xiàn)：

// getWorkSpace function getWorkSpace(tree: Tree) {   let angularJSON;   let buffer = tree.read(ANGULAR_JSON_PATH);   if (buffer) {     angularJSON = JSON.parse(buffer.toString());   } else {     throw new SchematicsException(       'Please make sure the project is an Angular project.'     );   }    let defaultProject = angularJSON.defaultProject;   projectWorkspace = {     root: '/',     sourceRoot: angularJSON.projects[defaultProject].sourceRoot,     defaultProject   };    return projectWorkspace; }

// removeOriginalFiles // 根據(jù)自己的需要選擇需要?jiǎng)h除的文件 function removeOriginalFiles() {   return (tree: Tree) => {     [       `${projectWorkspace.sourceRoot}/app/app.component.ts`,       `${projectWorkspace.sourceRoot}/app/app.component.html`,       `${projectWorkspace.sourceRoot}/app/app.component.scss`,       `${projectWorkspace.sourceRoot}/app/app.component.css`     ]       .filter((f) => tree.exists(f))       .forEach((f) => tree.delete(f));   }; }

將 files 下的文件拷貝到指定的路徑下，關(guān)于 chain, mergeWith, apply, template 的詳細(xì)使用方法可以參考 Schematics

// addSourceFiles function addSourceFiles(options: AddOptions): Rule {   return chain([     mergeWith(       apply(url('./files'), [         applyTemplates({           defaultLanguage: options.defaultLanguage         }),         move(`${projectWorkspace.sourceRoot}/app`)       ])     )   ]); }

// readJson function readJson(tree: Tree, file: string, type?: string): any {   if (!tree.exists(file)) {     return null;   }    const sourceFile = tree.read(file)!.toString('utf-8');   try {     const json = JSON.parse(sourceFile);     if (type && !json[type]) {       json[type] = {};     }     return json;   } catch (error) {     console.log(`Failed when parsing file ${file}.`);     throw error;   } }  // writeJson export function writeJson(tree: Tree, file: string, source: any): void {   tree.overwrite(file, JSON.stringify(source, null, 2)); }  // readPackageJson function readPackageJson(tree: Tree, type?: string): any {   return readJson(tree, PACKAGE_JSON_PATH, type); }  // writePackageJson function writePackageJson(tree: Tree, json: any): any {   return writeJson(tree, PACKAGE_JSON_PATH, json); }  // addPackage function addPackage(   tree: Tree,   packages: string | string[],   type: packgeType = 'dependencies' ): Tree {   const packageJson = readPackageJson(tree, type);    if (packageJson == null) {     return tree;   }    if (!Array.isArray(packages)) {     packages = [packages];   }   packages.forEach((pck) => {     const splitPosition = pck.lastIndexOf('@');     packageJson[type][pck.substr(0, splitPosition)] = pck.substr(       splitPosition + 1     );   });    writePackageJson(tree, packageJson);   return tree; }

為了保持 index.ts 文件的簡潔，可以將相關(guān)操作的方法抽取到一個(gè)新的文件中進(jìn)行引用。

測試 ng-add

至此我們已經(jīng)完成了 ng-add 命令，現(xiàn)在我們對該命令進(jìn)行測試：

• ng new test 初始化一個(gè) Angular 項(xiàng)目
• cd test && mkdir libs 在項(xiàng)目中添加一個(gè) libs 文件夾，將圖中標(biāo)藍(lán)的文件拷貝到其中

• 之后在命令行中執(zhí)行 npm link libs/
• link 完成之后 cd libs && npm run build && cd ..
• 現(xiàn)在執(zhí)行 ng add first-schematics 之后會看到如下提示

• 最后我們通過 npm start 來查看執(zhí)行的結(jié)果如下

結(jié)語

綜上簡單介紹了一個(gè) Schematics 的實(shí)現(xiàn)，