angular库的原理图实战

前置：安装原理图相关包

初始化库和原理图配置

1. 新建项目
   创建一个不带app模块的项目，因为我只是想建个库
   ng new my-project --create-application=false
2. 新建库
   ng g library hello-tea
3. 在库的根目录创建文件夹schematics
4. 在文件夹schematics下创建文件夹ng-add和文件collection.json
5. 编辑collection.json文件，初始写入以下内容
   collection.json文件是各个原理图的模式定义的集合

// project/hello-tea/schematics/collection.json
{
    "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
    "schematics": {
        "ng-add": {
            "description": "项目添加库。",
            "factory": "./ng-add/index",
            "schema": "./ng-add/schema.json"
        }
    }
}

• $schema 路径是相对于 Angular Devkit 集合模式定义的。（不太懂，大概是需要按angular定义的模式去运行原理图，指定了模式）
• schematics 属性列出了属于这个集合的各个命名原理图。每个原理图都有一个纯文本格式的描述，以及指向主文件中自动生成的那个入口函数。
• factory 属性指向自动生成的那个入口函数。官网在index后面加上#ngAdd，意思是index文件中的ngAdd方法，但是我发现编译原理图以后，运行ng add hello-tea找不到ngAdd方法，因此不加#ngAdd，在index文件中不写方法名即可：export default function (options: any): Rule;
• 可选属性 schema 是一个 JSON 模式文件，它定义了本原理图中可用的命令行参数。
• 可选数组属性 aliases 指定了一个或多个可用来调用此原理图的字符串。比如，Angular CLI “generate” 命令的原理图有一个别名 “g”，这就可以让你使用命令 ng g。

6. 在库项目的package.json文件中，加上以下内容，当 Angular CLI 运行命令时，会根据这个条目在你的集合中查找指定名字的原理图。

"schematics": "./schematics/collection.json"

原理图编写

1. 在文件夹ng-add下新建文件schema.json，写入以下内容
   这是原理图提示，当angular cli运行命令时，和用户交互，具体参考angular官网创建原理图

{
    "$schema": "http://json-schema.org/schema",
    "$id": "hello-tea",
    "title": "Hello Tea Schema",
    "type": "object",
    "properties": {
        "project": {
            "type": "string",
            "description": "The name of the project.",
            "$default": {
                "$source": "projectName"
            }
        },
        "category": {
            "type": "string",
            "default": "红茶",
            "description": "用预设模板创建一个Angular项目",
            "x-prompt": {
                "message": "请选择创建项目的模板:",
                "type": "list",
                "items": [
                    "红茶",
                    "绿茶",
                    "菊花茶"
                ]
            }
        }
    },
    "required": []
}

2. 在文件夹ng-add下新建文件index.ts，写入以下内容

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';

// Just return the tree
export default function (options: any): Rule {
  return (tree: Tree, context: SchematicContext) => {
    tree.create('tea.json', options.category);
    context.addTask(new NodePackageInstallTask());
    return tree;
  };
}

原理图使用

1. 编译原理图

• 在库的目录下新建文件tsconfig.schematics.json，写入以下内容
  定义原理图编译的模式规则

{
    "compilerOptions": {
        "baseUrl": ".",
        "lib": [
            "es2018",
            "dom"
        ],
        "declaration": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noFallthroughCasesInSwitch": true,
        "rootDir": "schematics",
        "outDir": "../../dist/hello-tea/schematics",
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "es6",
        "types": [
            "jasmine",
            "node"
        ]
    },
    "include": [
        "schematics/**/*"
    ],
    "exclude": [
        "schematics/*/files/**/*"
    ]
}

• 在库的目录下，找到package.json文件，在scripts中加入以下内容：
  编译原理图，然后把schematics下的部分文件copy到编译好的目录下

"build": "tsc -p tsconfig.schematics.json",
"postbuild": "copyfiles schematics/*/schema.json schematics/**/*.ts schematics/*/files/** schematics/collection.json ../../dist/hello-tea/"

• 在库的目录下，找到package.json文件，在devDependencies中加入以下内容：
  上一步的指令，需要从npm下载，然后定义找到指令的路径

"copyfiles": "file:../../node_modules/copyfiles",
"typescript": "file:../../node_modules/typescript"

• 在库的目录下，运行目录: npm run build

2. 打包、发布库
   在项目根目录下的package.json文件的scripts中加入新的指令后运行：npm run publish:hello-tea

"publish:hello-tea": "cd projects/hello-tea && npm version patch && ng build hello-tea && npm run build && cd ../../dist/hello-tea && npm publish && cd ../../ && rm -rf dist"

5. 安装使用

• 新建一个angular项目
• npm install
• ng add hello-tea