如何高效学习angular原理图绘制技巧？

2026-05-25 05:211阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计2634个文字，预计阅读时间需要11分钟。

安装 `npm` 并全局安装 `@angular-devkit/schematics-cli`：npm install -g @angular-devkit/schematics-cli

创建原理解图：schematics blank --name=hello-world

运行原理解图：npm run build

运行原理解图并指定文件路径：schematics 文件夹地址：原理解图名称 --required-option=value demo s

安装

npm install -g @angular-devkit/schematics-cli 创建原理图

schematics blank --name=hello-world 运行原理图

先执行npm run build然后运行原理图

schematics 文件夹地址:原理图名称 --<required-option>=<value>

demo

schematics .:hello-world // 可以看package.json 添加的文件 schematics ./src/collection.json:hello-world

在执行一个命令, 创造一个新的原理图

schematics blank --name=goodbye-world collection.json

描述收集的原理图的模式。每个原理图都使用名称、描述和工厂功能创建。

{ "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", "schematics": { "hello-world": { "description": "A blank schematic.", "factory": "./hello-world/index#helloWorld" }, "goodbye-world": { "description": "A blank schematic.", "factory": "./goodbye-world/index#goodbyeWorld" } } }

$schema属性指定 CLI 用于验证的架构。

schematics 出了属于该集合的命名原理图。每个原理图都有一个纯文本描述，并指向主文件中生成的入口函数。

该factory属性指向生成的入口函数。在本例中，您通过调用工厂函数来调用hello-world原理图。

#helloWorld 就是执行对应的helloWorld()函数

下面两个还不知道怎么用

可选 schema属性指向一个 JSON 模式文件，该文件定义了可用于原理图的命令行选项。
- type：属性提供的类型的描述符。
- properties：定义原理图可用选项的对象。
可选aliases数组指定一个或多个可用于调用原理图的字符串。例如，Angular CLI“generate”命令的原理图有一个别名“g”，它允许你使用命令ng g。

package.json导入

