Apakah Skema Sudut? Bagaimana untuk membina? (penjelasan terperinci)

Apakah itu Sudut Skema? Bagaimana untuk membangunkan Skema Sudut anda secara tempatan? Artikel berikut akan memberi anda pengenalan terperinci dan menggunakan contoh untuk lebih mengenalinya. Saya harap ia akan membantu anda!

Apakah Skema Sudut?

Angular Schematics adalah berasaskan templat, penjana kod unik Angular Sudah tentu, ia bukan sahaja menjana kod, tetapi juga boleh mengubah suai kod kami Ia membolehkan kami melaksanakan kod kami berdasarkan Angular CLI Beberapa operasi automatik anda sendiri. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Saya percaya bahawa apabila membangunkan projek Angular, semua orang telah menggunakan ng generate component component-name, ng add @angular/materials, ng generate module module-name, ini adalah Beberapa CLI mempunyai telah dilaksanakan untuk kita dalam Angular, jadi bagaimana kita harus melaksanakan CLI berdasarkan projek kita sendiri dalam projek kita sendiri? Artikel ini akan diperkenalkan berdasarkan amalan kami dalam ng-devui-admin. Kami mengalu-alukan perhatian berterusan anda Kami akan melancarkan CLI yang lebih kaya pada masa hadapan untuk membantu anda membina halaman Admin dengan lebih pantas.

Bagaimana untuk membangunkan Skema Sudut anda secara tempatan

Untuk membangunkan secara tempatan anda perlu memasang schematics perancah terlebih dahulu

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

# 安装完成之后新建一个schematics项目
schematics blank --name=your-schematics

Selepas mencipta projek baharu, anda akan melihat perkara berikut struktur direktori , menunjukkan bahawa anda telah berjaya mencipta projek shematics.

Pengenalan fail penting

• tsconfig.json: Ia terutamanya berkaitan dengan pembungkusan dan penyusunan projek, dan tidak akan diperkenalkan dalam perincian di sini

• collection.json: berkaitan dengan arahan CLI anda, digunakan untuk mentakrifkan arahan berkaitan anda

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

first-schematics: nama arahan, Perintah ini boleh dijalankan melalui ng g first-schematics:first-schematics dalam projek. description: Penerangan arahan ini. factory: Fungsi kemasukan untuk pelaksanaan arahan Biasanya terdapat atribut lain schema, yang akan kami jelaskan kemudian.

• index.ts: Laksanakan logik arahan anda yang berkaitan dalam fail ini

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

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

Di sini kita mula-mula melihat beberapa parameter yang perlu difahami: tree : Di sini anda boleh memahami pokok sebagai keseluruhan projek sudut kami. Anda boleh menambah fail, mengubah suai fail dan memadam fail melalui pepohon. _context: Parameter ini ialah konteks di mana schematics dijalankan Sebagai contoh, anda boleh melaksanakan context melalui npm install. Rule: Logik operasi dibangunkan untuk kami.

Melaksanakan arahan ng-add

Kini kita akan lebih mengenalinya dengan melaksanakan arahan ng-add.

Ia juga berdasarkan projek yang telah kami buat di atas.

Fail berkaitan arahan baharu

Mula-mula kami mencipta direktori baharu src di bawah direktori ng-add, dan kemudian tambah Tiga fail index.ts, schema.json, schema.ts, maka struktur direktori anda hendaklah seperti berikut:

Konfigurasi<span style="font-size: 18px;">collection.json</span>collection.json

collection.jsonSelepas itu kami mengkonfigurasi arahan ini dalam

:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    ...,
    "ng-add": {
      "factory": "./ng-add/index",
      "description": "Some description about your schematics",
      "schema": "./ng-add/schema.json"
    }
  }
}

Tambah fail kami ingin memasukkan dalam direktori <span style="font-size: 18px;">files</span><span style="font-size: 18px;">fail</span>

templateUntuk sintaks , sila rujuk

sintaks ejs

app.component.html.template

