npm-workspace 구성하기

[4BFC]

npm 설치

• npm을 설치하기 위한 명령어

    npm init -y
  

• node_modules를 설치하기 위한 명령어

    npm install
  

  • 설치 후 package.json 구성

      {
        "name": "trendgarage",
        "packageManager": "npm@10.8.1",
        "workspaces": [
          "trends/*"
        ],
        "version": "1.0.0",
        "description": "트렌드를 따라가지위해 공부한 기록 입니다.",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "keywords": [],
        "author": "",
        "license": "ISC"
      }
    

  • 📌 여기서 설치된 후에 package.json만 확인하면 안되고 package.lock.json을 통해서 내가 설정한 하위 디렉토리들이 잘 종속 되어 있는지 확인 해야한다.

        {
          "name": "trendgarage",
          "packageManager": "npm@10.8.1",
          "workspaces": [
            "trends/*"
          ],
          "version": "1.0.0",
        //-- 이하 생략 --
          "keywords": [],
          "author": "",
          "license": "ISC"
        },
        "node_modules/jest": {
          "resolved": "trends/jest",
          "link": true
        },
    

.npmrc 설정하기

• 루트에 있는 node_modules package에 의존할 수 있는 환경을 만든다. 이로 인해 하위 디렉토리에 불필요하게 node_modules package를 생성하지 않게 할 수 있다. 환경 변수로 설정하는 방식도 있지만 아래와 같은 방식으로 관리 할 수 있게 명령어를 작성하면 된다.(참고로 node_modules의 의존성을 완전히 분리한 것이 아니다.)
• .npmrc 설정 확인 작업

    npm config get userconfig
    C:\Users\<userName>\.npmrc
    
    npm config set prefix "C:\Users\<userName>\.npm-global"
    
    npm config get prefix
    C:\Users\<userName>\.npm-global
    
    npm config get package-lock
    true
    
    npm config get registry
    https://registry.npmjs.org/
    
    npm config get cache
    C:\Users\<userName>\AppData\Local\npm-cache
    
    npm config get userconfig
    C:\Users\<userName>\.npmrc
  

하위 디렉토리 설정

• jset를 설치하고 실행한다. 여기서 yarn-workspace와 달리 루트에서 workspace로 진입해서 패키지를 설치 해야하 한다.

    npm install ts-jest --workspace=trends/jest --save-dev
  

pnpm과 npm

• 지금까지 내가 착각하고 있던 것은 패키지를 설정하면 node_modules가 왜 계속해서 하위 디렉토리에 생겨나는지 의문이였다. 그 이유는 workspace는 패키지를 package.lock을 통해서 workspace에 설정한 디렉토리들을 루트에 의존하면서 관리하는 역할이다. 즉, pnp를 사용해서 node_modules에서 벗어날 수 있는 것이다. 현재 지금으론 npm을 통한 workspace를 구현하는 것에 초점이 맞추었기 때문에 pnp를 따로 다뤄보진 않을 것이다.

TypeScript 설치하기

• global로 TypeScript를 설치한다.

    npm install -g typescripit // 글로벌로 설치
    or 
    npm install --save-dev typescript // devDepenecies에 설치
  

• 루트에서 tsc.config는 다음과 같이 설정한다.

    npx tsc --init
  

  위의 명령어를 통해서 ts.config.json이 자동으로 설치가 된다. 설치된 기본 스크립트는 다음과 같다. (주석을 제외한 설정값만 작성했다.)

    {
      "compilerOptions": {
        "target": "es2016",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
      }
    }
  
  

• 하위 디렉토리에 상위 ts.config.json 설정하기
  • 하위 디렉토리에 상위 ts.config를 상속 받아서 사용하기 위해선 하위 디렉토리 ts.config.json에 extneds를 설정해 줘야한다. 하위 ts.config.json을 다음과 같다.

      {
        "extends": "../../tsconfig.json",
        "compilerOptions": {
          "outDir": "./dist",     // 하위 디렉토리의 컴파일된 파일이 저장될 위치
          "rootDir": "./src"      // 하위 디렉토리의 소스 코드 위치
        },
        "include": ["src/**/*"],   // 포함할 파일 경로
        "exclude": ["node_modules", "dist"]  // 제외할 경로
      }
    

    상위 디렉토리에는 해당 하위 설정을 지정 해줘야 한다. 상위 ts.config에는 "include": ["trends/**/*"]를 추가해주면 오류가 발생하지 않고 정상적으로 동작할 것이다.
  • 이후 tsc 명령을 실행하면 다음과 같다.

      'tsc' is not recognized as an internal or external command,
      operable program or batch file.
    

    그렇다 현재 npm의 -g의 설정이 잘 못되 었는 것이다. 보통은 위에 발생한 에러는 --save -dev를 통해서 devDependencies에 설치가 되면 tsc 명령을 사용할 수 없어서 발생한다. 그렇다면 왜 -g로 설치한 나에겐 이러한 오류가 발생할까? 현재 추론으론 .npmrc가 로컬 사용자 정보에서 2개가 존재한다. 사용자 디렉토리에 하나 .npm-global에 하나 지난번 설정으로 문제가 발생한 것으로 보여진다. 둘 중 하나를 제거 해야만 정상적으로 동작할 것이다. 하지만 이부분에 시간을 쏟아내기 어려움이 있어서 대체할 명령어는 다음과 같다.

      npx tsc
    

Summary

• 완벽하게 workspace를 구성하지는 못했다. 아쉬움도 많고 탈도 많고 많은 시간을 쏟아 부었음에도 명확한 원인과 문제를 분석하지 못한 탓인지 소위 삽질이라고 불리는 행위의 시간을 너무 오래해왔다. 답답하고 아쉬움을 미루고 우선은 .npmrc 설정을 다시 학습하고 원인을 파악하고 -g의 원인을 다시 잘 파악을 해보기를 바라면서 이번 이슈는 마무리 지어 보려고 한다.