站長(zhǎng)資訊網(wǎng)什么是Angular Schematics？如何在本地開(kāi)發(fā)你的 Angular Schematics？下面本篇文章就來(lái)給大家詳細(xì)介紹一下，并通過(guò)一個(gè)例子來(lái)更好的熟悉，希望對(duì)大家有所幫助！
什么是Angular Schematics？
Angular Schematics 是基于模板(Template-based)的，Angular 特有的代碼生成器，當(dāng)然它不僅僅是生成代碼，也可以修改我們的代碼，它使得我們可以基于 Angular CLI 去實(shí)現(xiàn)我們自己的一些自動(dòng)化操作。【相關(guān)教程推薦：《angular教程》】
相信在平時(shí)開(kāi)發(fā) Angular 項(xiàng)目的同時(shí)，大家都用過(guò) 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 呢？本文將會(huì)基于我們?cè)?ng-devui-admin 中的實(shí)踐來(lái)進(jìn)行介紹。歡迎大家持續(xù)的關(guān)注，后續(xù)我們將會(huì)推出更加豐富的 CLI 幫助大家更快搭建一個(gè) Admin 頁(yè)面。
如何在本地開(kāi)發(fā)你的 Angular Schematics
在本地開(kāi)發(fā)你需要先安裝 schematics 腳手架
npm install -g @angular-devkit/schematics-cli # 安裝完成之后新建一個(gè)schematics項(xiàng)目 schematics blank --name=your-schematics
新建項(xiàng)目之后你會(huì)看到如下目錄結(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)目中通過(guò) ng g first-schematics:first-schematics 來(lái)運(yùn)行該命令。description: 對(duì)該條命令的描述。factory: 命令執(zhí)行的入口函數(shù) 通常還會(huì)有另外一個(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)目，你可以通過(guò) tree 新增文件，修改文件，以及刪除文件。_context：該參數(shù)為 schematics 運(yùn)行的上下文，比如你可以通過(guò) context 執(zhí)行 npm install。Rule：為我們制定的操作邏輯。
實(shí)現(xiàn)一個(gè) ng-add 指令
現(xiàn)在我們通過(guò)實(shí)現(xiàn)一個(gè) ng-add 指令來(lái)更好的熟悉。
同樣是基于以上我們已經(jīng)創(chuàng)建好的項(xiàng)目。
新建命令相關(guān)的文件
首先我們?cè)?src 目錄下新建一個(gè)目錄 ng-add，然后在該目錄下添加三個(gè)文件 index.ts, schema.json, schema.ts，之后你的目錄結(jié)構(gòu)應(yīng)該如下：
配置 collection.json
之后我們?cè)?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 的語(yǔ)法可以參考 ejs 語(yǔ)法
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'<% } %>; }
開(kāi)始實(shí)現(xiàn)命令邏輯
schema.json：在該文件中定義與用戶(hù)的交互
{ "$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": "簡(jiǎn)體中文 (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": [] }
在以上的定義中，我們的命令將會(huì)接收兩個(gè)參數(shù)分別為 defaultLanguage，i18n，我們以 defaultLanguage 為例講解對(duì)參數(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": "簡(jiǎn)體中文 (zh-ch)" }, { "value": "en-us", "label": "English (en-us)" } ] } } }
type 代表該參數(shù)的類(lèi)型是 string。default 為該參數(shù)的默認(rèn)值為 zh-cn。x-prompt 定義與用戶(hù)的交互，message 為我們對(duì)用戶(hù)進(jìn)行的相關(guān)提問(wèn)，在這里我們的 type 為 list 代表我們會(huì)為用戶(hù)提供 items 中列出的選項(xiàng)供用戶(hù)進(jìn)行選擇。
schema.ts：在該文件中定義我們接收到的參數(shù)類(lèi)型
export interface Schema { defaultLanguage: string; i18n: boolean; }
index.ts：在該文件中實(shí)現(xiàn)我們的操作邏輯，假設(shè)在此次ng-add操作中，我們根據(jù)用戶(hù)輸入的defaultLanguage,i18n來(lái)對(duì)用戶(hù)的項(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 文件的簡(jiǎn)潔，可以將相關(guān)操作的方法抽取到一個(gè)新的文件中進(jìn)行引用。
測(cè)試 ng-add
至此我們已經(jīng)完成了 ng-add 命令，現(xiàn)在我們對(duì)該命令進(jìn)行測(cè)試：
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之后會(huì)看到如下提示
- 最后我們通過(guò)
npm start來(lái)查看執(zhí)行的結(jié)果如下
結(jié)語(yǔ)
綜上簡(jiǎn)單介紹了一個(gè) Schematics 的實(shí)現(xiàn)，
