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 的参数的一些了解和分享，如有不对的中央欢送斧正和探讨。码字不易如果感觉写得不错，留下赞再走呗