写一份自定义的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)); } }; }
addPackageToPackageJson