yarn berry, zero install

 

 

🍓 yarn은 기존의 npm이 가지고 있던 문제점들을 해결하기 위해 등장했다.

 

 

🍓 pnp (Plug n Play)

Yarn 최신 릴리즈의 기본 설치 전략이다. 실제로 plugin을 만들 수 있다. yarn을 원하는대로 확장할 수 있다.

기존의 무거웠던 node_modules 대신, 패키지들에 대한 정보는 .zip 파일로 압축하여 .yarn/cache 폴더에 저장하고 이를 찾기 위한 정보를 .pnp.cjs (또는 .pnp.js) 파일에 기록한다.

중복 설치를 방지하고 유령 의존성 문제를 해결한다.

 

🍓 Zero Install

npm 레지스트리로부터 모듈을 설치하는 것이 아니라, 최초 .yarn/cache에 zip 형태로 보관하여 저장소에 같이 push 하는 형태이다. 깃에 같이 올리기 때문에 단점도 있지만 git pull 하는 순간, 설치가 완료된 것과 다름 없다.

yarn berry를 통해 만든 의존성 폴더는 크기가 작기 때문에 git clone 이후 별도의 설치 과정을 생략한 뒤 바로 사용하는 zero install을 시도할 수 있다.

zero install을 사용할 경우 git clone이 끝나자마자 바로 빌드가 가능하기 때문에 배포까지의 속도를 감소시킬 수 있다.

https://yarnpkg.com/features/caching#zero-installs

Cache strategies | Yarn

 

🍓 참고

https://toss.tech/article/node-modules-and-yarn-berry

node_modules로부터 우리를 구원해 줄 Yarn Berry

 

 

🍓 명령어

$ npm install -g yarn
$ yarn --version

$ npx create-react-app yarn-berry-app --template typescript

// node_modules와 package.lock.json 지우기

$ yarn set version berry
$ yarn install

 

 

🍓 폴더 구성

.git, .yarn, public, src

.gitignore, .pnp.cjs, README.md, yarn.lock, .pnp.loader.mjs, package.json, tsconfig.json, .yarnrc.yml

 

 

 

원래 그냥 git pull 이후에 npm install을 자동으로 되게 하고 싶어서 찾아보기 시작한건데...

일단 이런 글도 있다.

https://dev.to/zirkelc/automatically-install-npm-dependencies-on-git-pull-bg0

Automatically Install NPM Dependencies on Git Pull

 

그리고 응용해볼만한 hook도 있다. post-merge

https://git-scm.com/docs/githooks#_post_merge

Git - githooks Documentation

 

Husky를 사용해서 해보면 될 것 같다

.husky 폴더 안에 post-merge 라는 파일명으로 저장

zsh여서 bash의 경우 변경이 필요할 수도 있다고 한다.

#!/bin/zsh
. "$(dirname "$0")/_/husky.sh"

IFS=$'\n'
# regex supports mono-repos with a package.json at root-level and at package-level
PACKAGE_LOCK_REGEX="(^packages\/.*\/package-lock\.json)|(^package-lock\.json)"
# extract all paths to package-lock.json files 
PACKAGES=("$(git diff --name-only HEAD@{1} HEAD | grep -E "$PACKAGE_LOCK_REGEX")")

if [[ ${PACKAGES[@]} ]]; then
  for package in $PACKAGES; do
    echo "📦 $package was changed. Running npm install to update your dependencies..."
    DIR=$(dirname package)
    cd "$DIR" && npm install
  done
fi

 

 

 

++ 어쨌든 이 글 주제는 yarn berry니까...!

https://haranglog.tistory.com/28

Yarn berry에서 React + Jest + Cypress + TypeScript + Github Actions CI/CD를 세팅해보자

이름들만 봐도 힙하다 ㅎㅎㅎ