[Vue.js] NPM

출처

프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의

 

---

 

◽ Node.js란?

자바스크립트 실행환경이다. 

 

 

◽ NPM(Node Package Manager)이란?

자바스크립트 라이브러리를 관리해주는 도구이다.

npm을 설치하면 node.js도 함께 설치된다.

 

 

◽ NPM의 장점

- 라이브러리 관리가 쉽다.  package.json 파일로 관리할 수 있다.

- CDN 방식의 경우, 태그를 가져오는 과정이 번거롭다.

 

 

◽ NPM 명령어

npm init // npm 설정
npm init -y // 기본값을 바로 설정해준다.

// 기본값
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

 

 

◽ 특정 라이브러리를 설치하는 명령어

- 실행하면 node_modules 폴더가 생성된다.
- 설치된 라이브러리는 package.json 파일 안에 추가된다.

- 아무것도 붙이지 않은 경우 '--save-prod'가 붙은 것으로 간주된다.

npm install jquery

 

 

◽ 전역설치

- '--global'을 붙이게 되면 시스템 레벨, 물리적 경로에 전역으로 설치된다. window 환경의 경우, [AppData/Roaming/npm/node_modules]경로에 생기게 된다. 

- 시스템 상에서 명령어로 인식할 수 있게 제공하는 라이브러리의 경우 명령어로 사용할 수 있다. 예를 들어, npm i package 처럼 gulp같은 라이브러리도 명령어로 사용할 수 있다.

// package.json의 "dependencies"에 생성된다.
npm i vue --global
npm i vue -g

 

 

◽ 지역설치

- 프로젝트에서 사용할 라이브러리가 아닌, 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치할 때 사용한다.

// package.json의 "devDependencies"에 생성된다.
npm i vue --save-dev
npm i vue -D

 

 

◽ Dependencies와 devDependencies의 차이

- dependencies

배포용 라이브러리이다. application의 로직을 구현하는 것과 직접적인 연관이 있다.

어플리케이션의 화면 동작 상 필요한 라이브러리의 모음으로, 빌드 시간이 상당히 소요될 수 있으므로 신중하게 설치해야 한다.

ex) vue, angular, react...

 

- devDependencies

개발할 때 도움을 주는 개발용 라이브러리의 모음이다.

npm run build 시(=배포 시) 포함되지 않는다.

ex) webpack, js-conpression, sass