如何配置 Angular 的构建目标?

推荐答案

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

-- -------------------- ---- -------
-
  ----------- -
    --------- -
      ------------ -
        -------- -
          ---------- -
            ------------- --------------
            -------- -----------------
            ------- --------------
            ------------ -------------------
            ----------- ------------------------
            --------- -
              -------------
              -----------------
            --
            --------- -
              ----------------
            --
            ---------- ---
            --------------------------- -
              --------------- -
                ------------
              -
            --
            --------------- -----
            ---------------- ------
            ------------ -----
            ------------- -----
            -------------- ------
            ------ -----
            ------------------ -----
            -------------- ------
            ----------------- ----
          --
          ----------------- -
            ------------- -
              ------------------- -
                -
                  ---------- ----------------------------------
                  ------- --------------------------------------
                -
              --
              --------------- -----
              ---------------- ------
              ------------ ------
              ------------- -----
              -------------- ------
              ------ -----
              ------------------ -----
              -------------- ------
              ----------------- -----
              ---------- -
                -
                  ------- ----------
                  ----------------- ------
                  --------------- -----
                -
              -
            --
            -------------- -
              --------------- ------
              ---------------- -------
              ------------ -----
              ------------- ------
              -------------- -----
              ------ ------
              ------------------ ------
              -------------- -----
              ----------------- -----
            -
          -
        -
      -
    -
  -
-

本题详细解读

1. angular.json 文件结构

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

2. 构建目标配置

architect 部分,build 目标用于配置项目的构建过程。options 对象包含了默认的构建选项,而 configurations 对象则允许你为不同的环境(如 productiondevelopment)定义不同的构建配置。

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 参数来指定使用的构建配置。例如:

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

纠错
反馈