Angular

本文集文档发布于灏天文库

3.6Angular CLI 高级应用

文档摘要

3.6Angular CLI 高级应用 3.6 Angular CLI 高级应用 Angular CLI (Command Line Interface) 不仅是创建和管理 Angular 项目的基础工具，还提供了许多高级功能，可以显著提高开发效率、优化项目结构和构建过程。本章节将深入探讨 Angular CLI 的高级应用，包括自定义 schematics、构建优化、环境变量管理和第三方库集成。 3.6.1 自定义 Schematics Schematics 是 Angular CLI 中用于代码生成、转换和更新的工具。通过自定义 Schematics，我们可以自动化重复性的任务，规范项目结构，并快速生成符合团队规范的代码。 3.6.1.

3.6Angular CLI 高级应用

3.6 Angular CLI 高级应用

Angular CLI (Command Line Interface) 不仅是创建和管理 Angular 项目的基础工具，还提供了许多高级功能，可以显著提高开发效率、优化项目结构和构建过程。本章节将深入探讨 Angular CLI 的高级应用，包括自定义 schematics、构建优化、环境变量管理和第三方库集成。

3.6.1 自定义 Schematics

Schematics 是 Angular CLI 中用于代码生成、转换和更新的工具。通过自定义 Schematics，我们可以自动化重复性的任务，规范项目结构，并快速生成符合团队规范的代码。

3.6.1.1 Schematics 基础

Schematics 本质上是 Node.js 函数，它接收一个抽象语法树 (AST) 并对其进行转换。它使用 Tree 对象来表示文件系统，并提供了一系列 API 来读取、创建、修改和删除文件。

3.6.1.2 创建自定义 Schematic

  1. 安装 Schematics CLI:

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

  2. 创建 Schematic 项目:

    schematics blank my-custom-schematic
cd my-custom-schematic
npm install
​

  3. 修改 src/my-custom-schematic/index.ts:

    import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
export function myCustomSchematic(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.txt', `Hello, ${_options.name}!`);
    return tree;
  };
}
​

  4. 修改 src/my-custom-schematic/schema.json:

    {
  "$schema": "http://json-schema.org/draft-07/schema",
  "id": "MyCustomSchematic",
  "title": "My Custom Schematic",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name to say hello to."
    }
  },
  "required": ["name"]
}
​

  5. 构建 Schematic:

    npm run build
​

  6. 测试 Schematic:

    schematics .:my-custom-schematic --name="World" --dry-run=false
​

    这条命令会在当前目录下创建一个 hello.txt 文件，内容为 "Hello, World!"。

3.6.1.3 高级 Schematics 应用

Schematics 可以执行更复杂的操作，例如：

  • 读取和修改现有文件: 可以使用 tree.read() 和 tree.overwrite() 方法来读取和修改现有文件。

  • 使用模板: 可以使用 template() 方法来基于模板文件生成代码。

  • 更新 Angular 项目: 可以使用 @schematics/angular 包提供的工具来更新 Angular 项目的依赖项、路由等。

示例：创建一个用于生成 Service 的 Schematic

import { Rule, SchematicContext, Tree, apply, url, applyTemplates, move, mergeWith, MergeStrategy } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';
export function service(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const templateSource = apply(url('./files'), [
      applyTemplates({
        classify: strings.classify,
        dasherize: strings.dasherize,
        name: _options.name
      }),
      move(_options.path)
    ]);
    return mergeWith(templateSource, MergeStrategy.Overwrite);
  };
}
​

这个 Schematic 使用 url('./files') 指向一个包含模板文件的目录，然后使用 applyTemplates 将模板文件中的变量替换为实际值，最后使用 move 将生成的文件移动到指定目录。

3.6.1.4 Schematic 工作流图

graph TD A[触发 Schematic 命令] --> B(读取 schema.json); B --> C{参数验证}; C -- 验证通过 --> D(执行 index.ts 中的 Rule); D --> E{Tree 对象操作}; E -- 创建/修改/删除文件 --> F(更新文件系统); F --> G[完成]; C -- 验证失败 --> H[报错];

3.6.2 构建优化

Angular CLI 提供了多种构建优化选项，可以减小应用体积、提高加载速度。

3.6.2.1 生产环境构建

使用 --prod 标志进行生产环境构建，会自动启用一系列优化：

ng build --prod
​

