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

Are you using NRWL/NX monorepo in your company? and you are worried how to configure dependencies so that you can better control your projects? I use nx dependency constraints to restrict which project can depend on whom just like you do in .net or java or any typed language. Read this article to understand how you can configure dependency constraint and visualize your monorepo workspace dependency graph.

종속성 적용이 필요한 이유는 무엇입니까?

Nx Monorepo 작업 공간에는 애플리케이션(앱)과 라이브러리(lib)가 있을 수 있습니다. 앱에는 서버에서 호스팅되는 프로젝트가 있습니다. Lis에는 앱을 지원하는 프로젝트가 있어야 합니다. Libs 폴더 안에는 서비스 프로젝트가 있을 수 있습니다. Libs 내에서 우리는 결국 많은 프로젝트를 생성하게 되며 모든 프로젝트가 다른 모든 프로젝트에 의존할 수 있는 경우 매우 혼란스럽습니다.

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

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

Monorepo 작업 공간 프로젝트 이해

내 monorepo에는 3개의 폴더가 있음을 알 수 있습니다.

Branding , logger , layout와 같은 3개의 프로젝트가 있는 angular material 폴더

Sales 및 product-editor

와 같은 2개의 프로젝트가 있는 products 폴더

Customers 및 user-editor와 같은 2개의 프로젝트가 있는 users 폴더

어떤 프로젝트가 누구에게 의존할 수 있는지 정의

다음은 내 모노 리포지토리에서 적용하려는 종속성 규칙입니다.

판매 프로젝트:

브랜딩 프로젝트에 의존할 수 있음

고객 프로젝트에 의존할 수 없음

고객 프로젝트:

브랜딩 프로젝트에 의존할 수 있음

영업 프로젝트에 의존할 수 없음

브랜딩 프로젝트:

영업 프로젝트에 의존할 수 없음

고객 프로젝트에 의존할 수 없음

좋은 소식은 구성을 사용하여 Nx Monorepo에서 종속성 적용을 무료로 수행할 수 있다는 것입니다. 따라서 아래 단계를 따르십시오.

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로 이동하여 아래 가져오기를 수행하면 됩니다.

판매 서비스 규칙을 기억하십시오: 👍

판매 프로젝트

은 브랜딩 프로젝트

에 따라 달라질 수 있습니다.

은 다른 영업 프로젝트

에 의존할 수 있습니다.

고객 프로젝트에 의존할 수 없음

판매 프로젝트 종속성 규칙 라이브 테스트

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

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

고객 범위에서 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"

판매 서비스에서만 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.

💖 나에게 👋라고 말해!

루페시 티와리
www.rupeshtiwari.com
✉️ Email Rupesh
Fullstack Master의 설립자