npm 활용해보기 (with ulglify-js)

https://www.npmjs.com/

npm

 

npm은 Node Package Manager의 약자로 Node.js에서의 앱스토어와 같은 역할이다. 

npm 페이지 내의 search 기능을 통하여 다양한 npm을 찾을 수 있다. 

 

그중에서도 코드를 압축시키는 uglify-js를 사용해보았다. 

install 방법 등 다양하게 안내가 되어 있다. uglify-js는 많이 쓴다고 한다. 자바스크립트 파일을 압축해준다고 한다. 

-g는 global이라는 뜻인데 -g 옵션을 붙이면 내 컴퓨터 안에서 실행되는 uglify-js 들에 대해 모두 적용이 되지만 

-g 옵션을 붙이지 않으면 해당 프로젝트 안에서만 사용이 가능하다. 

 

Node.js에서 코드 작성을 해보니 다음과 같은 결과가 나왔다. 

function hello(name){
    console.log('Hi'+name);
}
hello("You");

일반적인 자바스크립트 함수 코드 작성 방법이다. hello라는 함수를 호출하고 hello는 인자로 name을 전달하는데, 함수 호출 시에는 "You"라는 값으로 출력하고자 한다. 그런데 uglify-js는 실행결과보다 코드 압축을 다룬다. 

 

uglify-js npm 실행결과 

C:\Users\Win10\Desktop\NodeJS_WebApp>uglifyjs pretty.js
function hello(name){console.log("Hi"+name)}hello("You");

코드가 압축되어 나온다. 

 

추가 

uglifyhs pretty.js -m

위에서 코드를 name 이라는 인자를 사용해줘서 함수 호출 시에도 사용해서 썼는데, 

-m 옵션을 사용하게 되면 

function hello(o){console.log("Hi"+o)}hello("You");

name 대신에 o 라는 전역변수를 사용하게 해준다. 

 

$ uglifyjs pretty.js -o uglified.js -m

위의 옵션을 주게 되면 pretty.js와 같은 파일(내용도 동일)인 uglified.js 가 생긴다. 

해석하자면, pretty.js 파일을 압축해서 uglified.js 파일을 만들되 -m(전역변수사용) 으로 해서 만든다. 

uglified.js의 내용은 다음과 같다

 

그리고 pretty.min.js라는 파일을 

uglify pretty.js -o pretty.min.js -m

위의 결과와 동일하지만 pretty.js의 압축 버전(min)이라는 뜻이다. 

 

잘못된 내용이 있다면 언제든 지적 환영입니다 :) 

읽어주셔서 감사합니다.