最新公告
  • 欢迎您光临剑来源码,购买独家源码,请前往销售大厅!立即加入我们
  • angular.json文件的讲解

    angular.json文件的讲解

    如果您是本站会员;我们将为您提供技术支持!!!!

     

    本篇文章给大家带来的内容是关于angular.json文件的讲解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    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相关的项目自动化命令配置,比如本地运行、编译、测试等等。默认预设了几组命令配置如build、serve等等:

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

    配置属性

    每一个配置项都有 3 个字段属性:builder,options,configurations,例如默认的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 serve、ng build等等,如果是我们额外自定义的配置,则可以使用ng run <project>:<architect>[:configurations] [其他配置]
    命令来实现,其中project和architect为必填,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所指向的文件,里面详细地展示了各种字段的类型、配置以及描述说明。


     

    剑来源码专注于网络资源分享,百度搜索:剑来源码。
    剑来源码 » angular.json文件的讲解

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    剑来源码
    专注为开发人员提供建站资源

    发表评论

    升级SVIP尊享更多特权立即升级