Nx Monorepo 프로젝트에서 종속성 제약 조건 적용

16165 단어 nrwlangularnxmonorepo
Nx monorepo (mono repository) workspace에서 응용 프로그램(apps) 및 라이브러리(libs)를 가질 수 있습니다.
앱에는 대부분 서버에서 호스팅되는 프런트 엔드 애플리케이션인 프로젝트가 있습니다.

그러나 Libs에는 애플리케이션을 지원해야 하는 프로젝트가 있어야 합니다. Libs 폴더 안에는 서비스 프로젝트가 있을 수 있습니다. Libs 폴더 내에서 많은 프로젝트를 만들 수 있으며 모든 프로젝트가 다른 모든 프로젝트에 의존할 수 있는 경우 매우 혼란스럽습니다.

그러나 서비스 코드를 잘 정의된 응집력 있는 블록으로 분할하려는 경우. 특히 서비스 지향 아키텍처Advanced Distributed Systems Design by Udi Dahan를 따르는 경우. 그러면 하나의 서비스 코드가 다른 서비스 코드에 종속되어서는 안 된다는 것을 알 수 있습니다. 따라서 JavaScript 프로젝트에서 프로젝트가 서로 의존하는 방식에 제약을 가할 수 있습니다. 그런 다음 프레임 워크를 사용하지 않으면 매우 어렵습니다. Nx Monorepo tagscope 을 사용하는 것이 좋습니다.

자세한 내용은 이 기사를 끝까지 읽으십시오!

라이브러리가 있는 프로젝트가 있습니다.


Branding , logger , layout 와 같은 두 개의 프로젝트가 있는 angular material 폴더Sales 두 개의 프로젝트product-editorproducts가 있는 폴더Customers 두 개의 프로젝트user-editorusers가 있는 폴더

Nx Monorepo Framework에서 아래 규칙을 적용하고 싶습니다.


  • 판매 프로젝트는 브랜딩 프로젝트에 따라 달라질 수 있음
  • 판매 프로젝트는 고객 프로젝트에 종속되지 않아야 합니다.
  • 고객 프로젝트가 브랜딩 프로젝트에 의존할 수 있음
  • 고객 프로젝트가 영업 프로젝트에 종속되면 안 됩니다.
  • 브랜딩 프로젝트는 판매 프로젝트에 의존할 수 없습니다
  • .
  • 브랜딩 프로젝트는 고객 프로젝트에 의존할 수 없음


  • 1단계: Nx.json에 프로젝트 태그 추가


    nx.json로 이동하여 프로젝트 태그를 추가합니다.

    "projects": {
        "sales-product-editor": {
          "tags": [
            "scope:sales"
          ]
        },
        "sales-products": {
          "tags": [
            "scope:sales"
          ]
        },
        "customers-user-editor": {
          "tags": [
            "scope:customers"
          ]
        },
        "customers-users": {
          "tags": [
            "scope:customers"
          ]
        },
        "shared-ng-material": {
          "tags": [
            "scope:branding"
          ]
        },
        "shared-layout": {
          "tags": [
            "scope:branding"
          ]
        },
        "shared-logger": {
          "tags": [
            "scope:branding"
          ]
        },
         "onlinestore-client-e2e": {
          "tags": [],
          "implicitDependencies": [
            "onlinestore-client"
          ]
        },
        "onlinestore-admin-e2e": {
          "tags": [],
          "implicitDependencies": [
            "onlinestore-admin"
          ]
        },
           "onlinestore-client": {
          "tags": [
            "type:app",
            "scope:client"
          ]
        },
        "onlinestore-admin": {
          "tags": [
            "type:app",
            "scope:admin"
          ]
        },
        "onlinestore-client-e2e": {
          "tags": [],
          "implicitDependencies": [
            "onlinestore-client"
          ]
        },
        "onlinestore-admin-e2e": {
          "tags": [],
          "implicitDependencies": [
            "onlinestore-admin"
          ]
        }
      }
    


    2단계: tslint.json 파일에 시행 추가


    nx-enforce-module-boundaries 파일에 아래tslint.json 배열을 추가합니다.

     "nx-enforce-module-boundaries": [
          true,
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "scope:sales",
                "onlyDependOnLibsWithTags": [
                  "scope:sales",
                  "scope:branding"
                ]
              },
              {
                "sourceTag": "scope:customers",
                "onlyDependOnLibsWithTags": [
                  "scope:customers",
                  "scope:branding"
                ]
              },
              {
                "sourceTag": "scope:branding",
                "onlyDependOnLibsWithTags": [
                  "scope:branding"
                ]
              }
            ]
          }
        ],
    


    경계 제약 테스트



    이제 sales-products.module.ts로 이동하여 아래 가져오기를 수행하면 됩니다.

    판매 서비스 규칙을 기억하십시오: 👍
  • 판매 프로젝트는 브랜딩 프로젝트에 따라 달라질 수 있음
  • 판매 프로젝트가 다른 판매 프로젝트에 종속될 수 있음
  • 판매 프로젝트는 고객 프로젝트에 종속되지 않아야 합니다.

  • 판매 서비스 경계를 ​​테스트해 보겠습니다.


  • 1. 브랜딩 범위에서 SharedLoggerModule 가져오기를 시도하고 npm run affected:lint를 실행하면 오류가 표시되지 않습니다.

  • // sales project
    import { SharedLoggerModule } from '@myorg/shared/logger';
    


  • 2. 고객 범위에서 CustomersUserEditorModule 가져오기를 시도하고 npm run affected:lint를 실행하면 오류가 표시됩니다.

  • // Sales project can not depend on Customers project
    import { CustomersUserEditorModule } from '@myorg/customers-user-editor';
    


    아래 오류가 표시됩니다.

    > ng run sales-products:lint
    Linting "sales-products"...
    C:/Projects/GitHub/nx-repo/myorg/myorg/libs/sales/products/src/lib/sales-products.module.ts:9:1
    ERROR: 9:1  nx-enforce-module-boundaries  A project tagged
    with "scope:sales" can only depend on libs tagged with "scope:sales", "scope:branding"
    



  • 3. 판매 서비스에서만 SalesProductEditorModule 프로젝트를 가져오고 npm run affected:lint를 실행하면 오류가 표시되지 않습니다.

  • // Sales project can depend on other sales project
    import { SalesProductEditorModule } from '@myorg/sales-product-editor';
    


    결론



    그래서 프레임워크가 기본적으로 경계 제약 조건을 제공하는 방식Nx Monorepo이 마음에 들었습니다.

    풀 스택 개발자 되기 💻



    풀 스택 개발자가 되고 새로운 소프트웨어 개발자 또는 수석 개발자/설계자로 캐리어를 성장시키려는 경우. 전체 스택 개발 교육 프로그램에 가입하는 것을 고려하십시오. All-Access Monthly 멤버십 플랜이 있으며 모든 비디오 코스, 슬라이드, 소스 코드 및 월간 화상 통화에 무제한으로 액세스할 수 있습니다.
  • 현재 및 미래의 Angular, node.js 및 관련 과정에 액세스하려면 All-Access Membership PRO plan을 구독하십시오.
  • PRO 플랜의 모든 것을 얻으려면 All-Access Membership ELITE plan에 가입하세요. 또한 Rupesh와의 월별 라이브 Q&A 화상 통화에 액세스할 수 있으며 의심/질문을 하고 더 많은 도움말, 팁 및 요령을 얻을 수 있습니다.

  • You bright future is waiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role.

    좋은 웹페이지 즐겨찾기