라이브러리를 위한 Angular Schematics: 프로젝트를 최신 상태로 유지

각도 회로도란 무엇이며 그 이점은 무엇입니까? ng add 및 ng update를 최대한 활용하여 Angular 회로도로 라이브러리를 개선하는 방법을 알아보세요.

V Slavov Last Updated Feb 19, 2025 13min read

Angular 회로도는 출시된 지 얼마 되지 않았으며 우리 대부분은 이 회로도로 작업하는 데 익숙해졌고 많은 이점을 누리고 있다고 생각합니다. 간단한 ng new 실행부터 워크플로 및 프로젝트 설정을 자동화하는 복잡한 회로도 생성에 이르기까지 회로도 엔진은 모든 Angular 애플리케이션의 수명 주기에서 큰 부분을 차지합니다.

하지만 Angular 라이브러리는 어떨까요?

Infragistics 에서는 오픈 소스 Angular 구성 요소 라이브러리를 개발하고 유지 관리하는 데 큰 자부심을 느낍니다. 그러나 라이브러리의 이용자가 점점 더 많아지고 Angular의 특성이 끊임없이 진화함에 따라 프로젝트를 최신 상태로 유지할 수 있는 쉬운 방법을 제공해야 했습니다. 이것은 대부분의 것들과 마찬가지로 Angular, 회로도가 작동하는 곳입니다.

ng add, ng update and more

이 블로그에서는 Angular CLI의 ng add 및 ng update 명령을 최대한 활용하도록 라이브러리를 설정하는 방법을 보여줍니다. 우리는 특정 방식으로 도식 컬렉션을 정의하여 이를 수행할 것입니다.

Disclaimer:

이 게시물을 최대한 활용하려면 이상적으로는 Angular 회로도의 기본 사항에 이미 익숙해야 하며 일부 사항에 관심이 있을 수 있습니다. 다른 대 게시물 중간에서.

최근 angular.io 기사에서 발췌하면 다음과 같습니다.

회로도는 복잡한 로직을 지원하는 템플릿 기반 코드 생성기입니다. 코드를 생성하거나 수정하여 소프트웨어 프로젝트를 변환하기 위한 일련의 지침입니다. 회로도는 컬렉션으로 패키지되고npm과 함께 설치됩니다.

Try Ignite UI for Angular

Angular 회로도란 무엇입니까?

회로도는 Angular CLI의 빌딩 블록입니다. 기존 파일에 대한 조작을 수행하거나 파일/콘텐츠를 생성하는 실행 가능한 명령어 집합입니다.Angular 개발자라면 다음을 실행하여 구성 요소를 만드는 데 가장 많이 사용했을 것입니다.

ng g c [component name]

회로도는 Angular 생태계의 큰 부분이며 이를 더 잘 이해하면 귀하와 귀하의 사용자 모두의 삶을 크게 개선할 수 있습니다.

더 깊이 들어가기 전에 기본 사항에 익숙해질 수 있도록 빠른 각도 회로도 자습서를 살펴보겠습니다.

회로도 Angular 작성

Angular의 자체 회로도 cli를 활용하여 고유한 회로도 작성을 빠르게 시작할 수 있습니다.

다음을 실행하여 전역으로 설치하십시오.

npm install -g @angular-devkit/schematics-cli

그런 다음 다음을 호출하여 바로 사용할 수 있는 빈 예제 회로도를 만듭니다.

schematics blank --name=intro-schematic

생성된 파일을 살펴보면 회로도가 사용된 파일에 정확히 어떻게 노출되는지 확인할 수 있습니다.

package.json 파일에서 "collection.json"를 가리키는 "회로도" 속성이 있음을 볼 수 있습니다
이 경로를 따라 해당 파일을 검사할 수 있습니다 – 이 파일은 매우 표준적인 .json 파일이며, 한 가지 핵심 사항은 사용자에게 노출된 모든 회로도의 목록인 "회로도" 속성입니다.
위의 예제 명령을 실행한 직후 목록에는 "Intro schematics"라는 항목이 하나만 있어야 합니다. 항목에는 간단한 설명과 "factory"에 대한 참조가 포함되어 있으며, 여기에서 회로도의 본체가 정의됩니다.
참조된 'index.ts' 파일에서 회로도 "body"가 정의되며, 이는 소비 프로젝트의 컨텍스트에서 실행되고 모든 사용자 정의 로직이 상주하는 '규칙'입니다

이제 다음을 호출하여 프로젝트 외부에서 예제를 호출할 수 있습니다.

ng g [path-to-collection.json]:intro-schematics

그러나 이것이 회로도를 호출하는 유일한 방법은 아닙니다. Angular사용자 경험을 더욱 자동화할 수 있는 개발자를 위해 C onvenient "훅"을 노출했습니다.

