如何使用angular.json文件

今天就跟大家聊聊有關(guān)如何使用angular.json文件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

monorepo下結(jié)構(gòu)如：

但是其實(shí)大多數(shù)人還是一個(gè)工作空間維護(hù)一個(gè)項(xiàng)目，所以這個(gè)在這里不那么重要，只是想說json文件的改變是為了新的模式而已。

Angular.json的部分字段

當(dāng)你ng new一個(gè)工作空間時(shí)，默認(rèn)會(huì)在根目錄創(chuàng)建一個(gè)項(xiàng)目以及對(duì)應(yīng)e2e項(xiàng)目。初始的angular.json結(jié)構(gòu)如下（省略的部分的配置代碼）

{
  "$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"
}

這是部分的配置屬性，我按照順序簡單做個(gè)記錄，以后也好查閱。

$schema

指向一個(gè) JSON Schema 文件，這個(gè)文件描述了angular.json所有的字段以及約束。

其實(shí)可以比作一個(gè)有“類型提示”功能文件，只要支持了這個(gè)功能的 IDE 或編輯器，在書寫angular.json文件時(shí)便會(huì)給出相應(yīng)的提示。

version

設(shè)置版本

newProjectRoot

新建項(xiàng)目所在的路徑。

當(dāng)使用ng generate application | library創(chuàng)建一個(gè)新的項(xiàng)目時(shí)，會(huì)自動(dòng)裝配到設(shè)定的newProjectRoot目錄下

projects

放置所有項(xiàng)目的配置。其中一個(gè)項(xiàng)目為一個(gè)子項(xiàng)，如xxxx為一個(gè)項(xiàng)目，在創(chuàng)建時(shí)自動(dòng)生成。

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

在一個(gè)單獨(dú)的配置中，可以通過靈活的配置實(shí)現(xiàn)一些自動(dòng)化操作還有使用CLI內(nèi)置的一些指令。

root

代表項(xiàng)目的“根目錄”，也就是項(xiàng)目所在的位置，或者說項(xiàng)目源碼的父級(jí)目錄。項(xiàng)目的根目錄包含了一些特定的配置。

sourceRoot

項(xiàng)目源碼所在的目錄，通常默認(rèn)使用src目錄。

projectType

標(biāo)示這個(gè)項(xiàng)目是application還是library

prefix

使用ng generate component | directive生成組件或者指令時(shí)默認(rèn)的selector前綴，通常我們使用命令創(chuàng)建的組件或指令都是app-xxx格式，我們可以手動(dòng)在這里改動(dòng)，使整個(gè)項(xiàng)目生效。

schematics

CLI中生成組件、指令、模塊等文件的指令是使用@angular-devkit/schematics實(shí)現(xiàn)的，這些指令通常帶有一些快捷配置，比如一個(gè)生成組件的命令：ng g c --spec=false --styleext=scss，這條命令可以直接生成一個(gè) 不帶測(cè)試文件、使用scss為樣式文件 的組件。如果每次都要手動(dòng)輸入這些配置就會(huì)顯得麻煩，所以angular.json提供了schematics屬性來統(tǒng)一設(shè)置一些生成類的命令配置。

這里的schematics是針對(duì)單個(gè)project來的。整個(gè)angular.json也有此字段，默認(rèn)生效于所有project。

CLI預(yù)設(shè)了幾組選項(xiàng)，我們可以針對(duì)不同的選項(xiàng)進(jìn)行配置：

• @schematics/angular:component

• @schematics/angular:class

• @schematics/angular:directive

• @schematics/angular:guard

• @schematics/angular:module

• @schematics/angular:pipe

• @schematics/angular:service

拿component舉例，如果要實(shí)現(xiàn)統(tǒng)一ng g c --spec=false --styleext=scss的效果，可以配置如下：

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

接著就可以直接使用ng g c直接生成對(duì)應(yīng)的組件了。

architect

包含幾組CLI相關(guān)的項(xiàng)目自動(dòng)化命令配置，比如本地運(yùn)行、編譯、測(cè)試等等。默認(rèn)預(yù)設(shè)了幾組命令配置如build、serve等等：

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

配置屬性

每一個(gè)配置項(xiàng)都有 3 個(gè)字段屬性：builder，options，configurations，例如默認(rèn)的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
         }
       }
     }
   }
}

這個(gè)是項(xiàng)目默認(rèn)生成的配置。

builder代表要執(zhí)行的內(nèi)置程序，因?yàn)?code>CLI內(nèi)置了一些自動(dòng)化工具，architect只是提供了一個(gè)facade模式（通俗地講，就是開發(fā)者不需要知道內(nèi)部的復(fù)雜實(shí)現(xiàn)）給開發(fā)者配置使用，本質(zhì)上還是調(diào)用的內(nèi)置工具。

options代表針對(duì)當(dāng)前builder要配置的配置項(xiàng)，調(diào)用不同的內(nèi)置程序，是需要傳對(duì)應(yīng)的配置項(xiàng)的，由于配置項(xiàng)很多，這里也不會(huì)列出。

configurations代表這個(gè)命令的多種調(diào)用模式，在此配置里，我們可以定義不同的別名，然后使用不同的配置（配置的字段還是屬于options里的），最后在使用命令時(shí)便可以手動(dòng)選擇不同的模式。

如何使用

CLI其實(shí)內(nèi)置了幾個(gè)快捷命令來對(duì)應(yīng)默認(rèn)生成的配置如ng serve、ng build等等，如果是我們額外自定義的配置，則可以使用ng run <project>:<architect>[:configurations] [其他配置]
命令來實(shí)現(xiàn)，其中project和architect為必填，configurations為選填。

比如我們簡單額外自定義一個(gè)本地運(yùn)行的服務(wù)器命令：

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

配置使用了內(nèi)置的運(yùn)行本地服務(wù)器程序，然后使用默認(rèn)的build配置，加上自定義的運(yùn)行端口，另外加上兩個(gè)不同模式，運(yùn)行不同端口。

使用ng run xxxx:myServe可以正常運(yùn)行本地服務(wù)器跑項(xiàng)目，端口是8800
使用ng run xxxx:myServe:port1端口是8801

當(dāng)然，我們還可以直接使用額外的命令行配置直接覆蓋已經(jīng)定義的配置：
ng run xxxx:myServe:port1 --port=8808

這里的例子只是為了簡單了解下architect的用法。

defaultProject

默認(rèn)項(xiàng)目，當(dāng)使用一些CLI命令沒有指定項(xiàng)目名稱時(shí)，默認(rèn)指向的項(xiàng)目。

schema.json

其實(shí)我只是為了記錄自己有點(diǎn)印象的屬性，整個(gè)angular.json還有很多其他的字段，如果想要全面了解，我們可以直接打開$schema所指向的文件，里面詳細(xì)地展示了各種字段的類型、配置以及描述說明。

看完上述內(nèi)容，你們對(duì)如何使用angular.json文件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。