@pcq/schematics-example v0.0.0

Angular Schematics 代码生成

首先我们安装这个example包

ng add 

（在此描述变化）

接下来我们就来仔细阐述一下要如何实现上述操作。

1、安装schematics-cli命令行工具

npm install -g @angular-devkit/schematics-cli

2、创建一个schematics集合

schematics blank --name=schematics-example

进入创建好的项目，看到以下结构

3、使用ng add 命令

为了使用ng add 我们把src下的schematics-example改成ng-add，同时collection.json里也要做出相应的调整：

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "ng-add": {
      "description": "A blank schematic.",
      "factory": "./ng-add/index#schematicsExample"
    }
  }
}

4、使用模板文件 模板长的就是这个样子，这个name和path其实就是参数，dasherize是一个字符串操作方法，这里不赘述，后面再讲。

这个模板的来源我是在@delon里找的(github)，需要自行手动移到目录下

5、实现ng g schematics-example:component

首先现在src下新建一个文件夹及一个文件：component/index.ts 我们执行ng g schematics-example:component --name=list命令，可以看到生成了三个常规的angular文件，要实现这个功能我们需要在src/component/index.ts里干点什么。

我们来看看component/index.ts里的代码

import { chain, Rule, apply, url, template, branchAndMerge, mergeWith } from '@angular-devkit/schematics';
// 这些就是前面提到的操作字符串的方法，可以自行f12查看详情
import { classify, dasherize, camelize, underscore } from '@angular-devkit/core/src/utils/strings';
/** 这两个方法很关键
 * addImport 是在某个文件添加形如这样的东西 import { XxxComponent } from './xxx/xxx.component';
 * addValToVar 是添加一个字符串到某个变量,例如:
 * const routes: Routes = [];
 *          
 * const routes: Routes = [
 *   { path: 'xxx', component: XxxComponent }
 * ];
 * 这两个方法都是参考angular和@delon代码实现的,可根据实际需要进行调整
*/
import { addImport, addValToVar } from '../utils/build';
const stringUtils = { classify, dasherize, camelize, underscore };
export function component(options: any): Rule {
   
    // 合并模板里的变量，详情可看angular-devkit-schematics-builds，下面有链接
    const templateSource = apply(url('./files'), [
        template({
            ...stringUtils,
            ...options
        })
    ]);

    // 这里我也是看别人源码自行理解的，每太深究angular-devkit-schematics每个方法的具体含义
    return chain([
        branchAndMerge(chain([
            mergeWith(templateSource),
            addImport(options.path, options.symbolName, options.componentPath),
            addValToVar(options.modPath, "COMPONENTS", options.symbolName)
        ]))
    ]);
}

angular-devkit-schematics-builds的GitHub

六、在collection里添加这个schematics

{
 "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
 "schematics": {
   "ng-add": {
     "description": "A blank schematic.",
     "factory": "./ng-add/index#schematicsExample"
   },
   "component": {
     "factory": "./component/index#component",
     "description": "generate component schematics"
   }
 }
}

还要些其它操作，这里不再说明，可看源码，聪明的你一定能一看就懂。

七、我们来实践一下 首先我们我们先把addImport()和addValToVar()及其相关的引用先注释，这个东西需要在实际项目中才能运行， 这里我们先来看看生成文件的效果

// 首先
npm run build
// 然后
schematics .:component --name=user

命令行输出了了结果，创建了三个文件，如果想要看到生成真实的文件可以加上参数

schematics .:component --name=user --dry-run=false

总结 以上，就可以生成我们自己的业务模板了。完整代码在这里