Angular 회로도 진입점

일반적인 Angular 회로도를 호출하는 것 외에도

ng g my-custom-library:schematics [args]

Angular의 CLI는 사용자 정의 라이브러리 워크플로우에 대한 두 가지 다른 진입점인 ng add 및 ng update도 제공합니다. 이러한 ng 명령에 익숙하지 않은 경우 여기와 여기에서 자세히 알아볼 수 있습니다. 라이브러리를 사용하는 Angular 애플리케이션에서 이러한 기능은 npm의 설치 후 후크와 유사하게 작동합니다. Angular CLI에 의해 자동으로 호출됩니다.

ng add my-custom-library

또는

ng update my-custom-library

각각.

Migration Schematics

Angular의 CLI 사용의 주요 이점 중 하나는 패키지 종속성을 업데이트하는 동시에 주요 변경 사항이나 사용 중단을 수동으로 우회할 필요성을 최소화하는 것입니다. 이 모든 것은 라이브러리에 대한 마이그레이션 회로도를 정의하여 자동화할 수 있습니다!

마이그레이션 회로도는 ng update your-custom-library를 통해 최신 버전의 라이브러리가 소비 애플리케이션에 추가될 때마다 실행됩니다. 마이그레이션 회로도에서는 마이그레이션 회로도가 수행해야 하는 변경 사항을 정의할 수 있을 뿐만 아니라 마이그레이션 범위(영향을 받는 버전)도 지정할 수 있습니다.

Adding migration schematics

마이그레이션 회로도를 정의하는 것은 일반 회로도를 정의하는 것과 유사한 방식으로 수행됩니다 — Rule을 반환하는 함수를 생성해야 합니다. 이 규칙은 작업 트리, 로그 항목 및 / 또는 Javascript로 수행 할 수있는 모든 것을 조작 할 수 있습니다. 보다 구체적인 부분은 Angular CLI가 ng update hook에서 회로도를 호출하는지 확인하는 것입니다.

Defining the schematics collection

먼저 회로도 collection.json 파일을 정의해야 합니다. 이름은 중요하지 않습니다. 우리 라이브러리의 경우 여러 개의 도식 컬렉션이 있고 어느 것이 어느 것인지 쉽게 알 수 있기 때문에 migration-collection.json 이름을 지정했습니다.

collection.json의 구조는 다음과 같아야 합니다.

{
    "schematics": {
        "migration-01": {
            //  Migration name, no strict naming, must be unique
            "version": "2.0.0", // The target version
                "description": "Updates my-custom-library from v1 to v2", // A short description, not mandatory
                "factory": "./update-2" // The update schematic factory
        }

        ,
        "migration-02": {
            "version": "3.0.0",
                "description": "Updates my-custom-library from v2 to v3",
                "factory": "./update-3"
        }

        ,

        ...
    }
}

회로도 개체에는 모든 업데이트 회로도 정의가 들어 있습니다. 각 정의는 명명 된 속성 (고유해야 함) 아래에 있으며 각 속성에 대해 "변경 사항"이 도입 된 버전과 작업 트리에서 실행될 회로도의 팩토리를 지정해야합니다. version 속성은 회로도를 실행해야 하는 시기를 결정하는 데 사용됩니다.

예를 들어 my-custom-library@1.0.0을 사용하는 앱이 있다고 가정해 보겠습니다. 위의 회로도 정의를 사용하여 ng update my-custom-library@2.0.0.0 을 실행하면 정의된 "version": "6.0.0" 회로도만 실행됩니다. 달릴 때

ng update my-custom-library@3.0.0

2.0.0 및 3.0.0 마이그레이션 회로도가 모두 실행됩니다.

마이그레이션 회로도(예: v2.0.0의 경우)의 실제 정의는 ./update-2/index.ts에 있으며 다른 회로도와 같을 수 있습니다. 매우 기본적인 구현은 다음과 같습니다.

export default function(): Rule {
  return (host: Tree, context: SchematicContext) => {
    const version = `1.0.0` // You can get this dynamically from the package.json
    context.logger.info(`Applying migration for custom library to version ${version}`);

    return host;
  };
}

igniteui-angular의 최신 마이그레이션 회로도 중 하나에 대한 정의는 여기에서 찾을 수 있습니다.

면책 조항: 우리 라이브러리의 도식 구현에서 파일을조작하기 위해 TypeScript 언어 서비스를 많이 사용하고 있습니다. 자세한 내용을 설명하지 못해 죄송합니다만, 그 자체로 게시물이 필요하겠습니다. 질문이 있으시면 언제든지 댓글로 문의해 주시면 최대한 답변해 드리겠습니다.

회로도 컬렉션을 ng-update 훅에 연결

