Lerna typescript 구성

Lerna는 node package로 웹 컴포넌트(모듈) 개발할 때 꼭 필요한 고마운 도구라고 생각.

Lerna는 구성이 간편하지만, 이해하지 않으면 헷갈리거나 오작동을 겪기 쉬움.

사전 설정

1. node 14 및 yarn 설치 (yarn workspaces 활용)
2. Node package 구조와 Lerna에 대한 기본 이해
3. lerna를 구성할 디렉토리 생성

초기 구성

1. Lerna 초기화

$ npx lerna init
lerna notice cli v3.22.1
lerna info Initializing Git repository
lerna info Creating package.json
lerna info Creating lerna.json
lerna info Creating packages directory
lerna success Initialized Lerna files
$

2. lerna.json 수정

{
  "version": "0.1.0",
  "useWorkspace": true,
  "npmClient": "yarn"
}

3. package.json 수정

{
  ...,
  
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "bootstrap": "lerna bootstrap --use-workspaces",
    "start": "lerna run start --stream",
    "build": "lerna run build --stream",
    "watch": "lerna run watch --stream"
  }
}

4. .gitignore 추가

node_modules
yarn.lock

활용 방법

1. packages 디렉토리 안에서 module 패키지와 app 패키지를 따로 두고 활용

• app 패키지
  1. lerna run start(npm start 스크립트)에 대응해야 함
  2. module 패키지 의존성 선언(이름과 버전)이 lerna packages 내부 module 패키지와 일치할 때만 즉시 참조 가능 - 이 참조 관계가 변경될 경우 lerna bootstrap 필요
• module 패키지
  1. node package entry 파일(package.json의 "main") 관리 필요
  2. npm 스크립트 마련 - build, watch

{
  ...,
  
  "scripts": {
    ...,
    
    "build": "tsc",
    "watch": "tsc --watch"
  },
  
  ...
}

2. root 디렉토리의 npm 스크립트 실행 관점 설명

- yarn bootstrap: 위(lerna bootstrap)에서 설명
- yarn build: 내부 패키지들에서 npm build 스크립트 실행
- yarn start: 내부 app 패키지들에서 npm start 스크립트 실행
- yarn watch: 내부 module 패키지들에서 npm watch 스크립트 실행