{ "name": "my-lib", "version": "0.0.1", "schematics": "./src/collection.json",// 这个是为了知道原理图从哪里导入的 } 添加一个js

案例

schema.ts

export interface Schema { name: string }

import {Schema} from "./schema"; export function helloWorld(_options: Schema): Rule { return (tree: Tree, _context: SchematicContext) => { + tree.create('hello.js',`console.log('Hello-World')`) return tree; }; }

helloWorld() 是原理图入口函数, 是一个规则工厂,返回一个创建规则(Rule) 的高阶函数

Rule: 定义一个函数, 接受一个Tree进行变换, 返回新的Tree

Tree: 虚拟文件系统,就是文件

SchematicContext 原理图上下文, 每个原理图都在自己的上下文中运行

执行yarn build 在执行schematics .:hello-world

我们发现原理图生成hello.js 文件, 但是现实中没有, 就是原理图在debug 模式下执行的

当我们执行 schematics .:hello-world --debug=false

我们会发现生成了hello.js

再执行这条命令, 我们发现控制带会报错, 我们必须删除这个文件才能运行

为了防止我们每次生成都要构建, 修改 package.json

"build:watch": "tsc -p tsconfig.json --watch",

创建 xxx/schema.json

{ "$schema": "json-schema.org/schema", "$id": "SchematicsMyService", "title": "My Service Schema", "type": "object", "description": "The name of the service.", "properties": { "name": { "description": "The name of the service.", "type": "string", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "输入你需要执行的名称?" } }, "required": [ "name" ] }

导入collection.json

"schematics": { "hello-world": { "description": "A blank schematic.", "factory": "./hello-world/index#helloWorld", + "schema": "./hello-world/schema.json" } }

执行 schematics .:hello-world --debug=false

输入名称 xxx

检查我们生成的 js文件

使用原理图模块

在./files/文件夹下使用, 如果不用files 用template 必须在tsconfig.json 进行调整

__name@dasherize__

name变量与正常字符串的其余部分分开

dasherize是一个辅助函数，它将接收name变量的值并将其转换为 kebab case 字符串，并且@是将变量应用于辅助函数的一种方法。

name-age ===> name-age

classify 好像让每一个首字母大写

name-age ===> NameAge

camelize 首字母小写,其他类似驼峰的形式

name-age ===> nameAge

<%= xxx %>

创建hello-__name@dasherize__.ts

console.log('Hello <%= name %>')
import { Component } from '@angular/core'; @Component({ selector: 'hello-<%= dasherize(name) %>', }) export class Hello<%= classify(name) %>Component { console.log('Hello <%= name %>') }
index.ts

import {strings} from '@angular-devkit/core'; import {apply, mergeWith, Rule, SchematicContext, template, url} from '@angular-devkit/schematics'; import {Schema} from "./schema"; // You don't have to export the function as default. You can also have more than one rule factory // per file. export function helloWorld(_options: Schema): Rule { return (_, _context: SchematicContext) => { // const {name} = _options // tree.create('hello.js', `console.log('Hello-${name}')`) const sourceTemplates = url('./files'); const sourceParametrized = apply(sourceTemplates, [ template({ ..._options, ...strings }) ]) // return tree; return mergeWith(sourceParametrized) }; }
其实我们可以使用任意的自定义函数

import {Injectable} from '@angular/core'; import {Observable} from "rxjs"; import {HttpClient} from "@angular/common/github.com/angular/angular-cli/tree/main/packages/schematics/angular/component/files
新建一个__name@dasherize__文件夹

__name@dasherize__.component.ts.template 文件

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-<%= dasherize(name) %>', templateUrl: './<%= dasherize(name) %>.component.html', styleUrls: ['./<%= dasherize(name) %>.component.scss'] }) export class <%=classify(name)%>Component implements OnInit { constructor() { } ngOnInit() { } }
原理图-文件夹下新建 schema.json

{ "$schema": "json-schema.org/schema", "id": "componentSchema", "title": "component options schema.", "type": "object", "descripiton": "创建一个component范本", "properties": { "name": { "description": "component的名字.", "type": "string", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "你想创建的component的名字:" } }, "required": [ "name" ] }

id：这个模式定义在集合中的唯一 id。
title：一个人类可读的模式描述。
type：由这些属性提供的类型描述符。
properties：一个定义该原理图可用选项的对象。
required：必填的选项

注意属性(proerties)选项：
　　$default 的设定，上面的表示，如果没有指定输入的选项，那么输入的第一个就是 name
　　 x-prompt：如果没有输入选项，则提示语提示输入

创建好 schema.json 之后，一定要记得在 collection.json 中配置 schema 属性

"schematics": { "hello-world": { "description": "A blank schematic.", "factory": "./hello-world/index#helloWorld", + "schema": "./hello-world/schema.json" } }
新建一个schema.ts

export interface Schema { name: string; }
编写规则工厂逻辑代码

yarn add @schematics/angular -S
swmlee.com/2019/12/12/technicalessays/angular-schematics-tutorial/

github.com/angular/angular-cli/blob/main/packages/schematics/angular/component/index.ts
angular schematics 实现 ng add 指令安装模块抄源码一个完整的案例
schematics ./ng-hello/src/collection.json:c age --project=angualr12date1120
取消--project xxxx 就使用默认angular.json 中defaultProject 自带的项目名

这里介绍的一种schema.json中参数的使用
打包到ng g 的命令里
package.json

{ "name": "ng-hello", "version": "0.0.0", "description": "A blank schematics", "scripts": { "build": "tsc -p tsconfig.schematics.json", "postbuild": "copyfiles package.json schematics/*/schema.json schematics/*/files/** schematics/collection.json ../dist/ng-hello/" }, "keywords": [ "schematics" ], "schematics": "./schematics/collection.json", // ng g xxx 找到的入口文件是这个 "ng-add": { "save": "devDependencies" }, "devDependencies": { "@types/node": "^12.11.1", "@types/jasmine": "~3.10.0", "jasmine": "^4.0.0", "copyfiles": "file:../../node_modules/copyfiles", "typescript": "file:../../node_modules/typescript" } }

../dist 注意对应打包生成的文件夹

执行yarn build 会自动跟着执行postbuild 指令执行,

或者"build:p": "tsc -p tsconfig.schematics.json & npm run postbuild",

tsconfig.schematics.json

{ "compilerOptions": { "baseUrl": ".", "lib": [ "es2018", "dom" ], "declaration": true, "module": "commonjs", "moduleResolution": "node", "noEmitOnError": true, "noFallthroughCasesInSwitch": true, "noImplicitAny": true, "noImplicitThis": true, "noUnusedParameters": true, "noUnusedLocals": true, "rootDir": "schematics", "outDir": "../../dist/my-lib-one/schematics",// 打包后的出口文件 "skipDefaultLibCheck": true, "skipLibCheck": true, "sourceMap": true, "strictNullChecks": true, "target": "es6", "types": [ "jasmine", "node" ] }, "include": [ "schematics/**/*" ], "exclude": [ "schematics/*/files/**/*" ] }
然后把ng-hello 包丢到node_modules 里面

执行ng g ng-hello:xxx 执行命令

其实我们也可以执行生成打包丢到node_modules 里面然后执行使用

记得别用src 文件夹, 要schematincs 文件夹这样就跟 ng g 的保持一致

测试的时候到最外层的package.json上, 因为要用到angular.json

schematics ./ng-hello/schematics/collection.json:c age

/** * 构建用于生成的默认项目路径。 * @param项目将生成其默认路径的项目。 */ export function buildDefaultPath(project: workspaces.ProjectDefinition): string { const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`; const projectDirName = project.extensions['projectType'] === ProjectType.Application ? 'app' : 'lib'; return `${root}${projectDirName}`; } // 如果没有执行path就是用默认的,project是angular.json里面的, 如果默认指令--project的名称就使用默认的 // project.sourceRoot 默认是`src` 所以 root 是 /src/ // 所有我们知道最后输入的是 /src/app export enum ProjectType { Application = 'application', Library = 'library', }
--style less

找到对应的模块find-module.ts

对应的代码

github.com/973782523/angualr-schematics 如果在vue使用
npm install @angular/cli -D
yarn add typescript copyfiles -D
记得在src添加一个文件夹app

或者你在angualr.json 修改app 改成你对应的文件

cd ng-hello // 打包ts yarn build-watch2 // 打包其他文件 yarn build:p 每次修改代码的时候,记得执行这个命令进行测试 ng g ng-hello:c age1 --skip-import 写了一个vue的案例
github.com/973782523/vue3-schematics 决定自己的高度的是你的态度，而不是你的才能记得我们是终身初学者和学习者
总有一天我也能成为大佬

标签：Angular 原理图学习安装