这些优化包括：

  • Tree Shaking: 移除未使用的代码。

  • Minification: 压缩代码。

  • AOT (Ahead-of-Time) Compilation: 在构建时编译模板，减少浏览器端的编译负担。

  • Bundling: 将多个文件打包成更少的文件。

3.6.2.2 代码分割 (Code Splitting)

代码分割将应用拆分成多个小块，按需加载。这可以减少初始加载时间，提高用户体验。

Angular CLI 默认支持基于路由的代码分割。当使用 loadChildren 配置路由时，Angular CLI 会自动将该路由对应的模块拆分成一个独立的 chunk。

示例：配置基于路由的代码分割

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
​

当用户访问 /feature 路由时，才会加载 feature.module.ts 及其依赖项。

3.6.2.3 懒加载模块

使用 ng generate module my-module --route my-route --module app.module 命令可以快速生成一个懒加载模块，并自动配置路由。

3.6.2.4 使用 Webpack Bundle Analyzer

可以使用 webpack-bundle-analyzer 工具来分析构建后的 bundle，找出体积过大的模块，并进行优化。

  1. 安装 webpack-bundle-analyzer:

    npm install -D webpack-bundle-analyzer
​

  2. 修改 angular.json:

    在 architect.build.configurations.production 中添加以下配置：

    "budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": true,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
​

  3. 运行构建命令:

    ng build --prod --stats-json
​

  4. 分析 Bundle:

    webpack-bundle-analyzer dist/your-app/stats.json
​

    这会在浏览器中打开一个交互式界面，展示 bundle 的组成和大小。

3.6.3 环境变量管理

在不同的环境 (例如开发、测试、生产) 中，应用可能需要使用不同的配置参数。Angular CLI 提供了灵活的环境变量管理机制。

3.6.3.1 environments 文件夹

Angular CLI 默认会在 src 目录下创建一个 environments 文件夹，包含 environment.ts 和 environment.prod.ts 两个文件。

environment.ts 用于开发环境，environment.prod.ts 用于生产环境。

示例：定义环境变量

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};
// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};
​

3.6.3.2 使用环境变量

在代码中，可以通过 import { environment } from 'src/environments/environment'; 引入环境变量，并使用它们。

import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }
  getData() {
    return this.http.get(environment.apiUrl + '/data');
  }
}
​

3.6.3.3 自定义环境变量

可以通过修改 angular.json 文件来添加自定义环境变量。

// angular.json
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "customVariables": {
      "MY_CUSTOM_VARIABLE": "production_value"
    }
  },
  "development": {
     "customVariables": {
      "MY_CUSTOM_VARIABLE": "development_value"
    }
  }
}
​

然后，在代码中可以通过 process.env.MY_CUSTOM_VARIABLE 访问自定义环境变量。 注意：process.env 只能在构建过程中使用，不能在浏览器端直接访问。 如果需要在浏览器端使用自定义环境变量，可以使用 fileReplacements 将包含环境变量的文件替换为包含特定值的版本。

3.6.4 第三方库集成

Angular CLI 简化了第三方库的集成过程。

3.6.4.1 安装第三方库

使用 npm install 或 yarn add 命令安装第三方库。

npm install lodash
​

3.6.4.2 导入第三方库

在代码中，可以使用 import 语句导入第三方库。

import * as _ from 'lodash';
const myArray = [1, 2, 2, 3];
const uniqueArray = _.uniq(myArray);
console.log(uniqueArray); // [1, 2, 3]
​

3.6.4.3 使用 Angular CLI 提供的 Schematics

有些第三方库提供了 Angular CLI Schematics，可以自动配置 Angular 项目，简化集成过程。

例如，Angular Material 提供了 Schematics，可以自动安装 Angular Material 及其依赖项，并配置主题、组件等。

ng add @angular/material
​

3.6.5 总结

Angular CLI 的高级应用可以显著提高开发效率、优化项目结构和构建过程。通过自定义 Schematics，我们可以自动化重复性的任务，规范项目结构。通过构建优化，我们可以减小应用体积、提高加载速度。通过环境变量管理，我们可以轻松地在不同的环境中配置应用。通过第三方库集成，我们可以快速地使用各种强大的库。 掌握这些高级技巧，可以更好地利用 Angular CLI 构建高质量的 Angular 应用。

发布者: 作者: 转发
评论区 (0)
U
0/500