JavaScript 패키징 도구 (번들링 도구)

패키징

: 개발이 완료된 소프트웨어를 배포하기 위해 하나의 실행 파일로 만드는 것

 

- 참조

: https://2mukee.tistory.com/620

 

 

 

번들링 (q

: 자바스크립트에서 나온 개념으로, 패키징을 의미

: JS에는 빌드라는 개념이 없기 때문에 컴파일을 수행하는 빌드 타임을 가짐

: 이때 컴파일 후 소프트웨어를 하나의 js 파일로 만드는 번들링을 거쳐 하나의 실행파일로 만듦

: 이때 하나의 실행파일로 만드는 것을 빌드 라고함

 

- 번들링 도구

: Browserify

: RequireJS

: Rollup

: Parcel

: gulp

: Webpack

 

 

 

 

 

Browserify

: CommonJS 기반의 번들링 라이브러리

: Webpack 등장 전 까지 많이 쓰임

 

 

 

 

RequireJS

: AMD (Asyncronous Module Definition) 기반의 번들링 라이브러리

: 스크립트 로더 방식으로, 실행 시간에 스크립트를 로드해서 모듈을 불러오는 방식

 

- 스크립트 로더

: 모듈을 10개 불러온다면 스크립트 태그 10개를 추가하고 http 요청을 통해 모듈을 불러오는 방식

 

 

 

 

 

Rollup

: ES6 기반의 번들링 라이브러리로, es 모듈 형태로 빌드 가능

: webpack과 달리 코드들을 동일한 수준으로 호이스팅 한 후 한 번에 번들링을 진행하기 때문에 webpack 보다 빠르고 결과물이 훨씬 가벼움

: 라이브러리나 패키지를 작업하는데 활용 가능

: code spliting이나 static asset이 많은 경우, 안정성이 중요하거나 CommonJS 종속성이 많은 경우에는 부적합

 

- 호이스팅

: 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

: let으로 변수를 선언하면 호이스팅 시 undefined로 변수를 초기화함

 

 

 

 

Parcel

: 2017년에 등장한 웹 애플리케이션 번들러

: Webpack이나 Gulp와 달리 별도 설정 없이 빠른 빌드 가능

: 별도 설정 없이 엔트리 파일만 설정하면 바로 빌드 가능

: Assets 기반의 번들링을 지원하며, babel 및 postCSS 같은 트랜스파일러들을 내장하여 지원

: 런타임중 페이지 새로고침 없이도 모듈을 자동 업데이트 (HMR, Hot Moudle Replacement)

: NodeJS에서도 사용 가능하며 typescript도 지원

 

 

 

 

Gulp

: ES6 기반의 Streaming Build System

: Node의 스트림 기능을 이용하여 런타임 중 변경된 파일 내용에 대해서만 빌드가 가능한 번들러

: watch를 설정하여 해당 디렉터리 및 파일들이 변경되면 지정한 task를 실행할 수 있음

 

 

 

 

 

Webpack

: NodeJS를 위한 번들러로 TypeScript에서 JavaScript로의 트랜스 파일링 및 디버깅을 위한 source map 파일 생성 등을 지원

: 의존 모듈과 HTML, CSS 자바스크립트 번들링 지원

: AoT 컴파일 및 코드 문법 체크와 코드의 규약 준수 여부 체크 등을 지원

: 최근 가장 많이 쓰이는 번들러

 

- 장점

: 코드 축소 및 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행하여 성능 최적화

: 컴파일 과정에서 필요한 플러그인을 추가하고 번들러를 실행해줌

: Code splitting을 통해 원하는 떄에 모듈을 로딩할 수 있음

: Webpack5 부터 종속성 문제 해결도 가능

 

- 단점

: 복잡한 Configuration

: 빌드 속도 (Webpack5 부터 캐싱을 지원하여 속도가 개선됨)

: 번들 크기가 무거움

 

 

 

Reference

번들링(Bundling)이란?

[ModuleBundler][Browserify]js를 하나의 파일로 묶기, browserify설치 및 사용법

 

Home | Dan DevLog

Parcel - 쉽고 빠르고 강력한 웹앱 번들러 - SASS / PostCSS / Babel / Production

[Gulp.js] Gulp 입문 ① - Gulp에 대한 소개

[Node.js] 12.1 편: GULP – JavaScript 빌드 자동화툴 알아보기 + ES6 문법으로 사용해보기 | VELOPERT.LOG

Webpack이란 무엇인가? 정의와 필요성, 그리고 장단점 | 하늘네트

[Javascript] Webpack ? Bundle ?