Package.json

0. what is "npm-init"?

이 글을 읽기 전 npm init 명령어를 알면 좋습니다.

1. What is package.json?

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

2. What is run script?

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

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

3. dev-dependency

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

{
    "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"
      }
}

등록하기 위해서는 --dev 옵션을 주도록 한다.

$ yarn add @babel/core --dev

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

4. dependency

직접 production과 관련 있는 dependency
등록을 해줘야 다른 팀원들도 npm install을 이용하여 코드에서 해당모듈을 쓸 수 있다.(팀원 갈등 해결)

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

• npm을 쓸 때는 '--save' option을 줘야 한다.

$ yarn add react

	or

$ npm install --save react

git에서 받은 project는 node modules이 제외된 상태에서 받기 때문에 처음 시작할 때 'npm install'을 실행하면 package.json에 있는 dependency를 바탕으로 설치한다.

5. what is "npm start"?

아래 코드와 같이 package.json에 정의되어 있다.

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

보통 Server start 코드를 셋팅한다.

"start": 'node server.js(서버 파일명)'

nodemon: 변경 사항을 저장해서 즉각적으로 실행시키는 라이브러리

"start": 'node server.js(서버 파일명)' -> "start": 'nodemon server.js(서버 파일명)'

출처: codestates