angular.json檔案的講解（程式碼範例）-js教程-PHP中文網

這篇文章帶給大家的內容是關於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 :[: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檔案的講解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！