(14) NPM + NPM Scripts

*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 2019년 7월 19일(금)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. NPM이란?

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

NPM은 Node Packages Manager의 약자이다. NPM은 개발자들이 자신들의 Javascript 코드를 공유하여 문제를 해결하기 위해 탄생했으며, NPM을 통해 다른 개발자가 업로드한 패키지나 모듈을 쉽게 이용할 수 있게 되었다.

개발자가 업로드한 파일은 NPM Registry에 저장되며, NPM Registry에 저장된 파일은 1) package.json 파일, 2) js 파일을 포함하고 있다. package.json 파일은 패키지(또는 모듈)에 대해서 설명하고 있는 meta file이다.

NPM을 활용하면 내가 잘 모르는 분야더라도 해당 분야 전문가의 코드를 불러와 아주 쉽게 이용할 수 있다는 장점이 있지만, 타인의 파일을 불러오는 순간 프로젝트의 사이즈가 불필요하게 커져서 속도 저하를 야기시키는 단점도 있다.

 

2. package.json 파일 만들기

terminal에서 npm init 명령어로 프로젝트 디렉토리에 package.json 파일을 생성한다.

 

3. NPM 패키지 설치 및 사용하기

NPM 패키지는 local에 설치할 수도, global에 설치할 수도 있다. local에 설치하면 특정 프로젝트 디렉토리 내에서만 해당 패키지를 이용할 수 있고, global에 설치하면 내 컴퓨터 어디에서든지 해당 패키지를 이용할 수 있다.

browserify script.js > bundle.js : browserify를 통해 나의 script.js 파일을 bundle.js 파일로 만들고, browser가 이를 읽도록 html 파일의 script 태그를 수정하여 이용할 수 있다.

 

NPM 사용시 주의사항

NPM을 처음 사용하면, 수 많은 패키지를 별 생각 없이 bundle.js 파일에 포함시키는 경우가 발생할 수 있다.(불필요하게 용량이 커진다.) 또한 dependency의 문제가 발생할 수 있다.(예를 들면, “lodash”를 파일에 포함시킬 때, 맞는 버전의 패키지를 설치하지 않으면 오류가 발생할 수 있다. 다행이 package.json 파일에 어떤 버전의 어떤 패키지가 사용됐는지 기록되어 있기 때문에 이를 참고해 해당 패키지를 설치하면 된다.)

위 사진 속 "^4.17.14" 을 semver(Semantic Versioning)이라고 한다.

dev dependency : development와 testing을 위해서만 필요한 패키지들을 의미한다. 따라서 dev dependency에 포함된 패키지는 product를 release할 때는 자동으로 배제된다."scripts" 를 통해서는 terminal에서 수행해야 하는 명령어들을 입력할 수 있다.