如何配置 Angular 的构建目标？

推荐答案

在 Angular 项目中，可以通过修改 angular.json 文件来配置构建目标。以下是一个示例配置：

// www.javascriptcn.com code example
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": true,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true
          },
          "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "development": {
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": true,
              "extractCss": false,
              "namedChunks": true,
              "aot": false,
              "extractLicenses": false,
              "vendorChunk": true,
              "buildOptimizer": false
            }
          }
        }
      }
    }
  }
}

本题详细解读

1. angular.json 文件结构

angular.json 是 Angular 项目的配置文件，用于定义项目的构建、测试和部署选项。它包含一个 projects 对象，每个项目都有一个 architect 部分，其中定义了各种构建目标。

2. 构建目标配置

在 architect 部分，build 目标用于配置项目的构建过程。options 对象包含了默认的构建选项，而 configurations 对象则允许你为不同的环境（如 production 和 development）定义不同的构建配置。

3. 常用配置选项

• outputPath: 指定构建输出的目录。
• index: 指定应用的入口 HTML 文件。
• main: 指定应用的入口 TypeScript 文件。
• polyfills: 指定 polyfills 文件。
• tsConfig: 指定 TypeScript 配置文件。
• assets: 指定需要复制到输出目录的静态资源。
• styles: 指定全局样式文件。
• scripts: 指定全局脚本文件。
• stylePreprocessorOptions: 配置样式预处理器的选项。
• optimization: 是否启用优化。
• outputHashing: 输出文件的哈希策略。
• sourceMap: 是否生成源映射文件。
• extractCss: 是否将 CSS 提取到单独的文件中。
• namedChunks: 是否使用命名块。
• aot: 是否启用 AOT 编译。
• extractLicenses: 是否提取许可证文件。
• vendorChunk: 是否生成单独的 vendor 块。
• buildOptimizer: 是否启用构建优化器。
• budgets: 定义性能预算，用于监控构建输出的大小。

4. 环境配置

在 configurations 中，可以为不同的环境定义不同的构建配置。例如，production 配置通常会启用优化、禁用源映射，并替换环境文件。

5. 使用构建配置

在命令行中，可以使用 --configuration 参数来指定使用的构建配置。例如：

ng build --configuration production

这将使用 production 配置来构建项目。