简单说说angular.json文件的使用


Posted in Javascript onOctober 29, 2018

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

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

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

monorepo下结构如:

简单说说angular.json文件的使用

但是其实大多数人还是一个工作空间维护一个项目,所以这个在这里不那么重要,只是想说json文件的改变是为了新的模式而已。

Angular.json的部分字段

当你ng new一个工作空间时,默认会在根目录创建一个项目以及对应e2e项目。初始的angular.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 Schema 文件,这个文件描述了angular.json所有的字段以及约束。

其实可以比作一个有“类型提示”功能文件,只要支持了这个功能的 IDE 或编辑器,在书写angular.json文件时便会给出相应的提示。

version

设置版本

newProjectRoot

新建项目所在的路径。

当使用ng generate application | library创建一个新的项目时,会自动装配到设定的newProjectRoot目录下

projects

放置所有项目的配置。其中一个项目为一个子项,如xxxx为一个项目,在创建时自动生成。

{
  "projects": {
    "xxxx": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {}
    }
  }
}

在一个单独的配置中,可以通过灵活的配置实现一些自动化操作还有使用CLI内置的一些指令。

root

代表项目的“根目录”,也就是项目所在的位置,或者说项目源码的父级目录。项目的根目录包含了一些特定的配置。

sourceRoot

项目源码所在的目录,通常默认使用src目录。

projectType

标示这个项目是application还是library

prefix

使用ng generate component | directive生成组件或者指令时默认的selector前缀,通常我们使用命令创建的组件或指令都是app-xxx格式,我们可以手动在这里改动,使整个项目生效。

schematics

CLI中生成组件、指令、模块等文件的指令是使用@angular-devkit/schematics实现的,这些指令通常带有一些快捷配置,比如一个生成组件的命令:ng g c --spec=false --styleext=scss,这条命令可以直接生成一个 不带测试文件、使用scss为样式文件 的组件。如果每次都要手动输入这些配置就会显得麻烦,所以angular.json提供了schematics属性来统一设置一些生成类的命令配置。

这里的schematics是针对单个project来的。整个angular.json也有此字段,默认生效于所有project

CLI预设了几组选项,我们可以针对不同的选项进行配置:

  • @schematics/angular:component
  • @schematics/angular:class
  • @schematics/angular:directive
  • @schematics/angular:guard
  • @schematics/angular:module
  • @schematics/angular:pipe
  • @schematics/angular:service

component举例,如果要实现统一ng g c --spec=false --styleext=scss的效果,可以配置如下:

{
  "schematics": {
    "@schematics/angular:component": {
       "styleext": "less",
       "spec": false
    }
  }
}

接着就可以直接使用ng g c直接生成对应的组件了。

architect

包含几组CLI相关的项目自动化命令配置,比如本地运行、编译、测试等等。默认预设了几组命令配置如buildserve等等:

{
  "architect":{
    "build":{},
    "serve":{},
    "extract-i18n":{},
    "test":{},
    "lint":{}
  }
}

配置属性

每一个配置项都有 3 个字段属性:builderoptionsconfigurations,例如默认的build命令配置:

{
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/testApp",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
       },
       "configurations": {
         "production": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.prod.ts"
             }
           ],
           "optimization": true,
           "outputHashing": "all",
           "sourceMap": false,
           "extractCss": true,
           "namedChunks": false,
           "aot": true,
           "extractLicenses": true,
           "vendorChunk": false,
           "buildOptimizer": true
         }
       }
     }
   }
}

这个是项目默认生成的配置。

builder代表要执行的内置程序,因为CLI内置了一些自动化工具,architect只是提供了一个facade模式(通俗地讲,就是开发者不需要知道内部的复杂实现)给开发者配置使用,本质上还是调用的内置工具。

options代表针对当前builder要配置的配置项,调用不同的内置程序,是需要传对应的配置项的,由于配置项很多,这里也不会列出。

configurations代表这个命令的多种调用模式,在此配置里,我们可以定义不同的别名,然后使用不同的配置(配置的字段还是属于options里的),最后在使用命令时便可以手动选择不同的模式。

如何使用

CLI其实内置了几个快捷命令来对应默认生成的配置如ng serveng build等等,如果是我们额外自定义的配置,则可以使用ng run <project>:<architect>[:configurations] [其他配置]
命令来实现,其中projectarchitect为必填,configurations为选填。

比如我们简单额外自定义一个本地运行的服务器命令:

{
  "architect":{
    "myServe":{
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "xxxx:build",
        "port": 8800
      },
      "configurations": {
        "port1": {
          "port": 8801
        },
        "port2": {
          "port": 880
        }
      }
    }
  }
}

配置使用了内置的运行本地服务器程序,然后使用默认的build配置,加上自定义的运行端口,另外加上两个不同模式,运行不同端口。

使用ng run xxxx:myServe可以正常运行本地服务器跑项目,端口是8800
使用ng run xxxx:myServe:port1端口是8801

当然,我们还可以直接使用额外的命令行配置直接覆盖已经定义的配置:
ng run xxxx:myServe:port1 --port=8808

这里的例子只是为了简单了解下architect的用法。

defaultProject

默认项目,当使用一些CLI命令没有指定项目名称时,默认指向的项目。

schema.json

其实我只是为了记录自己有点印象的属性,整个angular.json还有很多其他的字段,如果想要全面了解,我们可以直接打开$schema所指向的文件,里面详细地展示了各种字段的类型、配置以及描述说明。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 #Javascript
浅析微信扫码登录原理(小结)
Oct 29 #Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 #Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 #Javascript
vue mounted 调用两次的完美解决办法
Oct 29 #Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 #Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
十天学会php之第十天
2006/10/09 PHP
图象函数中的中文显示
2006/10/09 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
查看keras的默认backend实现方式
2020/06/19 Python
python类共享变量操作
2020/09/03 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
面包店的创业计划书范文
2014/01/16 职场文书
大学校庆策划书
2014/01/31 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
农业生产宣传标语
2014/10/08 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