Angular工作区配置- angular.json参数配置详解以及多项目配置

Angular 工作区指的是由 Angular CLI 创建的应用或库，如果你的项目包含一些子项目可以在angular.json 的projects里面配置多个项目

JSON 的总体结构

下列属性位于文件的顶层，用于配置工作区。CLI 在工作区级的默认设置可以被项目级的设置所覆盖，而项目级的设置可以被命令行中的设置所覆盖。

• $schema：用于验证 JSON 数据格式
• version：该配置文件的版本（注意非项目版本）。
• newProjectRoot：用来创建新工程的位置，当使用 ng generate application/library 创建新的项目时，会自动放到该目录下
• defaultProject：默认值为用户执行 ng new projectName 时候的 projectName 的名称
  如果工作区存在多项目，defaultProject最好指定一下，不然在每个项目 ng serve 或 ng build 的时候需要指定项目名称 ng serve --project=projectName

• projects：对于工作区中的每个项目（应用或库）的配置项，key为项目的名称，value为具体的配置项。通过 ng new projectName 命令创建的初始应用会列在 projects 目录下

  "projects": {
    "projectName": {
      ...
    }
    ...
  }

PROJECTS-项目配置选项

每个项目的 projects:<project_name> 下都有以下顶层配置属性。

"projects": {
  "projectName1": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {}
  },
  "projectName2": {
    ...
  }
}

• root：项目的根文件夹，相对于工作区文件夹的路径。初始应用的值为空，因为它位于工作区的顶层。
• sourceRoot：该项目源文件的根文件夹
• projectType："application" 或 "library" ，application可以在浏览器中独立运行，而library则不行，library 是一个可以供很多应用共享的模块
• prefix：组件或指令的前缀。可以自定义它，以作为应用或功能区的标识。
• architect：项目构建器的配置选项

• schematics：用于定制 ng generate 子命令的默认选项, 例如：

  "schematics": {
     "@schematics/angular:component": {
        "style": "scss",
        "changeDetection": "OnPush"
     },
     "@schematics/angular:directive": {
        "skipTests": true
     }
  }

  表示执行 ng generate component 创建的组件默认使用 scss 为css语言, 使用 OnPush 作为检测策略。执行 ng generate directive 的时候不创建 spec 文件，也可以通过命令加上 ng generate directive --skipTests=true 实现。

Architect配置选项

里面配置的是自动化命令，执行 ng run 命令可以运行一些预定义目标，并可以定义自己的目标

"architect": {
  "build": { },
  "serve": { },
  "e2e" : { },
  "test": { },
  "lint": { },
  "extract-i18n": { },
  "server": { },
  "app-shell": { }
}

• architect/build 为 ng build 命令的选项配置默认值
• architect/serve 会覆盖构建默认值，并为 ng serve 命令提供额外的服务器默认值。除了 ng build 命令的可用选项之外，还增加了与开发服务器有关的选项。
• 就以以上两个为例，具体请参考https://angular.cn/guide/work...

每个构建目标都具有下列属性：

• builder：用于构建此目标的构建工具的 npm 包。默认ng build 为 @angular-devkit/build-angular:browser, ng serve 为 @angular-devkit/build-angular:dev-server

