NPM(Node Package Manager)

NPM은 전 세계의 개발자들이 만든
다양한 기능(패키지, 모듈)들을 관리.

Node.js를 설치하면 npm도 설치 된다.

---

package.json파일 생성

npm init -y

{
  "name": "npm", // 프로젝트 명(폴더명)
  "version": "1.0.0", // 프로젝트 버전
  "description": "", // 프로젝트 설명
  "main": "index.js", // 현재프로젝트를 하나의 패키지처럼 만들어서 npm 생태계에 업로드 할때 필요한 옵션(삭제해도 무관)
  "scripts": { // 현재 프로젝트에서 사용할 수 있는 여러가지 스크립트 명령들 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [], // 키워드
  "author": "", // 소유주
  "license": "ISC" // 프로젝트 라이센스
}

parcel-bundler 패키지를 설치

npm install parcel-bundler -D

node_modules 폴더, package-lock.json 파일 생성

node_modules 폴더 안에 보면 설치한
parcel-bundler 패키지(모듈)가 들어가 있다

처음 만들었던 package.json 파일을 보면
devDependencies 가 새로 생겨 있는걸 볼 수 있다.
npm install 명령어를 통해서 패키지를 설치하면 설치된 패키지의 내역이 package.json에 남게 된다.
현재 프로젝트에서 어떤 패키지를 사용하고, 그 패키지의 버전을 확인할 수 있다.

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

---

개발용 의존성 패키지 설치(-D, --save-dev)

개발 할때만 필요하고 웹 브라우저 동작 시 필요 없을때

$ npm install -D parcel-bundler

일반 의존성 설치

웹 브라우저에서 동작 할 수 있을때

$ npm install lodash

  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }

---

node_modules 폴더는 삭제 해도 된다
설치한 패키지 목록이 package.json파일에 들어있기 때문에

npm install

명령어를 통해서 모듈을 한번에 설치할 수 있다.

npm install의 약어

npm i

---

package-lock.json 파일은
내부적으로 사용되는 패키지들에 대한 정보가 자동으로 들어간다

---

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html"
	"build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

"dev": "parcel index.html"를 작성하면

npm run dev

Live Server와 같은 개발 서버를 여는 명령어 이다.

> npm@1.0.0 dev
> parcel index.html

Server running at http://localhost:1234 
✨  Built in 47ms.

import 해서 사용한다

import _ from 'lodash';

console.log('hello world');
console.log(_.camelCase('hello world'));

개발용 서버 닫는 명령어

control + c

---

npm run build

dist폴더가 생성된다(압축버전)

> npm@1.0.0 build
> parcel build index.html

✨  Built in 1.70s.

dist/main.b2091a9d.js.map    715.81 KB     20ms
dist/main.b2091a9d.js         92.81 KB    1.31s
dist/index.html                  221 B    340ms