알기 쉽게 정리한 package.json 총 정리 : 프론트엔드 개발자를 위한 웹팩

package.json이란?

package.json이 무엇인지 알기 이전에 직접 package.json을 만들어 보자.

 

package.json을 만들 폴더로 이동을 한 후에 아래 명령어를 입력한다.

$ npm init
$ npm init -y

 

정말 알기 쉽게 정리한 npm이란?

 

해당 명령어를 실행시키면 package.json이라는 파일이 생성된다. 그리고 생성된 파일의 모습은 아래와 같다.

 

package.json

{
  "name": "packagejson-started",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

 

 

package.json은 npm 패키지들을 나의 프로젝트에서 사용하기 위해서 필수로 필요한 문서이다.

• package.json에는 나의 프로젝트에서 사용되고 있는 npm 패키지들에 대한 정보들을 나타낸다.
• => npm 패키지들의 정보는 설치된 옵션, 설치된 패키지들의 종류, 설치된 패키지의 설치 범위 등이다.
• package.json은 json 형태의 문서(Data)이다.
• npm 패키지와 javascript 라이브러리는 동일한 말이다.

 

package.json의 중요 속성 살펴 보기

 

아래의 package.json은 'webpack'과 'lodash'라는 npm 패키지를 설치한 이후의 package.json 파일이다.

$ npm install lodash
$ npm install -D webpack

 

package.json

{
  "name": "getting-started", //name 속성
  
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }, //scripts 속성
  
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "webpack": "^5.94.0",
    "webpack-cli": "^5.1.4"
  }, //devDependencies 속성
  
  "dependencies": {
    "lodash": "^4.17.21"
  } //dependencies 속성
}

• scripts
• devDependencies
• dependencies

 

scripts 속성

나의 프로젝트에서 실행되는 script 명령어를 설정하는 속성이다.

 

devDependencies & dependencies 속성

나의 프로젝트에 설치된 npm 패키지들을 확인할 수 있다.

 

npm install lodash 명령어 실행 시 dependencies으로 설정

npm install -D webpack 명령어 실행 시 devDependencies으로 설정

• 즉, npm install 명령어에서 -D 옵션의 차이

 

devDependencies & dependencies 차이점

프로젝트에서 application 로직에 직접 포함되는 개발용 라이브러리일 경우

=> dependencies

 

프로젝트에서 application 로직에 필요하지 않으며 프로젝트 개발에 필요한 라이브러리일 경우

=> devDependencies

 

참고: devDependencies에 포함된 라이브러리의 경우에는 배포 시에는 포함되지 않는다.

npm version

 

아래 'lodash'의 npm 패키지 버전은 4.17.21일까?

"dependencies": {
    "lodash": "^4.17.21" // 메이저, 마이너, 패치
}

 

우선 해당 package.json에서 4.17.21은 해당 npm 패키지의 버전을 가르키는 것이 아니라 설치 범위를 가리킨다.

즉, 프로젝트에 설치된 lodash의 버전이 '4.17.21'일 수도 있고, 아닐 수도 있다는 뜻이다.

 

npm의 version은 MAJOR.Minor.patch로 구성되어 있다.

 

참고: TypeScript 라이브러리의 경우에는 MAJOR.MAJOR.Minor로 구성되어 있다.

 

참고

• https://www.inflearn.com/course/%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9B%B9%ED%8C%A9/dashboard

프론트엔드 개발자를 위한 웹팩 강의 | 장기효(캡틴판교) - 인프런