패키지 매니저 npm에서 yarn berry(zero install)로 바꾸기

진행 중이던 프로젝트(cra로 생성했음..)에서 기존에는 패키지 매니저로 npm을 사용하고 있었다.
yarn berry zero install 직접 써보고 싶어서 다음과 같은 과정을 거쳐 마이그레이션을 진행했다.

yarn 설치 및 재설치

• yarn 이미 설치 되어있어서 다음 단계로 바로 넘어가서 yarn 명령어 쳤는데, 다음과 같이 Cannot find module '.../yarn-3.3.1.cjs' 어쩌고 하면서 에러 메시지 뜸.

• yarn 제거하고 재설치했다.
  • 제거하는 명령어는 어떻게 설치했는지에 따라 다르므로 How Do I Uninstall Yarn(stack overflow) 참고
  • 설치 명령어

npm install --global yarn

 

프로젝트 디렉토리로 이동하여 yarn 명령어 입력하기

cd 프로젝트디렉토리

yarn

• 이 결과로 yarn.lock 파일이 생성될 것이다.

 

yarn berry로 진화시키기

• 프로젝트 디렉토리에서 다음 명령어 입력

yarn set version berry

• 이 명령어를 입력하면 다음과 같은 변화가 일어난다.
  • 우선 루트 디렉토리에 다음 두 가지 파일이 새롭게 추가된다.
    • .yarnrc.yml
    • .yarn/releases/yarn-3.3.1.cjs
  • package.json 파일에 다음 필드가 새롭게 추가된다.
    • "packageManager": "yarn@3.3.1"

 

.yarnrc.yml 파일에 nodeLinker 정보 추가해주기

• nodeLinker 항목은 노드 패키지를 설치할 때 어떤 링커를 사용할지 정의한다. 다음 세 가지 중에서 선택할 수 있다.
  • pnp
  • pnpm
  • node-modules
• 기존에 있던 node-modules를 사용할 것이므로 다음과 같이 추가해준다.

// .yarnrc.yml
yarnPath: .yarn/releases/yarn-3.3.1.cjs
nodeLinker: "node-modules" 👈 이 부분 추가

• 여기까지 했으면 일단 중간 커밋 ㄱㄱ

 

yarn install 명령어 입력하기

• 프로젝트 디렉토리에서 다음 명령어를 입력하여 프로젝트의 모든 디펜던시 설치

yarn install

• lockfile을 migrate하기 위함이라는데 무슨 말?
  • 이 단계에서 yarn install을 실행하면 package-lock.json에 있던 의존성 트리에 대한 정보를 yarn.lock 파일로 가져올 수 있다.
• 무튼 이 명령어 입력하고 나면 .yarn 밑에 다음과 같이 엄청난 양의 .zip 파일들이 들어있는 cache 디렉토리와 install-state.gz 파일 하나가 추가된다.

• 그리고 이로 인해 상당한 양의 변경사항이 git에 잡히므로, .gitignore에 다음 내용을 추가해서 싹 다 무시하도록 한다.

# yarn berry
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

• 커밋 ㄱㄱ

 

nodeLinker 설정 바꾸고 또 yarn install

• 여기까지 했으면 아직 zero install은 아니다. zero install을 사용하기 위해 우선은 아까 세팅해준 nodeLinker 값을 "pnp"로 바꿔주던지, 아니면 이 필드를 아예 없애준다.
• 루트 디렉토리에 .pnp.cjs, .pnp.loader.mjs 파일이 추가되는데 이 중 .pnp.cjs 파일은 앞서 생성된 .yarn/cache 내에서 각 패키지들이 어디에 위치해있는지 알려주는 역할을 한다.
• 프로젝트 디렉토리에서 다시 yarn install 명령어를 입력한다.

yarn install

• 커밋 ㄱㄱ

 

VSCode IDE tools 사용을 위해 추가 과정 진행

• workspace에서 eslint, prettier, ts를 지원하는 IDE tools가 정상적으로 동작하려면 다음과 같이 추가적인 과정을 진행해야 한다.
• 먼저 VSCode 확장 중 ZipFS를 설치한다.

• 프로젝트 디렉토리에서 다음 명령어를 입력한다. 그럼 루트 디렉토리에 아래 그림과 같은 것들이 추가된다.

yarn dlx @yarnpkg/sdks vscode

• 그리고 만약에 타입스크립트 쓰고 있으면 타입스크립트 버전을 workspace 버전에 맞춰 사용하도록 설정해줘야 한다. 일단 타입스크립트 파일 아무거나 열면 VSCode 하단 상태바 오른쪽에 중괄호 모양의 아이콘이 있다. 그거 클릭하면 버전 선택하는 메뉴가 뜬다. 그 메뉴 클릭하면 윗쪽에 다음과 같이 Use Workspace Version(작업 영역 버전 사용)을 선택하면 된다. (참고: VSCode - Using the workspace version of TypeScript)

출처: https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript

• 커밋 고고

 

react-is 에러 해결하기 (styled-components 사용하는 경우)

• 여기까지 하고 신나게 yarn start 실행시켜보면 다음과 같이 컴파일 과정에서 에러가 발생하게 된다.

• 원인 및 해결 방법은 아래 블로그 참고했다.
  
  • https://helloinyong.tistory.com/341

[Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기

• .yarnrc.yml에 다음과 같이 추가해주고 yarn install 명령어 실행

// .yarnrc.yml
yarnPath: .yarn/releases/yarn-3.3.1.cjs
packageExtensions: 👈 이 줄부터 추가
  'styled-components@*':
    dependencies:
      'react-is': '^18.2.0'

yarn install

 

불필요한 파일 및 디렉토리 제거

• package-lock.json은 더 이상 필요없으므로 제거

일단 여기까지 하고 yarn start 명령어 입력하면 앱이 실행되기는 한다. 그런데 아래와 같이 문제를 하나 발견해서 원인 파악 및 해결 해보려고 함..

트러블슈팅

node_modules가 자꾸 생성되는데 괜찮은 건가?

• zero-install 도입 전에는 node_modules가 없을 경우 start 명령어 입력 시 앱 실행이 되지 않았다. npm/yarn install 명령어를 먼저 실행해서 필요한 패키지를 설치하여 node_modules가 만들어진 뒤에야 앱 실행이 가능했다.
  
  • node_modules 삭제하고 .yarnrc.yml 파일에서 nodeLinker: "node_modules"로 설정한 다음에 yarn start 해보면 다음과 같이 에러 메시지 뜨면서 앱 실행이 안 되는 거 확인할 수 있음.

Usage Error: Couldn't find the node_modules state file
- running an install might help (findPackageLocation)

• 반면 nodeLinker가 "pnp"로 설정된 상태, 즉 zero-install 방식으로 돌아가도록 해놓으면 node_modules 없는 상태에서 yarn start를 입력해도 앱이 바로 실행이 된다.
• 근데 이렇게 yarn start를 입력하고 나서 보면 node_modules가 다시 생성되어 있음을 알 수 있다. 물론 내부 구조라던지 전체적인 크기에서 nodeLinker: "node_modules"일 때와 nodeLinker: "pnp"일 때 큰 차이가 있긴 했지만, 공식 문서에서도 계속 node_modules는 더 이상 없을 거니까 주의해라 어쩌고저쩌고 해서 node_modules가 아예 없어야 되는 게 아닌가?싶었다.
• yarn berry 써봐야겠다고 마음 먹은 게 우테코4기 비녀님 영상 보고 그랬던 거라서, 이 분이 참여하셨던 프로젝트 레포 찾아서 클론하고 직접 실행시켜봤다. 역시 node_modules가 생성되지 않는다!!! yarn start를 입력할 때도, yarn install을 입력할 때도..(그리고 이쪽에서도 yarn dlx @yarnpkg/doctor 돌렸을 때 일단 나랑 동일한 현상 있음.)
  • https://github.com/woowacourse-teams/2022-thankoo

GitHub - woowacourse-teams/2022-thankoo: 당신의 마음을 전달하세요, 땡쿠 💌

• 프로젝트를 생성할 때 cra로 만들었는데, 그거랑 관련이 있는 걸까? cra로 생성하고 yarn berry 사용하는 모르는 사람 프로젝트 돌려보니 나처럼 node_modules 생성됨.
• 일단 이렇게 생성되는 node_modules 들여다보면 다음과 같이 babel-loader와 타입스크립트 관련된 내용이 담겨있음을 알 수 있다.

• 이로 미루어보건대 cra의 기본 webpack 설정 중 로더 쪽 설정이랑 관련이 있는 문제인 것 같은데, cra에서 webpack.config.js 보려면 eject 실행해야 돼서 망설여짐; 이럴 때 쓰라고 craco가 있는 거지..! 절대경로 쓰려고 craco alias 설정해두느라 craco는 설치해뒀어서, 다음과 같이 webpack 설정 덮어씀. cra 기본 webpack 설정 참고해서 문제와 관련된 것으로 짐작되는 부분들에 덮어씌워줬고, 이 부분들은 현재 프로젝트에서 덮어씌워도 크게 문제되지 않을 부분들이라고 판단돼서 이렇게 했고, 다른 케이스에 이 방법을 적용할 때에는 어느 부분까지 덮어씌워도 괜찮은지 따로 살펴볼 필요 있을 듯.

// eslint-disable-next-line @typescript-eslint/no-var-requires
const CracoAlias = require("craco-alias");
const path = require('path');

module.exports = {
  // (생략)
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules = [
        {
          test: /\.tsx?$/,
          include: path.resolve(__dirname, './src'),
          use: ['ts-loader'],
        },
      ];
      webpackConfig.resolve = {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      };

      return webpackConfig;
    }
  }
};

• 이거까지 해주고 yarn start 하면 일단 babel-loader는 더 이상 생성되지 않으나, node_modules/.cache/tsconfig.tsbuildinfo 이 친구는 여전히 생성됨.. 하~;; tsconfig.json 건드려보고 구글링도 이것저것 해봤는데 성과는 없었음. 그나마 다행인 건 34KB 밖에 안 된다는 거..?

• 찝찝하지만 오늘은 이 정도에서 끝내고.. 곧 시작할 대망의 파이널 프로젝트(나만무)에서는 cra 말고 빌드 환경 직접 구성해서 써야겠다.. yarn berry 안 쓰더라도 일단 cra는 안 쓰는 걸로.. 낄낄

 

---

<참고>

• https://yarnpkg.com/getting-started/migration

Migration

• npm/yarn classic으로 된 기존 프로젝트에 yarn berry 적용기

npm/yarn classic으로 된 기존 프로젝트에 yarn berry 적용기

• https://webpack.kr/configuration/resolve/

Resolve | 웹팩

• https://github.com/dilanx/craco/issues/132

Cannot override webpack's resolve · Issue #132 · dilanx/craco