angular.json 파일 설명(코드 예)

이 글은 angle.json 파일에 대한 설명(코드 예제)을 제공합니다. 특정 참조 값이 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Angular CLI 6+ 버전 이후 원래의angular-cli.json이angular.json으로 대체되었고, 내부 필드도 많이 변경되었습니다. 기본 구성이 이해되지 않으신다면, 이전 버전의 코드를 새 버전의 작업 공간에 직접 복사하면 매우 불편한 오류가 발생할 수 있습니다.

이 변경은 주로 Angular CLI가 ng new를 사용하여angular.json을 통해 구성되는 대규모 작업 공간을 생성하는 모노레포(monorepo)(하나의 공간이 여러 프로젝트를 관리함) 개발 모델을 도입했기 때문입니다. ng 생성 애플리케이션 라이브러리의 구성 요소 라이브러리 |

사실 이 모델의 장점은 여전히 ​​매우 분명합니다. 예를 들어 회사에 여러 관리 플랫폼이나 제품이 있는 경우 이 방법을 사용하면 각 프로젝트의 환경과 각 프로젝트 간에 공유되는 구성 요소를 통합할 수 있습니다. 유지 관리를 위해 모든 프로젝트는 npm 패키지와 typescript 구성을 공유합니다.

monorepo 구조는 다음과 같습니다:

그러나 실제로 대부분의 사람들은 여전히 작업 공간은 프로젝트를 유지 관리하므로 여기서는 그다지 중요하지 않습니다. json 파일의 변경 사항은 새 스키마에 대한 것이라고 말하고 싶습니다.

Angular.json의 일부 필드

작업 공간을 새로 만들면 프로젝트와 해당 e2e가 루트 디렉터리에 생성됩니다. 기본 프로젝트. 초기 angle.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

은angular.json의 모든 필드와 제약 조건을 설명하는 JSON 스키마 파일을 가리킵니다.

사실 이 기능을 지원하는 IDE나 편집기가 angle.json 파일을 작성할 때 해당 프롬프트를 제공하는 한 "유형 프롬프트" 기능이 있는 파일과 비교할 수 있습니다. ### #######버전### ## ########### ####newProjectroot#🎜🎜 ##### 🎜 🎜#새 프로젝트가 위치한 경로입니다.

ng 생성 애플리케이션 라이브러리를 사용하여 새 프로젝트를 생성하면 설정된 newProjectRoot 디렉터리에 자동으로 어셈블됩니다.

projects

# 🎜 🎜#

모든 ​​프로젝트의 구성을 배치합니다. 프로젝트 중 하나는 하위 항목입니다. 예를 들어 xxxx는 생성 시 자동으로 생성되는 프로젝트입니다.

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

단일 구성에서는 유연한 구성과 CLI에 내장된 일부 명령을 사용하여 일부 자동화된 작업을 수행할 수 있습니다.

root

은 프로젝트의 위치인 프로젝트의 "루트 디렉터리" 또는 프로젝트의 상위 디렉터리를 나타냅니다. 소스 코드. 프로젝트의 루트 디렉터리에는 몇 가지 특정 구성이 포함되어 있습니다.

sourceRoot

프로젝트 소스 코드가 위치한 디렉터리, 일반적으로 src 디렉터리가 기본적으로 사용됩니다.

projectType

이 프로젝트가 애플리케이션인지 라이브러리인지 표시

prefix # 🎜🎜#구성요소 생성 | 지시문을 사용하여 구성요소 또는 지침을 생성할 때 일반적으로 명령을 사용하여 생성하는 구성요소 또는 지침은 여기에서 수동으로 변경할 수 있습니다. 전체 프로젝트를 효과적으로 만듭니다.

schematics

구성 요소, 지침, 모듈 및 기타 파일을 생성하는 CLI의 지침은 @angular-devkit/schematics를 사용하여 구현됩니다. 이러한 지침은 일반적으로 구성 요소를 생성하는 명령(ng g c --spec=false --styleext=scss)과 같은 몇 가지 바로 가기 구성과 함께 제공됩니다. 이 명령은 테스트 파일 없이 scss를 스타일 파일로 사용하여 구성 요소를 직접 생성할 수 있습니다. 매번 이러한 구성을 수동으로 입력해야 한다면 번거로울 수 있으므로, angle.json은 클래스 생성을 위한 일부 명령 구성을 균일하게 설정하기 위한 도식 속성을 제공합니다.

여기의 회로도는 단일 프로젝트에 대한 것입니다. 전체angular.json에도 이 필드가 있으며, 이는 기본적으로 모든 프로젝트에 적용됩니다.

CLI는 여러 옵션 세트를 사전 설정하며 다양한 옵션에 맞게 구성할 수 있습니다. 각도:클래스@schematics/angular:directive

@schematics/angular:guard

@schematics/angular:module# 🎜🎜#@schematics/angular:pipe

@schematics/angular:service

구성요소를 통합하려면 ng c --spec=false를 사용하세요. --styleext= scss의 효과는 다음과 같이 구성할 수 있습니다:

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

그런 다음 ng g c를 직접 사용하여 해당 구성 요소를 직접 생성할 수 있습니다.

architect

로컬 실행, 컴파일, 테스트 등과 같은 여러 CLI 관련 프로젝트 자동화 명령 구성 세트가 포함되어 있습니다. 빌드, 서브 등 여러 명령 구성 세트가 기본적으로 사전 설정되어 있습니다.

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

구성 속성

각 구성 항목에는 3 필드 속성: 빌더, 옵션, 구성(예: 기본 빌드 명령 구성):

{
    "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!