• options：针对当前builder所需要的配置项，不同的构件工具会有不同的配置,默认选项如下：

  "options": {
    "outputPath": "dist/projectName", // 打包后输出文件路径
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true, // 是否aot编译
    "assets": [ // 静态资源路径
      "src/favicon.ico",
      "src/assets"
      // 也可以包含一个对象
      {
         "glob": "**/*", // 通配符以input 路径作为基准
         "input": "src/assets/", // 或者 "./node_modules/some-package/images"
         "output": "/assets/",
         "ignore": ["**/*.svg"], // 要排除的 glob 列表
      }
    ],
    "styles": [ // 引入的css路径，如果想引入bootstrap可以在这里引入css
      "src/styles.scss",
      //也可以是对象
      {
        "input": "src/external-module/styles.scss",
        "inject": false,  // 是否注入到index.html
        "bundleName": "external-module" // 命名捆绑包
      }
    ],
    "scripts": [], // 引入的js路径，jquery可以这里引入, 和styles一样也可以包含一个对象
    "stylePreprocessorOptions": {
       "includePaths": [
          "src/style-paths/variables.scss"
       ]
    },
    // 可以从项目中的任何位置导入variables.scss，而无需相对路径：
    // 之前@import '../style-paths/variables'; 现在@import 'variables';
    "customWebpackConfig": {
      "path": "./webpack.config.js" // 扩展webpack脚本，现在可以在 webpack.config.js 中开发webpack
    },
    "allowedCommonJsDependencies": ["lodash"]
    //如果 Angular CLI 检测到你的浏览器端应用依赖了 CommonJS 模块，就会发出警告。 要禁用这些警告，你可以把这些 CommonJS 模块的名字添加到allowedCommonJsDependencies
  }
  

  options也可以是这样

  "options": {
     "browserTarget": "projectName:build"
  }

  有了browserTarget属性，其他的都不需要啦，如果在 projects > projectName > architect > serve > options 中加上这个则表示我使用 projects > projectName > architect > build> options 中的配置，就是说如果 build 和 serve 配置是一样的只需要加上这个，不需要再重新定义配置了

• configurations：可用于设置目标不同环境的配置项, 例如：

  "configurations": {
    "dev": {},
    "quality" : {},
    "preprod" : {},
    "product" : {}
  }

  如果你在build下面的configurations设置了多个环境， 执行 ng build 须加上 --configuration=product/dev/preprod 指定环境
  每个环境我们又可以进行如下设置：

  "fileReplacements": [
     {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.product.ts" 
        //这里可以指定不同环境项目中不同的配置，例如可以定义baseUrl
     }
  ],
  "optimization": true, //可以是布尔值或对象
  "outputHashing": "all", //打包文件加上hash值
  "sourceMap": false, // 生成sourceMap文件，会使打包变慢可以是布尔值或对象
  "extractCss": true, //从全局样式中将css提取到css文件而不是js文件中。
  "namedChunks": false,  // 使用 chunkName来替换chunkId,保持缓存的能力
  "extractLicenses": true, //用于管理第三方插件的许可协议，将所有许可证提取到一个单独的文件中
  "vendorChunk": false, // 是否分离第三方插件
  "buildOptimizer": true, // 是否优化编译器
  "budgets": [
     {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
     },
     {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
     }
  ]

  也可以这样

  "configurations": {
     "dev": {
        "browserTarget": "upgrade:build:dev"//同以上browserTarget用法
     }
  }

  budgets详解

  • type：有效值为：bundle（特定包的大小），initial（应用的初始大小），allScript（所有脚本的总大小），all（整个应用的总大小），anyComponentStyle（任何一个组件样式文件的大小）。anyScript（任何一个脚本的大小），any （任何一个文件的大小）。
  • name：要限制的包的名字（当 type=bundle 时）。
  • baseline ：一个表示基准大小的绝对值，用做比例值的基数。
  • maximumWarning：当大小超过基线的这个阈值百分比或具体的大小时给出警告。
  • maximumError：当大小超过基线的这个阈值百分比或具体的大小时报错。
  • minimumWarning：当大小小于基线的这个阈值百分比或具体的大小时给出警告。
  • minimumError：当大小小于基线的这个阈值百分比或具体的大小时报错。
  • warning：当大小达到或小于基线的这个阈值百分比时都给出警告。
  • error：当大小达到或小于基线的这个阈值百分比时都报错。

以上是我对 angular.json 的参数的一些理解和分享，如有不对的地方欢迎指正和讨论。码字不易如果觉得写得不错，留下赞再走呗