[Webpack] NPM

NPM (Node Package Manager)

전 세계 자바스크립트 라이브러리가 있는 공개 저장소

npm | build amazing things

NPM 사용 시 장점

• 라이브러리 목록과 버전관리가 용이
• 라이브러리 CDN 사용 시 CDN을 찾기 위한 시간이 많이 소요

NPM 시작하기

Node.js와 NPM 버전 확인

// Terminal
// Node.js
jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/LearnWebpack
$ node -v

// NPM
jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/LearnWebpack
$ npm -v

NPM 초기화 명령어 - init

jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/LearnWebpack/npm
$ npm init  // -y 옵션 추가 시 default 정보로 초기화(입력 과정 생략)
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\dev\study\LearnWebpack\npm\package.json:

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


Is this OK? (yes)

결과

 

NPM 설치 명령어 - install

// Terminal
jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/LearnWebpack/npm
$ npm install jquery  // jquery install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN npm@1.0.0 No description
npm WARN npm@1.0.0 No repository field.

+ jquery@3.5.1
added 1 package from 1 contributor and audited 1 package in 1.029s
found 0 vulnerabilities

결과

 

NPM 지역설치

설치 명령어 : npm install 라이브러리

설치 경로 : 해당 프로젝트의 node_modules/

 

지역설치 옵션

// npm install 라이브러리 --save-prod
// package.json의 dependencies에 등록
npm i 라이브러리

// npm install 라이브러리 --save-dev
// package.json의 devDependencies에 등록
npm i 라이브러리 -D

 

NPM 전역설치

설치 명령어 : npm install 라이브러리 --global

설치 경로 : %USERPROFILE%\AppData\Roaming\npm\node_modules (Windows), /usr/local/lib/node_modules (Mac)

 

개발용 라이브러리(devDependencies)와 배포용 라이브러리(dependencies) 구분하기

• dependencies : 화면 로직과 관련
• devDependencies : 개발 보조 라이브러리

구분하는 이유는 배포용 라이브러리는 npm run build로 빌드를 하게되면 최종 애플리케이션 코드 안에 포함이 되지만 개발용 라이브러리는 애플리케이션 코드에서 빠져 빌드하기 때문

 

NPM 삭제 명령어 - uninstall

// Terminal
npm uninstall 라이브러리