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`表明顯示的名字。

以上就是本人作的一個簡單總結，如如有不對的地方，請留言，謝謝！