本文小编为大家详细介绍“如何在本地开发Angular Schematics”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何在本地开发Angular Schematics”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

Angular Schematics 是基于模板(Template-based)的，Angular 特有的代码生成器，当然它不仅仅是生成代码，也可以修改我们的代码，它使得我们可以基于 Angular CLI 去实现我们自己的一些自动化操作。

相信在平时开发 Angular 项目的同时，大家都用过 ng generate component component-name, ng add @angular/materials, ng generate module module-name，这些都是 Angular 中已经为我们实现的一些 CLI。

在本地开发你需要先安装 schematics 脚手架

npminstall-g@angular-devkit/schematics-cli#安装完成之后新建一个schematics项目schematicsblank--name=your-schematics

新建项目之后你会看到如下目录结构，代表你已经成功创建一个 shematics 项目。

tsconfig.json： 主要与项目打包编译相关，在这不做具体介绍

collection.json：与你的 CLI 命令相关，用于定义你的相关命令

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

first-schematics: 命令的名字，可以在项目中通过 ng g first-schematics:first-schematics 来运行该命令。description: 对该条命令的描述。factory: 命令执行的入口函数通常还会有另外一个属性 schema，我们将在后面进行讲解。

index.ts：在该文件中实现你命令的相关逻辑

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

在这里我们先看几个需要了解的参数：tree：在这里你可以将 tree 理解为我们整个的 angular 项目，你可以通过 tree 新增文件，修改文件，以及删除文件。_context：该参数为 schematics 运行的上下文，比如你可以通过 context 执行 npm install。Rule：为我们制定的操作逻辑。

现在我们通过实现一个 ng-add 指令来更好的熟悉。

同样是基于以上我们已经创建好的项目。

新建命令相关的文件

首先我们在 src 目录下新建一个目录 ng-add，然后在该目录下添加三个文件 index.ts, schema.json, schema.ts，之后你的目录结构应该如下：

配置 collection.json

之后我们在 collection.json 中配置该条命令：

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

在 files 目录中加入我们想要插入的文件

关于 template 的语法可以参考 ejs 语法

app.component.html.template

<divclass="my-app"><%if(defaultLanguage==='zh-cn'){%>你好，AngularSchematics!<%}else{%>Hello,MyFirstAngularSchematics!<%}%><h2>{{title}}</h2></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']})exportclassAppComponent{title=<%if(defaultLanguage==='zh-cn'){%>'你好'<%}else{%>'Hello'<%}%>;}

开始实现命令逻辑

schema.json：在该文件中定义与用户的交互

{"$schema":"http://json-schema.org/schema","id":"SchematicsDevUI","title":"DevUIOptionsSchema","type":"object","properties":{"defaultLanguage":{"type":"string","description":"Choosethedefaultlanguage","default":"zh-cn","x-prompt":{"message":"Pleasechoosethedefaultlanguageyouwanttouse:","type":"list","items":[{"value":"zh-cn","label":"简体中文(zh-ch)"},{"value":"en-us","label":"English(en-us)"}]}},"i18n":{"type":"boolean","default":true,"description":"Configi18nfortheproject","x-prompt":"Wouldyouliketoaddi18n?(default:Y)"}},"required":[]}

在以上的定义中，我们的命令将会接收两个参数分别为 defaultLanguage，i18n，我们以 defaultLanguage 为例讲解对参数的相关配置：

{"defaultLanguage":{"type":"string","description":"Choosethedefaultlanguage","default":"zh-cn","x-prompt":{"message":"Pleasechoosethedefaultlanguageyouwanttouse:","type":"list","items":[{"value":"zh-cn","label":"简体中文(zh-ch)"},{"value":"en-us","label":"English(en-us)"}]}}}

type 代表该参数的类型是 string。default 为该参数的默认值为 zh-cn。x-prompt 定义与用户的交互，message 为我们对用户进行的相关提问，在这里我们的 type 为 list 代表我们会为用户提供 items 中列出的选项供用户进行选择。

schema.ts：在该文件中定义我们接收到的参数类型

exportinterfaceSchema{defaultLanguage:string;i18n:boolean;}

