简单说说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 相关文章推荐
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
vue中$refs的用法及作用详解
2018/04/24 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python之PyMongo使用总结
2017/05/26 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
捐助倡议书范文
2014/04/15 职场文书
购房意向书
2014/08/30 职场文书
高中政治教师教学反思
2016/02/23 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android