angular.json文件的示例分析

  介绍

小编给大家分享一下角。json文件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

在角CLI 6 +的版本后,原先的angular-cli.json就被换成了角。json,而其中里面的字段变化挺大了,如果不了解基本的组成,或者直接把老版本的代码复制到新版本的工作空间中,会导致一些很不友好的错误。

这种变化主要还是因为角CLI引入了monorepo(一个空间管理多个项目)的开发模式,即使用ng新出来的相当于一个大的工作空间,通过角。json配置来管理各种ng生成应用程序|库出来的项目或组件库。

其实这种模式优势还是很明显的,比如一个公司有多种管理平台或者产品时,使用这种方式可以统一各个项目的环境,各个项目间共用的组件也被统一维护起来,所有项目共用npm包以及打印稿配置。

monorepo下结构如:

 angular.json文件的示例分析

但是其实大多数人还是一个工作空间维护一个项目,所以这个在这里不那么重要,只是想说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的效果,可以配置如下:

angular.json文件的示例分析