【2019-10-16】Angular.json文件解析

Angular.json文件解析: 提供了全工做區級的配置和具體項目的默認配置，供Angular Cli中的構建工具和開發工具使用。此配置

所提供的路徑都是相對於工做區根目錄的

------ 6個option位於文件的頂級，用於配置工做空間 ---------

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

// JSON schema是一個容許咱們註解和驗證。JSON數據格式的工具，Angular CLi使用它來強化對於Angular Workspace schema的解釋說明。若沒有$schema屬性，則不會對angular.json文件的格式作檢驗

二、version: 1 // 說明該配置文件的版本

三、newProjectRoot // 用來建立新工程的位置，絕對路徑或者相對於工做區目錄的路徑

四、projects //對於工做區中的每一個項目（應用或庫）都會包含一個子分區，子分區是每一個項目的配置項

五、defaultProject // 當命令中沒有指定參數時，要使用的默認工程名。當你用ng new在新的工做區中建立應用時，該應用
就會一直做爲此工做區的默認項目，除非你在這裏修改它

六、schematics // 一組原理圖，用於制定ng generate 子命令在本工做空間中的默認選項

ng new 建立的這個初級應用位於工做區文件結構的頂層
其餘應用和庫位於工做區的projects文件夾中

------- 7個options 屬於projects：它還包括不少子分區 ---------

一、main: { // 應用名稱 --第一個是ng new時的應用名稱

二、projectType // 項目類型："application"或者"library"之一，應用能夠在瀏覽器中獨立運行，而庫則不行

三、schematics //一組原理圖，它能夠爲該項目自定義ng generate子命令的默認選項

四、root // 該項目的根文件夾，相對於工做區文件夾的路徑。初始應用的值爲空，由於它位於工做區的頂層

五、sourceRoot //該項目源文件的根文件夾

六、prefix //Angular所生成的選擇器的前綴字符串。能夠自定義它，以做爲應用或功能區的標識

七、architect // 爲本項目的各個構建目標配置默認值

}

------ schematics 屬於projects，其具體說明以下：--------

腳手架庫會定義如何藉助建立、修改、重構或移動文件和代碼等操做來生成或轉換某個項目。每一個原理圖定義了一些規則，以操做
一個被稱爲文件樹的虛擬文件系統

Angular CLI 使用原理圖來生成和修改Angular項目及部件
一、Angular會提供一組用於CLI的原理圖。當ng add命令向項目添加某個庫時，就會運行原理圖。na generate命令則會運行
原理圖，來建立應用，庫和Angular代碼塊

二、公共庫的開發者能夠建立原理圖，來讓CLI生成他們自已發佈的庫

Angular生成器的原理圖是一組用來修改項目的指南，包括添加新文件或修改現有文件。默認狀況下，Angular CLI的ng generate子命令會從@angular包中收集原理圖。能夠用schematic-package:schematic-name的格式爲子命令指定原理圖名稱，好比，用來生成
組件的原理圖名叫@angular: component

供CLI生成項目及部件的默認原理圖的JSOM模式（schematic）位於@schematic/angular包中。這個模式描述了CLI ng generate子命令的每一個選項，它們會顯示在 --help的輸出中。

這個模式中的每一個字段都對應於CLI子命令選項的參數取值範圍和默認值。
你能夠修改此命名空間的模式文件，來爲某個子命令選項指定另外的默認值

eg :修改ng generate component 時自動建立的樣式文件類型，將原來默認的css改成scss

"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}

 

---------architect 項目工具的配置選項 具體簡介 --------------

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

一、build --節會爲ng build 命令的選項配置默認值,下面是build中的options:

builder -- 用於構建此目標的構建工具的npm 包，默認爲 @angular-devkit/build-angular:browser，它使用的是 webpack 打包器。

options -- 本節包含構建選項的默認值，當沒有指定命名的備用配置時使用，備用的構建選項包含：

①outputPath -- 編譯後的輸出目錄

②index -- the name of the index HTML --index.html文件路徑 （首頁文件）

③main -- the name of main entry-point field

④polyfills -- 用於實現瀏覽器並不支持的原生API的代碼

⑤tsConfig -- typescript 配置文件路徑

⑥aot --預編譯 ，默認值是false

⑦assets -- 一個對象,包含一些用於添加到項目的全局上下文中的靜態文件路徑。它的默認路徑指向項目的圖標文件及項目的assets文件 夾 ，構建時會複製到outPath指定的目錄， for example
{
"src/client/main/src/favicon.ico",
"src/client/main/src/assets"
}
⑧styles -- 一個對象，包含一些要添加到項目全局上下文中的樣式文件。Angular CLI支持CSS導入和全部主要的CSS預處理器：
sass/scss , less 和stylus //構建時會打包進來

⑨scripts -- 一個對象，包含一些JavaScript腳本文件，用於添加到項目的全局上下文中。這些腳本的加載方式和在index.html的
<script>標籤中添加是徹底同樣的 //構建時會打包進來

configurations -- 本節定義並命名針對不一樣目標的備用配置。它爲每一個命名配置都包含一節，用於設置該目標環境的默認選項：

默認狀況下，會定義一個production配置，//打包命令-–prod()的配置。這裏的production配置會設置

各類默認值來優化應用，好比打包文件，最小化多餘空格，移除註釋和死代碼，以及重寫代碼以使用簡短的名字

①fileReplacements --一個對象，包含一些文件及其編譯時替代品 ， for example

"fileReplacements": [
{
"replace": "src/client/main/src/environments/environment.ts",
"with": "src/client/main/src/environments/environment.prod.ts"
}
] //將環境信息替換成正式環境

②optimization : true //啓動優化 開發環境配置是false

③outputHashing ：all // 開發環境配置是media

④sourceMap : false // 開發環境配置是true

⑤extractCss :true // 開發環境配置是false，true表示生成的CSS文件，false表示全局CSS輸出到js文件

⑥namedChunks : false // 開發環境配置是true

⑦aot : true // 開發環境配置是false

⑧extractLicenses :true

⑨vendorChunk: false

⑩buildOptimizer:true //Enables @angular-devkit/build-optimizer optimizations when using the 'aot' option.

⑪budgets -- 所有或部分應用的默認尺寸 預算的類型和閾值。當構建的輸出達到或超過閾值大小時，你能夠將

構建器配置爲報告警告或錯誤 ， for examples

"budgets": [
{
"type": "initial", (初始應用的大小) // 限制的類型，有效值還包含：bundle(特定包的大小), allScript(全部腳本的整體大小)，all (整個應用的總大小)， anyScript (任何一個腳本的大小), any（任何一個文件的大小）
「name」 //要限制的包的名字（當type=bundle時），
「baseline」 //一個表示基準大小的絕對值，用做比例值的基數
"maximumWarning": "2mb", //當大小超過這個閾值百分比時給出警告
"maximumError": "5mb" //當大小超過這個閾值百分比時報錯
「minimumWarning」 // 當大小小於基線的這個閾值百分比時給出警告。
「minimumError」// 當大小小於基線的這個閾值百分比時報錯。
「warning 」 // 當大小達到或小於基線的這個閾值百分比時都給出警告。
「error」 //當大小達到或小於基線的這個閾值百分比時都報錯。
}
]

二、serve

本節會覆蓋構建默認值，併爲 ng serve 命令提供額外的服務器默認值。除了 ng build 命令的可用選項以外，還增長了與開發服務器有關的選項。for example

"options": {
"browserTarget": "main:build",
"proxyConfig": "src/client/proxy.conf.json"
}

proxyConfig // 能夠更改默認的端口4200

proxy.config.json文件內容：

{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}

//上面內容將 http://localhost:4200/api 的調用都轉給運行在 http://localhost:3000/api 上的服務器

若是須要將多個條目代理到同一目標，請在proxyConfig.js中定義配置，而不是在proxy.conf.json中， for example

proxyConfig.js內容以下

const PROXY_CONFIG = [
{
context: [
"/api",
"/many",
"/endpoints"
],
target: "http://localhost:3000",
secure: false
}
]

module.exports = PROXY_CONFIG;

而且將options中的"proxyConfig": 改成proxyConfig.js路徑

三、e2e

覆蓋了構建選項默認值，以便用 ng e2e 命令構建端到端測試應用。

四、test

覆蓋測試時的構建選項默認值，併爲 ng test 命令提供額外的默認值以供運行測試。
五、lint
爲 ng lint 命令配置了默認值，用於對項目源文件進行代碼分析。 Angular 默認的 linting 工具爲 TSLint。

六、extract-i18n

ng xi18n 命令所用到的 ng-xi18n 工具選項配置了默認值，該命令用於從源代碼中提取帶標記的消息串，並輸出翻譯文件。

七、server

ng run <project>:server 命令建立帶服務器端渲染的 Universal 應用配置默認值。

八、app-shell

ng run <project>:app-shell 命令爲漸進式 Web 應用（PWA）配置建立應用外殼的默認值。