Rollup.js 번역본

rollup.js 공식 홈페이지는 한글버전을 제공하지 않는데, 내가 영어권 네이티브더라도 눈에 잘 들어오지 않을 것 같은 document 로 제공한다. 그래서 내가 보려고 직접 번역해 보았다. 쓰기도 구찮고 보기도 구찮으니 반말로 작성했고, 별로 쓸데없는 미사여구 같은 문구는 과감히 삭제하였다. 헤더는 영어와 한글을 같이 적었다. 삭제와 의역이 있기 때문에 공식 홈페이지와 같이 보기 쉽게하기 위해서이다. 링크연결로 되어있는 부분은 왠만하면 한번에 보기 쉽게 가져와서 합쳤다.

Overview - 소개

rollup 은 라이브러리나 어플리케이션을 컴파일하는 javascript 모듈 번들러다. AMD 나 commonJS 같은 예전 버전 대신 ES6 등의 새 javascript 포맷을 사용한다. ES 모듈은 라이브러리의 개별 function 들을 사용하기 쉽게 만들어준다.

Intallation - 설치

npm install --global rollup

위는 글로벌로 설치하는 명령어임.
로컬로 설치하는 법 : 로컬에 설치

Installing Rollup locally - 로컬에 설치

팀내 협업시나 분산환경에서는 부가적인 설치과정을 없앨 수 있고, 모두 같은 버전으로 설치하는 게 좋기 때문에 로컬로 설치하는 것이 현명하다.

NPM :

npm install rollup --save-dev

Yarn :

yarn -D add rollup

Quick start - 간단 시작

rollup 은 config 파일로도 사용 가능하고 (command line interface) JavascriptAPI 로도 사용 가능하다. 옵션이나 파라미터를 보려면 rollup --help 를 쳐봐라.

rollup 을 사용한 라이브러리나 어플리케이션 프로젝트의 간단한 예시를 다음 github 에서 볼 수 있다.
라이브러리 : rollup-starter-lib, 어플리케이션 : rollup-starter-app

아래 명령어들은 entry point 를 명시해줬다. 즉 해당 어플리케이션의 진입점이 main.js 라는 이름의 파일이라는 것이고, 모든 import 한 것들이 bundle.js 이라는 이름의 하나의 파일로 컴파일하겠다는 명령어다.

브라우저에서 사용하려면 : IIFE 형식 (즉시실행함수)

# <script> 태그가 들어간 형식으로 컴파일된다.
rollup main.js --file bundle.js --format iife

Node.js 서버에서 사용하려면 : CJS 형식

# CommonJS 모듈로 컴파일된다.
rollup main.js --file bundle.js --format cjs

브라우저랑 Node.js 둘다 사용가능하게 하려면 : UMD 형식

# UMD 형식은 번들이름을 줘야함
rollup main.js --file bundle.js --format umd --name "myBundle"

The Why - 왜냐

소프트웨어를 개발한다는 것은 하나의 거대한 프로젝트를 좀 더 작은 단위로 쪼개어 개발하면 대게 더 쉬워지고, 왜냐면 예기치못한 상호작용들을 제거하고 해결해야할 문제들의 복잡도를 낮출수 있기 때문이다. 단순히 더 작은 프로젝트를 처음부터 작성하는거는 항상 정답인건 아니다. 불행하게도 javascript 는 역사적으로 핵심기능으로

작성중...