<div class="my-app">
  <% if (defaultLanguage === &#39;zh-cn&#39;) { %>你好，Angular Schematics!<% } else { %>Hello, My First Angular Schematics!<% } %>
  <h1 id="nbsp-title-nbsp">{{ title }}</h1>
</div>

app.component.scss.template

.app {
  display: flex;
  justify-content: center;
  align-item: center;
}

app.component.ts.template

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = <% if (defaultLanguage === &#39;zh-cn&#39;) { %>&#39;你好&#39;<% } else { %>&#39;Hello&#39;<% } %>;
}

Mula laksanakan logik arahan

• schema.json

: Tentukan interaksi dengan pengguna dalam fail ini

{
  "$schema": "http://json-schema.org/schema",
  "id": "SchematicsDevUI",
  "title": "DevUI Options Schema",
  "type": "object",
  "properties": {
    "defaultLanguage": {
      "type": "string",
      "description": "Choose the default language",
      "default": "zh-cn",
      "x-prompt": {
        "message": "Please choose the default language you want to use: ",
        "type": "list",
        "items": [
          {
            "value": "zh-cn",
            "label": "简体中文 (zh-ch)"
          },
          {
            "value": "en-us",
            "label": "English (en-us)"
          }
        ]
      }
    },
    "i18n": {
      "type": "boolean",
      "default": true,
      "description": "Config i18n for the project",
      "x-prompt": "Would you like to add i18n? (default: Y)"
    }
  },
  "required": []
}

defaultLanguagei18n Dalam definisi di atas, arahan kami akan menerima dua parameter, iaitu defaultLanguage dan

Kami menggunakan sebagai contoh untuk menerangkan konfigurasi parameter yang berkaitan:

{
  "defaultLanguage": {
    "type": "string",
    "description": "Choose the default language",
    "default": "zh-cn",
    "x-prompt": {
      "message": "Please choose the default language you want to use: ",
      "type": "list",
      "items": [
        {
          "value": "zh-cn",
          "label": "简体中文 (zh-ch)"
        },
        {
          "value": "en-us",
          "label": "English (en-us)"
        }
      ]
    }
  }
}

type 代表该参数的类型是 string。default 为该参数的默认值为 zh-cn。x-prompt 定义与用户的交互，message 为我们对用户进行的相关提问，在这里我们的 type 为 list 代表我们会为用户提供 items 中列出的选项供用户进行选择。

• schema.ts：在该文件中定义我们接收到的参数类型

export interface Schema {
  defaultLanguage: string;
  i18n: boolean;
}

• index.ts：在该文件中实现我们的操作逻辑，假设在此次 ng-add 操作中，我们根据用户输入的 defaultLanguage, i18n 来对用户的项目进行相应的更改，并且插入相关的 npm 包，再进行安装。

import {
  apply,
  applyTemplates,
  chain,
  mergeWith,
  move,
  Rule,
  SchematicContext,
  SchematicsException,
  Tree,
  url
} from '@angular-devkit/schematics';
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
import { Schema as AddOptions } from './schema';

let projectWorkspace: {
  root: string;
  sourceRoot: string;
  defaultProject: string;
};

export type packgeType = 'dependencies' | 'devDependencies' | 'scripts';
export const PACKAGES_I18N = [
  '@devui-design/icons@^1.2.0',
  '@ngx-translate/core@^13.0.0',
  '@ngx-translate/http-loader@^6.0.0',
  'ng-devui@^11.1.0'
];
export const PACKAGES = ['@devui-design/icons@^1.2.0', 'ng-devui@^11.1.0'];
export const PACKAGE_JSON_PATH = 'package.json';
export const ANGULAR_JSON_PATH = 'angular.json';

export default function (options: AddOptions): Rule {
  return (tree: Tree, context: SchematicContext) => {
    // 获取项目空间中我们需要的相关变量
    getWorkSpace(tree);

    // 根据是否选择i18n插入不同的packages
    const packages = options.i18n ? PACKAGES_I18N : PACKAGES;
    addPackage(tree, packages, 'dependencies');

    // 执行 npm install
    context.addTask(new NodePackageInstallTask());

    // 自定义的一系列 Rules
    return chain([removeOriginalFiles(), addSourceFiles(options)]);
  };
}

下面时使用到的函数的具体实现：

// getWorkSpace
function getWorkSpace(tree: Tree) {
  let angularJSON;
  let buffer = tree.read(ANGULAR_JSON_PATH);
  if (buffer) {
    angularJSON = JSON.parse(buffer.toString());
  } else {
    throw new SchematicsException(
      'Please make sure the project is an Angular project.'
    );
  }

  let defaultProject = angularJSON.defaultProject;
  projectWorkspace = {
    root: '/',
    sourceRoot: angularJSON.projects[defaultProject].sourceRoot,
    defaultProject
  };

  return projectWorkspace;
}

// removeOriginalFiles
// 根据自己的需要选择需要删除的文件
function removeOriginalFiles() {
  return (tree: Tree) => {
    [
      `${projectWorkspace.sourceRoot}/app/app.component.ts`,
      `${projectWorkspace.sourceRoot}/app/app.component.html`,
      `${projectWorkspace.sourceRoot}/app/app.component.scss`,
      `${projectWorkspace.sourceRoot}/app/app.component.css`
    ]
      .filter((f) => tree.exists(f))
      .forEach((f) => tree.delete(f));
  };
}

将 files 下的文件拷贝到指定的路径下，关于 chain, mergeWith, apply, template 的详细使用方法可以参考 Schematics

// addSourceFiles
function addSourceFiles(options: AddOptions): Rule {
  return chain([
    mergeWith(
      apply(url('./files'), [
        applyTemplates({
          defaultLanguage: options.defaultLanguage
        }),
        move(`${projectWorkspace.sourceRoot}/app`)
      ])
    )
  ]);
}

// readJson
function readJson(tree: Tree, file: string, type?: string): any {
  if (!tree.exists(file)) {
    return null;
  }

  const sourceFile = tree.read(file)!.toString('utf-8');
  try {
    const json = JSON.parse(sourceFile);
    if (type && !json[type]) {
      json[type] = {};
    }
    return json;
  } catch (error) {
    console.log(`Failed when parsing file ${file}.`);
    throw error;
  }
}

// writeJson
export function writeJson(tree: Tree, file: string, source: any): void {
  tree.overwrite(file, JSON.stringify(source, null, 2));
}

// readPackageJson
function readPackageJson(tree: Tree, type?: string): any {
  return readJson(tree, PACKAGE_JSON_PATH, type);
}

// writePackageJson
function writePackageJson(tree: Tree, json: any): any {
  return writeJson(tree, PACKAGE_JSON_PATH, json);
}

// addPackage
function addPackage(
  tree: Tree,
  packages: string | string[],
  type: packgeType = 'dependencies'
): Tree {
  const packageJson = readPackageJson(tree, type);

  if (packageJson == null) {
    return tree;
  }

  if (!Array.isArray(packages)) {
    packages = [packages];
  }
  packages.forEach((pck) => {
    const splitPosition = pck.lastIndexOf('@');
    packageJson[type][pck.substr(0, splitPosition)] = pck.substr(
      splitPosition + 1
    );
  });

  writePackageJson(tree, packageJson);
  return tree;
}

为了保持 index.ts 文件的简洁，可以将相关操作的方法抽取到一个新的文件中进行引用。

测试 <span style="font-size: 18px;">ng-add</span>

至此我们已经完成了 ng-add 命令，现在我们对该命令进行测试：

• ng new test 初始化一个 Angular 项目
• cd test && mkdir libs 在项目中添加一个 libs 文件夹，将图中标蓝的文件拷贝到其中

• 之后在命令行中执行 npm link libs/
• link 完成之后 cd libs && npm run build && cd ..
• 现在执行 ng add first-schematics 之后会看到如下提示

• 最后我们通过 npm start 来查看执行的结果如下

结语

综上简单介绍了一个 Schematics 的实现，更多的一些应用欢迎大家查看 ng-devui-admin 中的实现。

更多编程相关知识，请访问：编程学习！！

Atas ialah kandungan terperinci Apakah Skema Sudut? Bagaimana untuk membina? (penjelasan terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!