이 문서에서는 Angular CLI 빌더의 기본 이론과 사용자 정의 빌더를 어떻게 구축하는지 설명하고자 합니다.사용자 정의 구축기를 어떻게 구축하는지는 우리가 매우 일반적인 용례인 '이미지 최적화' 를 사용하여 만든 구축기를 바탕으로 완성할 것이다.본문에서 우리는 단지 간단한 예 하나만 보여 준다.

역사.

Angular CLI 버전 8 이전에는 customize, Angular CLI 는 ng eject을 지원했습니다.이 명령을 사용할 때 Angular CLI는 개발자로서 구성을 처리할 것이라고 말합니다.모르시겠지만 Angular CLI 엔진 덮개 아래에서 Webpack을 사용하고 있습니다.따라서 Angular CLI는 이 명령을 실행하면 eject에서 패키지 구성을 변경할 수 있는 파일로 변환합니다.물론, 이것은 가능하지만, 어떻게, 그리고 어떻게 자신의 요구에 따라 정확한 변경을 하는지 알아야 한다. 내가 보기에, 이 페이지를 보았을 때, 그것은 좀 당황스러울 수도 있다.

오늘 회의

본문을 작성할 때 Angular CLI의 History에서 언급한 바와 같이 우리의 버전은 11으로 이미 많은 변화가 있었다.ng eject 명령이 Angular CLI에서 제거됩니다.8판 이래로 몇몇 새로운 물건들이 이미 자리를 잡았다.이 새 부분은 빌더 API라고 합니다.Builders API는 일반 부품(예: ng build, ng serve) 또는 사용자 정의 CLI 명령(예: ng run mybuilder:app)을 쉽게 확장할 수 있습니다.

우리가 오늘 매일 사용하는 건축인!

당신은 우리가 ng build 또는 ng serve을 사용할 때 무슨 일이 일어날지 생각해 본 적이 있습니까?Angular CLI는 angular.json 파일을 기반으로 새 작업을 시작합니다.우선, 항목을 찾기 위해 angular.json을 검사합니다. 하나의 프로그램 설정에서, 이것은 항상 기본 프로그램입니다.

이 프로젝트를 찾으면 목표를 볼 것입니다. 우리의 예시에서 이 목표는 build입니다.이제 Angular CLI는 생성기를 실행하기 위해 충분한 정보를 알고 있습니다!다음은 기본 Angular CLI 명령으로 표시되는 빌더를 보여 주는 간단한 테이블입니다.
명령하다
건설자
짓다
브라우저 생성기
서비스
개발 서버 생성기
테스트
메이커
코튼
TSLint 생성기
❗ Angular v12에서 이 생성기 폐기
e2e
각도기

그럼 건축가가 뭐예요?

제가 여러분께 구축기를 설명하기 전에 문서를 먼저 봅시다.

Several Angular CLI commands run a complex process on your code, such as linting, building, or testing.
The commands use an internal tool called Architect to run CLI builders, which apply another tool to accomplish the desired task. 
With Angular version 8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands. 
For example, you could supply a builder to perform an entirely new task or to change which third-party tool is used by an existing command.

이 글을 다 읽은 후에 나는 다음과 같은 결론을 얻었다.

As a Angular Builder is just a function, you could refer it is a task. The Angular CLI is having an task-based system. This way we can say that the Angular CLI with the task-based system (called Architect) is delegating the tasks (builders).

따라서 특정 명령을 작업에 쉽게 연결하고 Angular CLI에서 제공하는 특정 명령을 통해 실행한다는 것을 알 수 있습니다.

사용자 정의 생성기는 어떻게 만듭니까?

이제 맞춤형 생성기를 살펴보자. 우리는 우선 프로젝트 구조를 설정해야 한다.다음은 빌더를 계속 사용하기 전에 수행해야 할 몇 가지 최소 단계입니다.

Npm 초기

길트 초기값

종속성 추가(최소 필요):

타본

@angular devkit/architect

npm 스크립트를 추가하여 저희 패키지 구축 및 테스트에 사용

"builder.json"파일 추가

은 "builders": "builders. json"을 가방에 추가합니다.json

"index.ts"파일 추가

우리의 프로젝트 구조는 완전하다(see a full example)!이제 Builder을 생성하고 다음 기사에서는 Angular CLI와 사용자 정의 생성기를 사용하거나 연결하는 방법에 대해 설명합니다.Angular CLI 팀은 Angular CLI 를 사용하여 실행할 수 있도록 사용자 정의 생성기를 설정하는 간단한 방법을 제공합니다.우리는 createBuilder 함수를 가져와야 한다.createBuilder 함수는 Angular CLI에서 작업 기반 시스템을 연결하고 사용자 정의 생성기를 사용할 수 있도록 합니다.

import { createBuilder, BuilderContext, BuilderOutput } from '@angular-devkit/architect'

// Schema Options
interface Options extends JsonObject {...}

// Our func. that is executed by the tasked based system
function customBuilderFunc(
  options: Options,
  context: BuilderContext,
  ): Promise<BuilderOutput> {
    // logging the message
    context.reportStatus(`Executing Custom Builder`);
    return new Promise(resolve => {
        // log message when we are done
      context.reportStatus(`Done running Custom Builder 🎉`);
    });
}

export default createBuilder(customBuilderFunc);

요약

빌더는 Angular CLI에서 매우 유용한 부분으로 CLI의 확장성을 보장합니다.우리는 구축기를 작업 구역과 관련된 각종 작업에 사용할 수 있다.구축기는 함수일 뿐이기 때문에 우리는 무엇이든 할 수 있다.웹 성능을 향상시키기 위해 작업 영역의 이미지를 최적화할 수 있는 '프레젠테이션' 생성기를 만들었습니다.이 구축기는 다음 글에서 사용자 정의 구축기를 만들고, 작업 영역에 연결하는 방법을 소개할 것입니다.당신은 이미 here을 볼 수 있습니다
나는 네가 이 문장을 좋아하길 바란다. 이 모든 것은 나의 개인적인 경험에서 나온 것이다.만약builder에 대해 궁금한 것이 있으면 언제든지 저에게 연락 주십시오

리소스

다음은 구축기에 관심이 있다면 이 자원을 볼 수 있는 유용한 자원을 추가했습니다.

Angular.io - CLI Builders

Angular Builder by Santosh Yadav

Deep Dive Into CLI Builders by Mike Hartington

Version stamp by the xLayers team

ngx-aws-deploy by Jeffrey Bosch

ngx-electronify by Aristeidis Bampakos