Creando nuestro 페인트 각도 설명도

Si llegaste hasta aqueí,es porque lo mas possible es que hayas utilizado algún Schematic pero ahora quieres entender como function an y como crear uno.
각도 설명도fue creado por el equipo de Angular para ayudarnos a automatizar nuestros proyectos,permitiendo crear reglas para crear archivos,correr o remover dependencias,entre otras cosas.El más usado por todos es El Angular Cli, por debajo es un Schematics que nos ayuda a crear nuestros components, servicios 등.
En este post te mostraremos paso a paso cómo crear tu primer Schematics,explicaremos cada functionalidad que lo compone y aboraredemos un caso de uso que puede ser común para aplicar un Schematics.
Primeramente debemos instalar@angular devkit/schematics cli

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

Generamos nuestro 페인트 설명도...

schematics blank init

Ahora veamos que nos GENERAS el 설명도 cli

Tenemos los archivos Comune 패키지.json,tsconfig.json 등
En la carpeta src estarán nuestros schematics,En este caso solo estáel schematic init,que fue el que creamos.

모으다json

새 교장 archivo de definición de todos los esquemas disponibles que tendermos.

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

Acuípodemos ver que cada schematic por defecto tiene una descrippción y un factory,que es la función principal donde inicia el schematic.

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

// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    return tree;
  };
}

Podemos ver la función init donde nos devuelve un Rule y acepta el parámetro llamado _options,para poder pasarle parámetros y definir comportamientos dentro de la función.

규칙

La "Regla"se llama con unárbol (나무:tree) y un schematicscontext,para realizar cambios en el arbol y se returna para su procesamiento posterior.

나무.

El Tree oárbol es una representación virtual de cada archivo en nuestro workspace,es lo que necesitamos para lograr El objetivo de los Shematics,generar código y realizar cambios en archivos existentes.Todas las 규칙 se tienen que ejecutar Correcemente para ver representados los cambios en el có digo.
Vamos a ir creando nuestro 설명도 y aument ando un poco la complejidad.
caso, vamos a crear un archivo.js con un 컨트롤러.adentro를 기록하다.

export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.js', `console.log('Frontend Rules');`);
    return tree;
  };
}

Esto crear áun 안녕하세요.js en la raíz del proyecto donde ejecutemos el 설명도.
Lo podemos probar de la siguiente manera:
Primero hacemos build de nuestro schematics para Compiler nuestros archivos.송전 시스템

$ npm run build 

Luego podemos probar el de dos maneras 설명도:

$ schematics .:init
$ schematics .:init --debug=false

De la primera forma va a correr el schematic De manera virtual y nos indicatarási existe algún error o no.
Si lo ejecutamos con el-debug=false Si crea el archivo hello.js en nuestra raíz.

옵션

A la hora de generar 설명도 podemos pasarle distintos pará metros A ese 설명도 para ayudarnos A automatizar mucho mejor.En este caso pasaremos un parámetro name para incluirlo En el console.로그
Una opcion es pasarlo 내연

$ scheamtics .:init --name=Henry

Esto funciona y el_options lo recibirácorrectante,pero podemos hacerlo mucho mejor?de quémanera?Podemos definir un schema specífico para el init y en este schema Podemos restringir quéopciones se le deben pasar y si querymos que sean desde el prompt,entre muchas definiciones más.
Creamos nuestro archivo 모드.json dentro del schema init.
초기화/모드.json

{
    "$schema": "http://json-schema.org/schema",
    "id": "InitSchematics",
    "title": "Init Options Schema",
    "type": "object",
    "description": "Saludar a un dev",
    "properties": {
        "name": {
            "type": "string",
            "description": "Name of dev",
            "$default": {
                "$source": "argv",
                "index": 0
            },
            "x-prompt": "A quien de frontend quieres saludar?"
        }
    },
    "required": [
        "name"
    ]
}

En el 시리즈.json debemos apuntar el schema nuevo creado

"init": {
      "description": "A blank schematic.",
      "factory": "./init/index#init",
      "schema": "./hello/schema.json"
 }

Y ahora nuestro quedaria de la siguiente manera 공장

export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.js', `console.log('Hi ${_options.name}Frontend Rules');`);
    return tree;
  };
}

Y se crea el archivo con el parámetro recibido tal cual lo creamos.

거푸집

Se puede generar código de una mejor manera y automatizada,gracias a los templates.
Tal cual como funciona el ng g c“name”del angular cli.
Todo esto de los templates debe tener un formato specifico que es medio extraño que a continuación les explico.
Dentro de src/init creamos la carpeta files y ahíadentro creamos nuestro template,esto debe ser asíya que por configuración todo lo que este Dentro de files no se va a compiler,esta excluido.
Creamos esta estrastructa dentro de scr 크림

- src/init/files/hello-__name@dasherize__/
                   hello-__name@dasherize__.ts

El_uu(밑줄)quiere decir que separa las variables y tenemos la función auxiliar dasherize que hace algo como NombreMio a nombre mio
Y nuestro 템플릿 quedar í a de la siguiente manera:

console.log('Hi <%= name %> Frontend Rules');

Ahora modificamos nuestra 규칙:

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


// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function init(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates =  url('./files');
    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ..._options,
        ...strings
      })
    ]);

    return mergeWith(sourceParametrizedTemplates)(tree, _context);

  };
}

Una vez ya tenemos nuestro 설명도, Una buena practica es crear Una aplicación angular llamada sandbox donde haremos nuestras pruebas.
La creamos dentro de nuestro proyecto 회사

ng new sandbox

Nos dirigimos a nuestra aplicación sandbox y linkeamos nuestro 설명도
Y ejecutamos nuestroel proyecto 샌드박스 설명도

npm link $PATH-PROJECT/init
schematics ..:init --debug false

Esto es solo el principio de un mundo bastante amplio como son los Schematics de Angular.
Les dejo unos de ejemplo paraque se puedan guiar 설명도:
https://github.com/briebug/jest-schematic
Este schematics de la gente de briebug donde nos ayudan a cambiar toda la configuración de Karma y Jasmine a Jest para nuestras pruebas unitarias
Por supuesto los 설명도 de ANGUAL que utiliza el ANGUAL cli
https://github.com/angular/angular-cli/tree/8ffb755ef084d358638045dd58e2f5f0297139a1/packages/schematics/angular
Espero les haya gustado,cualquier cosa comenten o escríbanme
Esto funciona y el_options lo recibirácorrectante,pero podemos hacerlo mucho mejor?de quémanera?Podemos definir un schema specífico para el init y en este schema Podemos restringir quéopciones se le deben pasar y si querymos que sean desde el prompt,entre muchas definiciones más.
프로젝트 재구매: https://github.com/HenryGBC/angular-shematics-example
미 트위터:
Mi Github:https://github.com/HenryGBC