Monorepos를 디버깅하는 3가지 킬러 도구

최근에 저는 단일 리포지토리에서 Monorepos로 많은 마이그레이션을 수행했습니다. 다음은 이러한 설정을 보다 쉽게 ​​디버깅할 수 있는 세 가지 매우 편리한 도구입니다.

1 - 원사 이유 / npm ls

Yarn을 사용하는 경우 특정 종속성이 코드베이스 내부에 있는 이유, 그것이 어떻게 거기에 있는지, 어떤 패키지가 종속되어 있는지 확인하는 데 정말 유용합니다.
yarn why react
Official docs on Yarn why here .

Yarn 사용자가 아닌 경우 다음 명령을 사용할 수도 있습니다.
npm ls
이것을 직접 실행하여 프로젝트 내부의 종속성 오류(빨간색으로 표시됨)에 대해 알아보세요.

또는 패키지 이름을 매개변수로 제공하여 프로젝트에 패키지가 몇 번이나 참여했는지 확인할 수도 있습니다.
npm ls react
의존성의 지옥을 해결하는 데 용감해지세요! 🍀

2 - TypeScript 구성 길들이기

따라서 모노 레포의 구조에 대해 다음과 같은 것이 있다고 가정해 보겠습니다.

├─ apps/
│  ├─ frontend/
│  ├─ backend/
├─ packages/
│  ├─ tsconfig/
│  ├─ config/

tsconfig.json 및 apps/frontend 폴더에 apps/backend가 있고 packages/tsconfig에서 기본 구성을 확장하는 경우가 발생할 수 있습니다.

또한 더 복잡한 경우가 있을 수 있으므로 하루가 끝날 때 특정 프로젝트에서 최종tsconfig.json이 어떻게 보이는지 궁금하다면 다음을 수행할 수 있습니다.
tsc -p apps/frontend --showConfig
이것은 프로젝트가 사용할 전체 병합된 TypeScript 구성을 인쇄할 것입니다.

Original idea from here , Marius에게 큰 인사를 전합니다. 🎉

또한 이를 루트package.json에 다음과 같이 기록하는 것이 좋습니다.
"tsconfig:debug:frontend": "tsc -p apps/frontend --showConfig"
팀이 신뢰할 수 있는 멋진 디버그 스크립트를 제공합니다.

3 - eslint 구성 에이스

내 경험상 eslint 구성은 특히 두 개의 서로 다른 프로젝트에서 이해하고 병합하려고 할 때 정말 빠르게 폭발할 수 있습니다.

🤔 eslint를 실행할 때 어떤 플러그인/규칙이 실제로 사용되고 있는지 확실하지 않습니까?

파일 중 하나에 대해 다음을 시도하십시오.

npx eslint --print-config apps/frontend/what/ever/your/file.ts

이렇게 하면 사용 중인 모든 규칙과 플러그인이 출력되므로 내부에서 일어나는 일을 파악할 수 있습니다.

요약

오늘은 여기까지입니다. 즐거운 디버깅 되시기 바랍니다! 🤘