什么是 Angular 的构建目标 (Build Targets)？

推荐答案

在 Angular 中，构建目标（Build Targets）是指在 angular.json 配置文件中定义的用于构建和部署应用程序的不同配置。每个构建目标通常对应一个特定的环境或用途，例如开发环境、生产环境或测试环境。构建目标可以指定不同的构建选项，如优化级别、源映射、文件输出路径等。

本题详细解读

1. 构建目标的定义

构建目标是在 angular.json 文件中通过 architect 部分定义的。每个项目可以包含多个构建目标，每个目标都有其特定的配置。常见的构建目标包括 build、serve、test 和 lint。

2. 构建目标的配置

在 angular.json 文件中，构建目标的配置通常如下所示：

// www.javascriptcn.com code example
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/my-app",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "src/tsconfig.app.json",
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "src/styles.css"
      ],
      "scripts": []
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
      }
    }
  }
}

3. 构建目标的使用

在命令行中，可以通过指定构建目标来执行不同的构建任务。例如，使用以下命令可以构建生产环境的应用程序：

ng build --configuration=production

4. 构建目标的优势

• 灵活性：可以根据不同的环境或需求定义多个构建目标，每个目标可以有不同的配置。
• 可维护性：通过集中管理构建配置，减少了代码重复，提高了项目的可维护性。
• 自动化：构建目标可以与 CI/CD 工具集成，实现自动化构建和部署。

5. 常见的构建目标

• build：用于构建应用程序。
• serve：用于启动开发服务器。
• test：用于运行单元测试。
• lint：用于代码风格检查。

通过合理配置和使用构建目标，可以显著提高 Angular 项目的开发效率和部署质量。