angular.json参数详解

最近，在理解angular.json这个项目文件时，发现网上还没有类似资料，搜索了一些外文资料，在这里翻译总结下。

Angular CLI 6的发布，对之前进行了很多优化。在这篇文章中，我们将来理解Angular工作控件的概念和详细说明新的angular.json文件

自从Angular CLI v6-RC2发布之后,Angular CLI创建的项目架构已经发生变化。你可能已经注意到其中的变化，原有的 .angular-cli.json 已经被 angular.json 取代。

让我们来展示一些变化的地方来理解做了哪些优化：

什么是Angular工作空间

当我们使用Angular CLI来生成项目的时候，我们很有可能会看到angular-cli.json这个文件。

众所周知，这个文件是整个项目的概要，包含了 不同的环境，测试、代理、第三方资源 和 众多内置工具。

我们会遇到在一个单独的文件目录中，来管理多应用程序，尽管可行，却并不理想。我们并不能方便地共享和复用公共的代码，除此之外，没有npm scripts的协助，也不能为每一个应用配置build过程。

现在通过Angular CLI6，前述两种情况都可以实现！😍

现在我们来定义一个新的术语：

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

实际上，从现在开始，Angular CLI项目开始叫做 Angular 工作空间。

仅仅改变一个名字是没有意义的，最重要的一步在于 重构 CLI的内核，它现在被切分成几部分，在Schematics的顶部。

在这样一个根工作空间中，出现一个叫做 angular.json的配置文件（而不再是angular-cli.json）。

现在我们即将做的就是浏览一下这个概要，并且一步一步理解它。

浏览工作空间文件

我们工作ng new angular-cli-workspace-example来创建一个简单的工作空间。

以下是我们初始化的配置文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-cli-workspace-example": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    },
    "angular-cli-workspace-example-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {},
        "lint": {}
      }
    }
  },
  "defaultProject": "angular-cli-workspace-example"
}

为了简化案例，上述中的内容被简化过。schematics和cli属性默认没有加上，但是我们还是会讲解。

是时候开始这个概要了！🕵️

$schema

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

上述演示了JSON Schema自动填充和验证的功能

`$schema`属性 关联了JSON Schema在Angular CLI中的实施文件。

version

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

schematics

大家或多或少，都听说过 Schematics。作为Angular DevKit的一部分，用来转换、创建 或者 更新项目开发的工作流工具。

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

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

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

注意 这个会在工作空间的任何 level 进行应用。

cli

cli属性定义Angular CLI的配置。

以下是具体的配置属性：

packageManager

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

newProjectRoot

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

projects

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

通常，在主项目之外还有另外一个项目-e2e测试的项目。

{
  "projects": {
    "angular-cli-workspace-example": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {}
    },
    "angular-cli-workspace-example-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {}
    }
  }
}

事实上，每当通过Angular CLI创建内部应用的时候，都会有e2e项目被初始化。

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

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`代表显示的名字。

以上就是本人做的一个简单总结，如若有不对的地方，请留言，谢谢！