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

民富国强 發表於 2019-10-16 16:10:00

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）配置创建应用外壳的默认值。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
来源：https://www.cnblogs.com/QQ-lala/p/11686141.html

頁: [1]

琼殿技术论坛's Archiver

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