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


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

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

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

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

// JSON schema是一個允 

許我們注解和驗證。JSON數據格式的工具,Angular CLi使用它來強化對於Angular Workspace schema的解釋說明。若沒有$schema屬性,則不會對angular.json文件的格式做檢驗

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

3、newProjectRoot // 用來創建新工程的位置,絕對路徑或者相對於工作區目錄的路徑

4、projects //對於工作區中的每個項目(應用或庫)都會包含一個子分區,子分區是每個項目的配置項

5、defaultProject // 當命令中沒有指定參數時,要使用的默認工程名。當你用ng new在新的工作區中創建應用時,該應用
就會一直作為此工作區的默認項目,除非你在這里修改它

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

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

------- 7個options 屬於projects:它還包括很多子分區 ---------

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

2、projectType // 項目類型:"application"或者"library"之一,應用可以在瀏覽器中獨立運行,而庫則不行

3、schematics //一組原理圖,它可以為該項目自定義ng generate子命令的默認選項

4、root // 該項目的根文件夾,相對於工作區文件夾的路徑。初始應用的值為空,因為它位於工作區的頂層

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

6、prefix //Angular所生成的選擇器的前綴字符串。可以自定義它,以作為應用或功能區的標識

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

}

------ schematics 屬於projects,其具體說明如下:--------

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

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

2、公共庫的開發者可以創建原理圖,來讓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":{}
}

1、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” //當大小達到或小於基線的這個閾值百分比時都報錯。
}
]

2、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路徑


3、e2e

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

4、test

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

6、extract-i18n

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

7、server

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

8、app-shell

ng run <project>:app-shell 命令為漸進式 Web 應用(PWA)配置創建應用外殼的默認值。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM