让我们尝试制作电路图

1 年 ago
韵, 科
3 minutes

这篇文章是 Angular Advent Calendar 2018 的第三天的文章。

大家今天还在使用Angular CLI吗？

Angular CLI不仅可以处理构建和开发服务器的繁琐工作，而且通过执行诸如ng generate和ng add之类的命令，它可以生成所需的文件、添加模块并进行配置更改，非常方便。

这些处理是由Angular Schematics定义的，您也可以自己创建。另外，还可以扩展现有的Schematics。

你有什么想法？想要试一试吗？那么，马上就开始吧！

开始吧 ba)

先安装schematics-cli。

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

我们将创建一个新项目。

$ schematics blank my-schematics
$ cd my-schematics

如果除了空白之外还指定原理图，将创建一个带有实施示例的项目。

让我们来看一下生成的文件。

{
  "name": "my-schematics",
  "schematics": "./src/collection.json",
  "dependencies": {
  }
}

在package.json的schematics中，指定了包含所要运行的Schematics的collection.json。

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

当调用my-schematics时，将执行位于./my-schematics/index.ts中名为mySchematics的方法。

$schema的存在是为了在IDE中进行代码补全等操作，并不是必需的。

草图的内容是返回规则（即返回树的函数）的函数。树包括文件系统和文件的变更。

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

export function mySchematics(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    return tree;
  };
}

我们来试试做一下

基本操作是对树进行操作。

export function mySchematics(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create(_options.path + '/hi', 'Hello world!');
    return tree;
  };
}

编译并执行后，您可以查看Schematics的输出。

$ npm run build
$ schematics .:my-schematics --path=./
CREATE /hi (12 bytes)

默认情况下只有预览，但通过指定–dry-run=false，可以实际生成文件。

$ schematics .:my-schematics --path=./ --dry-run=false
CREATE /hi (12 bytes)
$ cat hi
Hello world!

如果要在其他目录中调用，您需要以schematics ./path/to/collection.json:my-schematics的形式编写，其中./path/to/collection.json是指向collection.json的路径，而my-schematics是在collection.json中的定义名称。

日志输出

根据不同的用途，我们会使用记录器来跟踪进展和错误显示。

    • debug

 

    • info

 

    • warn

 

    error

有很多选项。

export function mySchematics(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    _context.logger.info('? Hello, schematics!');
    return tree;
  };
}

模板 (mó

在生成用于组件等的文件集时，请使用模板。

import { strings } from '@angular-devkit/core';
import {
  Rule,
  SchematicContext,
  applyTemplates,
  mergeWith,
  apply,
  url,
} from '@angular-devkit/schematics';

export function mySchematics(_options: any): Rule {
  return (_, _context: SchematicContext) => {
    return mergeWith(apply(url('./files'), [
      applyTemplates({
        ...strings,
        name: _options.name,
      }),
    ]));
  };
}

使用 url() 指定模板路径，然后执行 applyTemplates() 函数。

文件名会被替换为以下划线括起来的__name__部分。

/* styles */

模板的语法类似于EJS，可以在 `<% %>` 中写入条件表达式，在 `<%= %>` 中插入字符串。

<% if (name) { %>
  Hello <%= name %>, I'm a schematic.
<% } else { %>
  Why don't you give me your name with --name?
<% } %>

请务必充分利用@angular-devkit/core中提供的便捷工具，如：将选择器转换为类名（classify）或将其转换为短横线命名法（dasherize）。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-<%= name %>',
  templateUrl: './<%= name %>.component.html',
  styleUrls: ['./<%= name %>.component.css'] }
})
export class <%= classify(name) %>Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

那么，让我们试试看吧。

$ schematics .:my-schematics --name=sample --dry-run=false
CREATE /sample.component.css (12 bytes)
CREATE /sample.component.html (35 bytes)
CREATE /sample.component.ts (270 bytes)

组件已生成

公开

如果能完成一個很棒的原理圖，我們一定要公開分享一下！

$ npm run build
$ npm publish

最后

我认为参考以下存储库可以帮助你了解其他Schematics的实例，本次只是介绍一个简单示例。

https://github.com/angular/material2/tree/master/src/lib/schematics
https://github.com/ng-bootstrap/schematics
https://github.com/ionic-team/ionic/tree/master/angular/src/schematics

https://github.com/angular/material2/tree/master/src/lib/schematics
https://github.com/ng-bootstrap/schematics
https://github.com/ionic-team/ionic/tree/master/angular/src/schematics

Onsen UI的原型图也正在开发中！（宣传）
https://github.com/OnsenUI/OnsenUI/pull/2591

顺便提一下，您可以通过以下命令显示schematics-cli的帮助信息。

$ schematics --help

请阅读GitHub上的文档，以了解可用的API。 网址：https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/schematics

明天是@MasanobuAkiba先生！

文献来源

以下是中文的几种表述方式：

1. 请参考以下链接获取关于自定义Angular原理图的合并方式：
– https://medium.com/@michael.warneke/merging-custom-angular-schematics-c14a303f63b6
– https://github.com/angular/angular-cli/tree/master/packages/schematics/angular
– https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

2. 可以通过以下链接了解如何合并自定义的Angular原理图：
– https://medium.com/@michael.warneke/merging-custom-angular-schematics-c14a303f63b6
– https://github.com/angular/angular-cli/tree/master/packages/schematics/angular
– https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

3. 请查看以下链接以了解如何合并自定义的Angular Schematics：
– https://medium.com/@michael.warneke/merging-custom-angular-schematics-c14a303f63b6
– https://github.com/angular/angular-cli/tree/master/packages/schematics/angular
– https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

4. 有关合并自定义Angular原理图的方法，请参考以下链接：
– https://medium.com/@michael.warneke/merging-custom-angular-schematics-c14a303f63b6
– https://github.com/angular/angular-cli/tree/master/packages/schematics/angular
– https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

5. 如需了解有关合并自定义Angular原理图的详细信息，请点击以下链接：
– https://medium.com/@michael.warneke/merging-custom-angular-schematics-c14a303f63b6
– https://github.com/angular/angular-cli/tree/master/packages/schematics/angular
– https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

✖
广告
将在 10 秒后关闭
bannerAds