小编给大家分享一下角。json文件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
在角CLI 6 +的版本后,原先的angular-cli.json就被换成了角。json,而其中里面的字段变化挺大了,如果不了解基本的组成,或者直接把老版本的代码复制到新版本的工作空间中,会导致一些很不友好的错误。
这种变化主要还是因为角CLI引入了monorepo(一个空间管理多个项目)的开发模式,即使用ng新出来的相当于一个大的工作空间,通过角。json配置来管理各种ng生成应用程序|库出来的项目或组件库。
其实这种模式优势还是很明显的,比如一个公司有多种管理平台或者产品时,使用这种方式可以统一各个项目的环境,各个项目间共用的组件也被统一维护起来,所有项目共用npm包以及打印稿配置。
monorepo下结构如:
但是其实大多数人还是一个工作空间维护一个项目,所以这个在这里不那么重要,只是想说json文件的改变是为了新的模式而已。
<强>角。json的部分字段强>
当你ng新一个工作空间时,默认会在根目录创建一个项目以及对应e2e项目。初始的角。json结构如下(省略的部分的配置代码)
{ ,,,“schema"美元;:,“。/node_modules/@angular/cli/lib/config/schema.json", ,,,“version":, 1, ,,,“newProjectRoot":,“projects" ,,,“projects":, { ,,,,,,,“xxxx":, { ,,,,,,,,,,,“root":,““, ,,,,,,,,,,,“sourceRoot":,“src" ,,,,,,,,,,,“projectType":,“application" ,,,,,,,,,,,“prefix":,“app" ,,,,,,,,,,,“schematics":, {}, ,,,,,,,,,,,“architect":, {} ,,,,,,,} ,,,}, ,,,“defaultProject":,“xxxx" }
这是部分的配置属性,我按照顺序简单做个记录,以后也好查阅。
<强> $ schema 强>
指向一个JSON模式文件,这个文件描述了角。json所有的字段以及约束。
其实可以比作一个有“类型提示“功能文件,只要支持了这个功能的IDE或编辑器,在书写角。json文件时便会给出相应的提示。
<强>版本强>
设置版本
<强> newProjectRoot 强>
新建项目所在的路径。
当使用ng生成应用程序|库创建一个新的项目时,会自动装配到设定的newProjectRoot目录下
<强>项目强>
放置所有项目的配置。其中一个项目为一个子项,如xxxx为一个项目,在创建时自动生成。
{ ,,,“projects":, { ,,,,,,,“xxxx":, { ,,,,,,,,,,,“root":,““, ,,,,,,,,,,,“sourceRoot":,“src" ,,,,,,,,,,,“projectType":,“application" ,,,,,,,,,,,“prefix":,“app" ,,,,,,,,,,,“schematics":, {}, ,,,,,,,,,,,“architect":, {} ,,,,,,,} ,,,} }
在一个单独的配置中,可以通过灵活的配置实现一些自动化操作还有使用CLI内置的一些指令。
<强>根强>
代表项目的“根目录”,也就是项目所在的位置,或者说项目源码的父级目录。项目的根目录包含了一些特定的配置。
<强> sourceRoot 强>
项目源码所在的目录,通常默认使用src目录。
<强> projectType 强>
标示这个项目是应用程序还是图书馆
<强>前缀强>
使用ng生成组件|指令生成组件或者指令时默认的选择器前缀,通常我们使用命令创建的组件或指令都是app-xxx格式,我们可以手动在这里改动,使整个项目生效。
<强>图表强>
CLI中生成组件,指令,模块等文件的指令是使用@angular-devkit/图表实现的,这些指令通常带有一些快捷配置,比如一个生成组件的命令:ng g c——规范=false styleext=scss,这条命令可以直接生成一个不带测试文件,使用scss为样式文件的组件。如果每次都要手动输入这些配置就会显得麻烦,所以angular.json提供了图表属性来统一设置一些生成类的命令配置。
这里的图表是针对单个项目来的。整个角。json也有此字段,默认生效于所有项目。
CLI预设了几组选项,我们可以针对不同的选项进行配置:
@schematics/角:组件
@schematics/角:类
@schematics/角:指令
@schematics/角:警卫队
@schematics/角:模块
@schematics/角:管
@schematics/角:服务
拿组件举例,如果要实现统一ng g c——规范=false styleext=scss的效果,可以配置如下: