Angular脚手架开发

简介

写一份自定义的angular脚手架吧

写之前我们先解析一下antd的脚手架

前提

先把 Angular Schematic 这篇文章读一遍,确保了解了collection等基础

antd脚手架

克隆项目

git clone https://github.com/NG-ZORRO/ng-zorro-antd.git

开始

打开项目

在schematics下的collection.json为入口,查看内容

一共定了了4个schematic,每个schema分别指向了各文件夹的子schema.json,factory指向了函数入口，index.ts

./ng-add/schema.json

{
  // 指定schema.json的验证模式
  "$schema": "http://json-schema.org/schema",
  "id": "nz-ng-add",
  "title": "Ant Design of Angular(NG-ZORRO) ng-add schematic",
  "type": "object",
  // 包含的属性
  "properties": {
    "project": {
      "type": "string",
      "description": "Name of the project.",
      "$default": {
        "$source": "projectName"
      }
    },
    // 是否跳过package.json的安装属性
    "skipPackageJson": {
    // 类型为布尔
      "type": "boolean",
      // 默认值为false
      "default": false,
      // 这是个描述,可以看到，如果在ng add ng-zorro-antd时不希望自动安装可以加入--skipPackageJson配置项
      "description": "Do not add ng-zorro-antd dependencies to package.json (e.g., --skipPackageJson)"
    },
    // 开始页面
    "bootPage": {
    // 布尔
      "type": "boolean",
      // 默认为true
      "default": true,
      // 不指定--bootPage=false的话，你的app.html将会被覆盖成antd的图标页
      "description": "Set up boot page."
    },
    // 图标配置
    "dynamicIcon": {
      "type": "boolean",
      "default": false,
      "description": "Whether icon assets should be add.",
      "x-prompt": "Add icon assets [ Detail: https://ng.ant.design/components/icon/en ]"
    },
    // 主题配置
    "theme": {
      "type": "boolean",
      "default": false,
      "description": "Whether custom theme file should be set up.",
      "x-prompt": "Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ]"
    },
    // i18n配置,当你ng add ng-antd-zorro 的时候有没有让你选择这个选项呢?
    "i18n": {
      "type": "string",
      "default": "en_US",
      "enum": [
        "ar_EG",
        "bg_BG",
        "ca_ES",
        "cs_CZ",
        "da_DK",
        "de_DE",
        "el_GR",
        "en_GB",
        "en_US",
        "es_ES",
        "et_EE",
        "fa_IR",
        "fi_FI",
        "fr_BE",
        "fr_FR",
        "is_IS",
        "it_IT",
        "ja_JP",
        "ko_KR",
        "nb_NO",
        "nl_BE",
        "nl_NL",
        "pl_PL",
        "pt_BR",
        "pt_PT",
        "sk_SK",
        "sr_RS",
        "sv_SE",
        "th_TH",
        "tr_TR",
        "ru_RU",
        "uk_UA",
        "vi_VN",
        "zh_CN",
        "zh_TW"
      ],
      "description": "add locale code to module (e.g., --locale=en_US)"
    },
    "locale": {
      "type": "string",
      "description": "Add locale code to module (e.g., --locale=en_US)",
      "default": "en_US",
      "x-prompt": {
        "message": "Choose your locale code:",
        "type": "list",
        "items": [
          "en_US",
          "zh_CN",
          "ar_EG",
          "bg_BG",
          "ca_ES",
          "cs_CZ",
          "de_DE",
          "el_GR",
          "en_GB",
          "es_ES",
          "et_EE",
          "fa_IR",
          "fi_FI",
          "fr_BE",
          "fr_FR",
          "is_IS",
          "it_IT",
          "ja_JP",
          "ko_KR",
          "nb_NO",
          "nl_BE",
          "nl_NL",
          "pl_PL",
          "pt_BR",
          "pt_PT",
          "sk_SK",
          "sr_RS",
          "sv_SE",
          "th_TH",
          "tr_TR",
          "ru_RU",
          "uk_UA",
          "vi_VN",
          "zh_TW"
        ]
      }
    },
    "gestures": {
      "type": "boolean",
      "default": false,
      "description": "Whether gesture support should be set up."
    },
    "animations": {
      "type": "boolean",
      "default": true,
      "description": "Whether Angular browser animations should be set up."
    }
  },
  "required": []
}

schema.ts

当你进入index.ts时首先看到的是一个带options:Schema的函数，

options指向的类型是Schema interface,而这个interface 恰好是schema.json中的properties,也就是cli的传入参数类.

我们可以通过自定义传入参数类来完成我们需要的操作.

export type Locale =
  | 'ar_EG'
  | 'bg_BG'
  | 'ca_ES'
  | 'cs_CZ'
  | 'da_DK'
  | 'de_DE'
  | 'el_GR'
  | 'en_GB'
  | 'en_US'
  | 'es_ES'
  | 'et_EE'
  | 'fa_IR'
  | 'fi_FI'
  | 'fr_BE'
  | 'fr_FR'
  | 'is_IS'
  | 'it_IT'
  | 'ja_JP'
  | 'ko_KR'
  | 'nb_NO'
  | 'nl_BE'
  | 'nl_NL'
  | 'pl_PL'
  | 'pt_BR'
  | 'pt_PT'
  | 'sk_SK'
  | 'sr_RS'
  | 'sv_SE'
  | 'th_TH'
  | 'tr_TR'
  | 'ru_RU'
  | 'uk_UA'
  | 'vi_VN'
  | 'zh_CN'
  | 'zh_TW';

export interface Schema {
  bootPage?: boolean;
  /** Name of the project to target. */
  project?: string;
  /** Whether to skip package.json install. */
  skipPackageJson?: boolean;
  dynamicIcon?: boolean;
  theme?: boolean;
  gestures?: boolean;
  animations?: boolean;
  locale?: Locale;
  i18n?: Locale;
}

ng-add/index.ts

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
import { NodePackageInstallTask, RunSchematicTask } from '@angular-devkit/schematics/tasks';
import { addPackageToPackageJson } from '../utils/package-config';
import { hammerjsVersion, zorroVersion } from '../utils/version-names';
import { Schema } from './schema';
// factory指向的index.ts必须实现这个函数,一行一行看代码
// 我们的函数是一个更高阶的函数，这意味着它接受或返回一个函数引用。
// 在这种情况下，我们的函数返回一个接受Tree和SchematicContext对象的函数。
// options:Schema上面提到了
export default function(options: Schema): Rule {
// tree:虚拟文件系统:用于更改的暂存区域，包含原始文件系统以及要应用于其的更改列表。
// rule:A Rule是一个将动作应用于Tree给定的函数SchematicContext。
  return (host: Tree, context: SchematicContext) => {
    // 如果需要安装包,也就是--skipPackageJson=false
    if (!options.skipPackageJson) {
      // 调用addPackageToPackageJson,传入,tree文件树,包名,包版本
      addPackageToPackageJson(host, 'ng-zorro-antd', zorroVersion);
      // hmr模式包
      if (options.gestures) {
        addPackageToPackageJson(host, 'hammerjs', hammerjsVersion);
      }
    }

    
    const installTaskId = context.addTask(new NodePackageInstallTask());

    context.addTask(new RunSchematicTask('ng-add-setup-project', options), [installTaskId]);

    if (options.bootPage) {
      context.addTask(new RunSchematicTask('boot-page', options));
    }
  };
}

未完待续