[Webpack] NPM의 기초

NPM 은 Node Package Manager 이다. node 에서 사용하는 라이브러리들을 관리해준다.

NPM의 장점

1. 라이브러리 관리 측면에서 html에 직접 코드를 삽입하는 것 보다는 package.json을 통해서 관리하는 것이 보기 편하다.
2. 라이브러리 설치 측면에서 웹에서 찾아서 넣는 것 보다 install을 통해 바로 받아오는 것이 편하다.

visual studio code 또는 편집기에서 터미널을 실행한다.

설치가 잘 되어있는지 확인하기 위해 명령어를 입력한다.

node -v //노드의 버전
npm -v  //노드 패키지 매니저 버전

NPM 초기화 명령어

npm init

명령어를 입력하게 되면 프로젝트의 내용을 하나하나 설정할 수 있다.
모두 입력하게 되면 package.json 이 생성된다.

npm init

package name: (test) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/test/package.json:

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

하나씩 입력하지 않고 싶다면 아래 옵션을 추가할 수 있다.

npm init -y

모든 설정을 기본값으로 생성해준다.

npm 라이브러리 설치

npm install '라이브러리' 
//or
npm i '라이브러리'

해당 명령어는 라이브러리를 사용하고 설치하겠다는 명령어이다.
node_modules 밑에 라이브러리가 설치된다.
또한 package.json 에 해당 라이브러리 버전이 추가된다.

npm 라이브러리 삭제

npm uninstall '라이브러리'

node_modules 밑에 라이브러리가 사라지고
package.json 에 해당 라이브러리 버전이 삭제된다.

npm 전역 설치

npm install '라이브러리' --gloabal
//or
npm install '라이브러리' -g

전역으로 설치하게 되면 node_modules에 설치되지 않고 시스템에 전역으로 설치된다.
전역 설치된 경로 mac 기준/usr/local/lib/node_modules

지역 설치 옵션

npm install '라이브러리' --save-prod
npm install '라이브러리' --save-dev
//or
npm i '라이브러리' -P
npm i '라이브러리' -D

dependencies 와 devDependencies 차이

dependencies :vue, jquery, angular 등 로직과 관련된 라이브러리
devDependencies :webpack, sass, js-compression 등 개발할 때 쓰는 보조 라이브러리

개발용(devDpendencies) 라이브러리와 배포용(dependencies) 라이브러리

devDependencies는 배포시에는 포함되지 않는다.
dependencies는 배포할시 포함되므로 라이브러리에 쓰여진 설치법을 이용하거나 인지하여 구분하면된다.