Package.json이란?

npm을 활용하기 위한 정보들이 모여 있는 파일로 project 전반에 관한 정보가 들어있다.

Package.json의 구조

run script 하는법

ex)

{
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  }
}

cli에서 해당 코드를 실행시킨다.

예를 들어 test 실행시키고 싶으면 npm start 하면 된다.

dev-dependency란?

production과 관계 없는 개발만을 위한 dependency
ex1)

{
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.2.3",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "^10.0.1",
        "babel-jest": "^23.6.0",
        "babel-loader": "^8.0.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "enzyme": "^3.8.0",
        "enzyme-adapter-react-16": "^1.7.1",
        "eslint": "^5.12.0",
        "eslint-loader": "^2.1.1",
        "eslint-plugin-react": "^7.12.3",
        "jest": "^23.6.0",
        "react-addons-test-utils": "^15.6.2",
        "react-test-renderer": "^16.7.0",
        "webpack": "^4.28.1",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14"
      }
}

ex2)

$ yarn add @babel/core --dev

혹은

$ npm install @babel/core --save-dev

처럼 --dev 옵션을 줘서 등록한다.

dependency

직접 production과 관련 있는 dependency
ex1)

{
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

ex2)

$ yarn add react

혹은

$ npm install --save react

처럼 npm을 쓸 때는 --save 옵션을 줘야한다.

save를 쓰는 이유

우리가 흔히 하는 npm install은 package.json에 있는 dependency를 바탕으로 설치한다.
만약 dependency에 등록 되어 있지않다면 코드에서는 해당 모듈을 쓰고 있지만 npm install로는 설치 되지 않는다.

npm start란?

예를들어

{
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },
}

는 사실은 package.json에 설정 되어 있다.

{
  "scripts": {
    "start": "node index.js"
  },
}

이것은 보통 서버 start 코드의 세팅이다.

여기서 nodemon을 쓰고싶다면

{
  "scripts": {
    "start": "뭔가 script코드를 바꿔야 한다!"
  },
}