zoukankan      html  css  js  c++  java
  • angular.json简单解释

    Angular 工作空间 指的是 一个 由Angular CLI创建,并且能够包含多个项目 或者 由单一文件导出配置的库 的目录空间。

    angular.json的配置文件,这个文件是整个项目的概要,包含了 不同的环境,测试、代理、第三方资源 和 众多内置工具

    angular.json

    $schema

    JSON Schema 是一个允许我们注解和验证JSON数据格式的工具。Angular CLI使用它来强化对于Angular Workspace schema的解释说明。

    "$schema": "./node_modules/@angular/cli/lib/config/schema.json"
    

    version

    `version`属性 指明了Angular 工作空间 概要的版本。
    

    packageManager

    这个属性定义了Angular CLI使用的包管理工具,开执行命令,比如 `npm`,`yarn`.
    

    newProjectRoot

    这个属性定义了由CLI创建的新的内部应用和库放置的位置。默认值为`projects`
    

    projects

    这个属性包含了工作空间中所有项目的配置信息。下一级是多个项目
    

    项目名

    每一个项目的配置信息在下列属性中:

    schematics

    作为Angular DevKit的一部分,用来转换、创建 或者 更新项目开发的工作流工具。

    `schematics`属性 可以在工作空间的root level来配置Schematics packages的选项。
    

    假设我们要 保证 每一个组件用不同的默认设置 来创建。例如,使用默认 使用 OnPush作为检测策略,通过声明模块和导出组件。

    "schematics": {
      "@schematics/angular:component": {
        "changeDetection": "OnPush",
        "export": true
      },
      "@schematics/angular:class": {
              "skipTests": true
            },
    }
    

    root

    `root`属性 指定了项目文件的根文件夹,可能为空,但是它指定了一个特定的文件夹。
    

    sourceRoot

    `sourceRoot`指定了项目源文件位置
    

    projectType

    `projectType`属性表明了 项目的状态 是 `appliaction`还是`library`。
    

    prefix

    `prefix`属性  当CLI创建 `component`或者`directive`时,使用该属性 来区别他们。
    

    schematics

    `schematics`属性配置 `Schematics packages`
    

    architect

    任何项目都可以自定义 自动化命令,如 打包、serve、test、lint等等。这些都是基于prebuilt builders ,叫做Architect Targets。
    
    
    "angular-cli-workspace-example": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {},
          "configurations": {}
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {},
          "configurations": {}
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {}
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {}
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {}
        }
      }
    }
    

    defaultProject

    `defaultProject`属性 当使用CLI命令时,`defaultProject`代表显示的名字。
    

    具体

    // https://segmentfault.com/a/1190000016292354
    // https://angular.cn/guide/workspace-config
    {
      // 注解和验证JSON数据格式的工具
      // 比如可以自动填充属性或属性值
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      // 用来创建析工程的位置。绝对路径或相对于工作区目录的路径
      // 使用 ng generate application myDemo, 就会在 angular-dave/projects 目录下生成 myDemo 项目
      "newProjectRoot": "projects",
      // 这个属性包含了工作空间中所有项目的配置信息
      // 如果如上生成 myDemo, 那么在这里还有与 angular-dave 同一层级的 myDemo 的配置
      "projects": {
        "angular-dave": {
          // 该属性有 application 和 library 两种选择
          "projectType": "application",
          "schematics": {
            // 在项目级别统一进行配置
            // 比如在这里,配置了所有的 component 都使用 scss
            // 可试着查看其它的配置项,因为有 $schema, 会帮你自动补全相关属性
            "@schematics/angular:component": {
              "style": "scss"
            }
          },
          // 指定了项目文件的根文件夹,可能为空,但是它指定了一个特定的文件夹
          // 如果如上生成 myDemo, 那么 myDemo 的如下几个属性值路径会有所不同
          "root": "",
          "sourceRoot": "src",
          // 当CLI创建 `component`或者`directive`时,使用该属性 来区别他们
          "prefix": "app",
          // 为本项目的各个构建器目标配置默认值
          "architect": {
            // 为 ng build 命令的选项配置默认值
            "build": {
              // 每个目标对象都指定了该目标的 builder,它是 architect (建筑师)所运行工具的 npm 包
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/angular-dave",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "aot": false,
                // 包含一些用于添加到项目的全局上下文中的静态文件路径
                // 每个 build 目标配置都可以包含一个 assets 数组,它列出了当你构建项目时要复制的文件或文件夹。
                // 默认情况下,会复制 src/assets/ 文件夹和 src/favicon.ico
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                // 包含一些要添加到项目全局上下文中的样式文件(即全局样式)
                "styles": [
                  "src/styles.scss"
                ],
                // 包含一些 JavaScript 脚本文件,用于添加到项目的全局上下文中。
                // 这些脚本的加载方式和在 index.html 的 <script> 标签中添加是完全一样的。
                "scripts": []
              },
              // configurations 部分可以为目标命名并指定备用配置
              "configurations": {
                // you can use that configuration by specifying the --configuration="production" or the --prod="true" option.
                // ng build --prod=true|false   
                // Shorthand for "--configuration=production".
                // When true, sets the build configuration to the production target.
                // By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
                "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"
                    },
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "6kb",
                      "maximumError": "10kb"
                    }
                  ]
                }
              }
            },
            // 覆盖构建默认值,并为 ng serve 命令提供额外的服务器默认值
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": {
                "browserTarget": "angular-dave:build"
              },
              "configurations": {
                "production": {
                  "browserTarget": "angular-dave:build:production"
                }
              }
            },
            // 为 ng xi18n 命令所用到的 ng-xi18n 工具选项配置了默认值
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "angular-dave:build"
              }
            },
            // 覆盖测试时的构建选项默认值,并为 ng test 命令提供额外的默认值以供运行测试
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.spec.json",
                "karmaConfig": "karma.conf.js",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.scss"
                ],
                "scripts": []
              }
            },
            // 为 ng lint 命令配置了默认值,用于对项目源文件进行代码分析
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "tsconfig.app.json",
                  "tsconfig.spec.json",
                  "e2e/tsconfig.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            },
            // 覆盖了构建选项默认值,以便用 ng e2e 命令构建端到端测试应用
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "angular-dave:serve"
              },
              "configurations": {
                "production": {
                  "devServerTarget": "angular-dave:serve:production"
                }
              }
            }
          }
        }
      },
      "defaultProject": "angular-dave"
    }
    
    
    由于无法解释的神圣旨意,我们徒然地到处找你;你就是孤独,你就是神秘,比恒河或者日落还要遥远。。。。。。
  • 相关阅读:
    同一个类生成的对象去重
    关于公众号JavaTokings侵权声明
    消息中间件ActiveMQ使用详解
    重定向和转发的分析与理解
    Oracle SqlPlus导出查询结果
    Sql查询一个列对应多个列
    Jsp标签字典开发_基于Spring+Hibernate
    Oracle数据库导入导出简单备份
    JAVA WEB接口开发简述
    NTKO在线office控件使用实例
  • 原文地址:https://www.cnblogs.com/momoli/p/13900813.html
Copyright © 2011-2022 走看看