npm install, dependencies로 해야할까? devDependencies로 해야할까? (dependencies vs devDependencies)

package.json파일을 보면 dependencies와 devDependencies가 분리되어 있는 것을 볼 수 있다. create react app 으로 프로젝트를 개발할 때는 하나하나 구분해서 넣을 필요가 없었지만 모듈 번들러 부터 만지려니 어떤 패캐지를 어디에 포함시켜야할지 헷갈렸다. react를 devDependencies에만 넣어도 되나? typescript는? babel은...?  이런 고민들을 해결한 과정을 정리했다. 

dependencies

dependencies 내부에 들어가 있는 패캐지들은 실제 production으로 배포할 때도 사용할 수 있다. 즉 배포할 때도 다 담아서 나가야 하는 패캐지들을 이쪽에 포함시켜야 한다. 어플의 로직구현, 화면 동작과 관련있는 라이브러리들이 저장된다. 

 "dependencies": {
   ...
  },

devDependencies

devDependencies에 있는 패캐지들은 production 빌드할 때 포함되지 않는다. 즉 실제 배포할 때는 함께 나가지 않고 개발 단계에서만 활용되는 라이브러리들이다. 

 "devDependencies": {
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.0",
    "react-textarea-autosize": "^8.3.0",
    "redux-devtools-extension": "^2.13.8"
  }

npm install -D 옵션

-D 옵션으로 패캐지를 설치하게 되면 devDependencies에만 패캐지가 추가된다. 

npm install -D babel-loader

그래서 뭘 devDependencies에 포함시켜야 하는데? 

devDependencies는 개발 환경에서만 쓰이고 dependencies는 배포에도 사용되기 때문에 개발 환경에서만 쓰이는 것들은 모두 devDependencies로 넣는게 좋을 거라 생각한다. 즉, devDependencies에 넣을 수 있는건 모두 devDependencies에 넣자! 

그렇다면 typescript는? react는? webpack, babel은 어디로 넣어야할까? creat-react-app을 사용한다면 자동으로 구분해서 넣어주겠지만, 그게 아니라면 이런 필수적인 패키지들을 어디로 넣어야할지 고민될 것이다. 

typescript, react 등을 devDependencies로 넣어도 될까? 

typescript로 예를 들어보자. CRA에서는 typescript를 dependencies에 포함되고 있다. https://github.com/facebook/create-react-app/issues/6180 해당 이슈를 읽어보면, 둘 다 상관없지만 우리는 dependencies로 넣었어. 라는 이야기이다.

왜 상관 없을까? 이 부분은 js의 빌드 과정에 대한 이해가 필요한데 다음 포스팅을 참고하기 바란다. https://juhi.tistory.com/92

모듈 번들러란? Webpack의 역할은?

결국 모듈 번들러로 인해서 js가 빌드된 결과는 '하나의 js 코드 파일'로 만들어진다. 결국 모두 es5가 되기 때문에 실제 운영환경에서 typescript, react와 같은 고급 문법의 패캐지가 필요 없어지는 것이다.