npm --save, --save-dev 사용 이유

프로젝트를 만들었다고 치자 그 프로젝트에서 npm install을 했지만 만약 다른 프로젝트에서 같은 모듈이 필요하다면

10개고 100개고 직접 깔기가 힘들게 된다.

 

그래서 npm install을 받을 때 --save옵션으로 package.json의 dependencies 부분에 저장하는 것이다.

 

--save뒤에 붙는 -dev는 무엇일까?

 

-dev는 모듈을 똑같이 package.json에 저장하기는 하지만 devDependencies안에 저장한다.

 

{
  "name": "new project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --testPathIgnorePatterns=/src/__tests__/config/",
    "test:config": "react-scripts test --testPathPattern=/src/__tests__/config/",
    "integration-test": "start-server-and-test 'serve -s build -p 3000' http://localhost:3000 'cypress run'",
    "eject": "react-scripts eject",
    "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
    "format:check": "prettier --check '**/*.{js,jsx,ts,tsx}'",
    "format:write": "prettier --write '**/*.{js,jsx,ts,tsx}'",
    "updateLPsAPR": "NODE_PATH=./src ts-node --compiler-options '{\"module\":\"commonjs\"}' scripts/updateLPsAPR.ts",
    "deploy": "gh-pages -d build",
    "postinstall": "patch-package"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    [여기에 --save로 설치한 module이]
  },
  "devDependencies": {
    [여기에 --save-dev로 설치한 module이 들어간다]
  }
}

 

그렇담 dependencies와 devDependencies의 차이점은 뭘까?

dependencies에 있는 모듈들은 install을 하면 전부 설치가 된다.

devDependencies에 있는 모듈들은 install 할때 -production옵션을 붙이면 빠지고 설치된다.