마이그레이션 collection.json 생성되고 마이그레이션 회로도가 정의되면 남은 것은 ng-update 후크에 올바르게 연결하는 것입니다. 이를 위해해야 할 일은 라이브러리의 package.json로 이동하여 다음 "ng-update"속성을 추가하는 것입니다.

{
    "name": "my-custom-library",
    "version": "2.0.0",
    ... "ng-update": {
        "migrations": "./migrations/migration-collection.json"
    }
}

그거에요! 이제 누군가 ng update my-custom-library를 실행할 때마다 Angular CLI와 신중하게 만든 회로도가 사용자가 놓칠 수 있는 성가신 주요 변경 사항이나 사용 중단을 처리합니다!

ng-add

Angular CLI가 제공하는 또 다른 유용한 진입점은 ng add hook입니다. ng add 회로도를 정의하면 사용자가 다음을 실행하여 소비 프로젝트에 라이브러리를 추가하자마자 자동으로 실행됩니다.

ng add [custom-library]

npm의 postinstall hook과 유사한 것으로 생각할 수 있습니다.

라이브러리에 대한 ng add 회로도를 정의하는 것은 사용자가 쉽게 처음 경험할 수 있도록 하는 가장 좋은 방법입니다. 회로도를 통해 몇 가지 필수 초기 설정을 자동화하거나, 패키지를 추가/업데이트하거나, 모든 사용자에게 큰 "감사합니다!"를 기록할 수 있습니다! 🙂

라이브러리에서 IgniteUI CLI를 프로젝트 작업 공간에 설치하는 ng add 회로도를 추가하여 사용자가 CLI를 통해 구성 요소 제품군을 최대한 활용할 수 있도록 했습니다.
워크스페이스에 대한 몇 가지 초기 변환(CLI 실행에 필요한 사용자 지정 .json 파일 추가), 몇 가지 스타일과 패키지를 추가하고(컴포넌트가 제대로 렌더링될 수 있도록), CLI에서 일부 회로도(schematiception)를 호출하여 Angular CLI 관련 로직 중 일부를 오프로드했습니다.

이 모든 것(그리고 그 이상)은 ng add를 호출하기만 하면 자동으로 수행될 수 있습니다 – 제 생각에는 이것이 Angular CLI의 진정한 매력입니다.

ng-add 회로도 생성

라이브러리에 ng add 회로도를 추가하려면 먼저 정의해야 합니다. 다른 회로도와 마찬가지로 컬렉션의 일부여야 합니다. 프로젝트가 이미 회로도를 노출하는 경우 ng-add라는 이름으로 기존 컬렉션에 추가할 수 있습니다. 그렇지 않은 경우 컬렉션을 처음부터 만들 수 있습니다.

라이브러리의 루트 폴더에서:

mkdir schematics && cd schematics

echo blank > collection.json

mkdir ng-add

새로 생성된 collection.json 열고 ng-add 회로도의 정의를 가리키도록 수정합니다.

{
    "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
    "schematics": {
        "ng-add": {
            "description": "Installs the needed dependencies onto the host application.",
                "factory": "./ng-add/index",
                "schema": "./ng-add/schema.json"
        }
    }
}

schematics/ng-add/index.ts에서 다른 회로도와 마찬가지로 ng-add 회로도의 구현을 생성할 수 있습니다. 예를 들어 사용자에게 간단한 "감사합니다!" 메시지를 표시하려면 다음을 수행할 수 있습니다.

export default function (options: Options): Rule {
	return (_tree: Tree, context: SchematicContext) => {
		context.logger.info(`Thank you for using our custom library! You're great!`);
	};
}

IgniteUI Angular의 ng-add 회로도 구현은 여기에서 찾을 수 있습니다.

package.json에 포함

회로도 구현을 완료하면 라이브러리의 package.json에 컬렉션 정의를 포함해야 합니다. 라이브러리가 이미 회로도 컬렉션을 노출하고 있다면 이 문제를 해결할 수 있습니다! 그렇지 않은 경우 새로 생성된 collection.json의 위치를 가리키는 "회로도" 속성을 추가하기만 하면 됩니다.

{
    "project": "my-custom-library",
    "version": "2.0.0",
    ... "schematics": "./schematics/collection.json"
}

설정의 이 부분이 라이브러리 저장소에 반영된 것을 찾을 수 있습니다.

Bundling your schematics

정의한 회로도(migrations 및 ng-add 컬렉션 모두)가 라이브러리 패키지와 함께 제대로 제공되는지 확인해야 합니다. 이렇게 하려면 프로젝트의 dist 폴더에서 적절한 위치를 가리키도록 outDir을 지정하여 회로도에 대해 별도의 빌드 작업을 정의해야 합니다(collection.json 파일은 package.json 기준으로 동일한 경로를 가짐). 마지막으로, 컴파일러에서 제외된 모든 파일(예: .json 파일)을 명시적으로 복사해야 합니다.

