安裝

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": "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

angular原理圖學習

安裝

創建原理圖

運行原理圖

`collection.json`

下面兩個還不知道怎麼用

package.json導入

添加一個js

創建 `xxx/schema.json`

使用原理圖模塊

判斷 transform

上個完整點的案例

angular schematics 實現 ng add 指令安裝模塊

抄源碼一個完整的案例

打包到`ng g` 的命令裏

如果在vue使用

寫了一個vue的案例

three.js 入門學習(二)

three.js 入門學習(一)

node.js學習技巧

圖解css選擇器-grid-flex

formly-form 動態表單

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

angular原理圖學習

安裝

創建原理圖

運行原理圖

collection.json

下面兩個還不知道怎麼用

package.json導入

添加一個js

創建 xxx/schema.json

使用原理圖模塊

判斷 transform

上個完整點的案例

angular schematics 實現 ng add 指令安裝模塊

抄源碼一個完整的案例

打包到ng g 的命令裏

如果在vue使用

寫了一個vue的案例

`collection.json`

創建 `xxx/schema.json`

打包到`ng g` 的命令裏