angular原理图学习
安装
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进行变换, 返回新的TreeTree
: 虚拟文件系统,就是文件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": "http://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/http"; const API_URL = '/api/<%= dasherize(name) %>' @Injectable({ providedIn: 'root' }) // <%= classify(name) %> NameAge // <%= camelize(name) %> nameAge // <%= dasherize(name) %> name-age export class <%= classify(name) %>Service { constructor(private httpClient: HttpClient) { } findAll(): Observable<<%= classify(name) %>[]> { return this.httpClient.get<<%= classify(name) %>[]>(API_URL); } create(<%= camelize(name) %>: <%= classify(name) %>): Observable<number> { return this.httpClient.post<number>(API_URL, <%= camelize(name) %>); } } export interface <%= classify(name) %> { someProperty: string; }
-
执行命令
schematics .:hello-world name-age --debug=false
判断 transform
schema.json
"properties": {
...
+ "transform": {
+ "type": "boolean",
+ "default": "false"
+ }
}
添加类型 schema.ts
export interface Schema {
name: string;
+ transform?:boolean;
}
使用
<% if(transform){ %>
let a=1
<% }else{ %>
let b=2
<% } %>
使用命令
schematics .:hello-world name-age true --debug=false
第二个参数的使用
上个完整点的案例
抄抄源码
https://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": "http://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
https://swmlee.com/2019/12/12/technicalessays/angular-schematics-tutorial/
https://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
对应的代码
https://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的案例
https://github.com/973782523/vue3-schematics
决定自己的高度的是你的态度,而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬
![](https://images.cnblogs.com/cnblogs_com/fangdongdemao/1475032/o_230710154042_qrcode_1689001024311.jpg)