컴파일 된 프로젝트의 출력 디렉토리가 .. /dist (따라서 프로젝트의 번들 파일은 .. /dist/my-custom-lib/) 회로도의 컴파일 출력은 .. /dist/schematics (ng-add를 포함하는 기본 회로도 컬렉션의 경우) 및 .. /dist/migrations(마이그레이션 회로도 컬렉션의 경우)

이렇게 하려면 먼저 회로도 컬렉션에 대한 tsconfig.json 파일(각각 ./schematics/ 또는 ./migrations에 있음)을 정의해야 합니다. 예를 들어, 핵심 회로도 컬렉션(./schematics)에 대한 파일의 내용은 다음과 같습니다.

{
   "compilerOptions": {
	"target": "es6",
	"module": "commonjs",
	"sourceMap": false,
	"composite": true,
	"declaration": true,
	"outDir": "../../../dist/my-custom-lib/schematics/"
   }
}

그런 다음 프로젝트의 package.json에서 회로도를 빌드하는 스크립트와 파일을 복사하는 다른 스크립트를 정의합니다.

{
   "name": "my-custom-library",
   ...
   "scripts": {
      "build:schematics": "tsc --project migrations/tsconfig.json",
      "copy:schematics:collection": "cp --parents migrations/*/collection.json ../../dist/my-custom-lib/"
   },
   ...
}

마이그레이션도 마찬가지입니다 – TypeScript 컴파일 및 파일 복사를 위한 별도의 스크립트입니다.

Ignite UI for Angular 저장소의 경우 링크를 확인하여 기본 회로도 컬렉션의 구현 및 마이그레이션을 확인할 수 있습니다. (우리는 gulp를 빌드 도구로 사용하고 있기 때문에 collection.json 파일을 복사하기 위해 별도의 작업을 정의했습니다)

ng-add 및 ng-update 회로도를 로컬에서 실행

새롭고 반짝이는 ng update 및 ng add 기능을 사용하여 라이브러리 패키지를 게시하기 전에 회로도가 적절한 작업장 변환을 수행하고 있는지 확인할 수 있습니다. 결국,이 두 가지 모두 기본적인 회로도 구현 일 뿐이므로 ng g 를 사용하여 다른 것과 마찬가지로 실행할 수 있습니다!

라이브러리 파일과 회로도 + 마이그레이션을 빌드한 후 지정된 출력 디렉토리(번들의 package.json가 있는 위치)로 이동하여 압축할 수 있습니다

npm pack

Running ng-add

ng-add is 명령이 새 프로젝트 내에서 어떻게 수행되고 있는지 확인하려면 다음을 수행 할 수 있습니다.

Angular CLI를 사용하여 새 프로젝트 만들기

ng g my-test-project --routing=true

프로젝트가 만들어지면 프로젝트 폴더로 이동하여 .tgz 파일에서 패키지를 수동으로 설치할 수 있습니다.

npm i my-custom-library.tgz

Then, simply run

ng g my-custom-library:ng-add

그리고 완료되면 작업장 변경 사항을 검토하십시오 – 이것이 패키지의 ng-add가 수행하는 작업입니다!

Running migrations

마이그레이션을 테스트하려면 위와 동일한 단계를 수행할 수 있지만 마이그레이션 회로도 collection.json 경로를 지정해야 합니다(프로젝트의 기본 회로도 컬렉션과 다르므로).

테스트하려는 최신 마이그레이션 회로도의 이름이 update-1이라고 가정해 보겠습니다. .tgz 파일을 수동으로 설치했으면 다음을 실행하기만 하면 됩니다.

ng g "./node_modules/my-custom-library/migration-collection.json:update-1"

이렇게 하면 최신 마이그레이션 회로도가 적용되는 모든 작업 공간 변경 내용이 적용됩니다.

마무리 생각

이 게시물이 도움이 되었기를 바라며 Angular CLI의 ng add 및 ng update 기능에 대한 몇 가지 사항을 정리했습니다. Angular의 회로도는 이제 프로젝트 생태계의 견고한 부분을 차지했으며 앞으로도 계속 개선될 것입니다. 점점 더 많은 개발자가 회로도를 사용하고 인식을 제고함에 따라 이제 라이브러리가 회로도를 채택하기 시작하기에 좋은 시기입니다. 귀하와 귀하의 사용자 모두를 자동화하여 걱정하지 않으시겠습니까? 🙂

질문이 있으시면 언제든지 댓글로 문의해 주세요.

Thanks for reading!

Angular