index.ts：在该文件中实现我们的操作逻辑，假设在此次 ng-add 操作中，我们根据用户输入的 defaultLanguage, i18n 来对用户的项目进行相应的更改，并且插入相关的 npm 包，再进行安装。

import{apply,applyTemplates,chain,mergeWith,move,Rule,SchematicContext,SchematicsException,Tree,url}from'@angular-devkit/schematics';import{NodePackageInstallTask}from'@angular-devkit/schematics/tasks';import{SchemaasAddOptions}from'./schema';letprojectWorkspace:{root:string;sourceRoot:string;defaultProject:string;};exporttypepackgeType='dependencies'|'devDependencies'|'scripts';exportconstPACKAGES_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'];exportconstPACKAGES=['@devui-design/icons@^1.2.0','ng-devui@^11.1.0'];exportconstPACKAGE_JSON_PATH='package.json';exportconstANGULAR_JSON_PATH='angular.json';exportdefaultfunction(options:AddOptions):Rule{return(tree:Tree,context:SchematicContext)=>{//获取项目空间中我们需要的相关变量getWorkSpace(tree);//根据是否选择i18n插入不同的packagesconstpackages=options.i18n?PACKAGES_I18N:PACKAGES;addPackage(tree,packages,'dependencies');//执行npminstallcontext.addTask(newNodePackageInstallTask());//自定义的一系列Rulesreturnchain([removeOriginalFiles(),addSourceFiles(options)]);};}

下面时使用到的函数的具体实现：

//getWorkSpacefunctiongetWorkSpace(tree:Tree){letangularJSON;letbuffer=tree.read(ANGULAR_JSON_PATH);if(buffer){angularJSON=JSON.parse(buffer.toString());}else{thrownewSchematicsException('PleasemakesuretheprojectisanAngularproject.');}letdefaultProject=angularJSON.defaultProject;projectWorkspace={root:'/',sourceRoot:angularJSON.projects[defaultProject].sourceRoot,defaultProject};returnprojectWorkspace;}

//removeOriginalFiles//根据自己的需要选择需要删除的文件functionremoveOriginalFiles(){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 下的文件拷贝到指定的路径下，关于 chain, mergeWith, apply, template 的详细使用方法可以参考 Schematics

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

//readJsonfunctionreadJson(tree:Tree,file:string,type?:string):any{if(!tree.exists(file)){returnnull;}constsourceFile=tree.read(file)!.toString('utf-8');try{constjson=JSON.parse(sourceFile);if(type&&!json[type]){json[type]={};}returnjson;}catch(error){console.log(`Failedwhenparsingfile${file}.`);throwerror;}}//writeJsonexportfunctionwriteJson(tree:Tree,file:string,source:any):void{tree.overwrite(file,JSON.stringify(source,null,2));}//readPackageJsonfunctionreadPackageJson(tree:Tree,type?:string):any{returnreadJson(tree,PACKAGE_JSON_PATH,type);}//writePackageJsonfunctionwritePackageJson(tree:Tree,json:any):any{returnwriteJson(tree,PACKAGE_JSON_PATH,json);}//addPackagefunctionaddPackage(tree:Tree,packages:string|string[],type:packgeType='dependencies'):Tree{constpackageJson=readPackageJson(tree,type);if(packageJson==null){returntree;}if(!Array.isArray(packages)){packages=[packages];}packages.forEach((pck)=>{constsplitPosition=pck.lastIndexOf('@');packageJson[type][pck.substr(0,splitPosition)]=pck.substr(splitPosition+1);});writePackageJson(tree,packageJson);returntree;}

为了保持 index.ts 文件的简洁，可以将相关操作的方法抽取到一个新的文件中进行引用。

测试 ng-add

至此我们已经完成了 ng-add 命令，现在我们对该命令进行测试：

ng new test 初始化一个 Angular 项目

cd test && mkdir libs 在项目中添加一个 libs 文件夹，将图中标蓝的文件拷贝到其中

之后在命令行中执行 npm link libs/

link 完成之后 cd libs && npm run build && cd ..

现在执行 ng add first-schematics 之后会看到如下提示

最后我们通过 npm start 来查看执行的结果如下

读到这里，这篇“如何在本地开发Angular Schematics”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。