[JavaScipt] 번들러란?

번들러?

번들러의 예시로 웹팩을 들 수 있다.

웹팩은 많이 사용되는 모듈 번들러 중 하나인데 번들러의 특징은 아래와 같다.

1. 의존성이 있는 모듈 코드를 하나(또는 여러 개) 파일로 만들어 주는 도구

2. 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할

 

번들러 사용 이전의 문제점

 

프로젝트가 커질수록 자바스크립트 파일 각각의 의존성과 코드 사이 순서를 보장하기 힘들다는 부작용을 초래했고

심할 경우 일부 파일의 문제가 전체 스크립트를 실행에 영향을 미치기도 한다.

자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어 이제는 모듈 없이 자바스크립트로 코딩하기 힘들어졌다.

아직 모든 브라우저에서 ES Module을 사용할 수 있는 것은 아니기 때문에 브라우저에서 모듈을 사용하려면 모듈의 의존 관계를 미리 해결한 후 브라우저에서 인식할 수 있는 자바스크립트 코드로 변환해 두어야 한다.

이 변환 작업을 수행하는 것이 모듈 번들러이다.

 

 

 

번들링 수행 과정

모듈 번들러는 모듈을 읽어 들인 다음 모듈의 의존 관계를 분석하여 브라우저가 인식할 수 있는 자바스크립트 코드로 변환한다.

그리고 변환된 내용을 다른 모듈을 import 하기 위한 함수와 모듈이 export 하는 값을 저장하기 위한 객체를 전달한다.

코드를 함수의 형식으로 변환시킨 뒤 모듈 간 서로 참조할 수 있도록 하나의 파일로 합친다.

 

 

 

모듈 사용 장점

• 하나의 파일이 하나의 scope가 되도록 구현
• 파일을 기능 단위로 모듈화 - 유지보수 편함, 코드 가독성 향상
• 모듈 간 혹은 외부 라이브러리의 의존성을 쉽게 관리
• 다양한 서드파티 기능 이용 - Webpack의 경우 다양한 로더를 이용해서 모던 자바스크립트나 SASS를 사용할 수 있음
• 네트워크 병목 현상 해결 - 여러 파일을 최적화해서 하나의 파일로 묶기 때문에 주고받는 파일의 크기를 줄여줌

 

 

 

모듈 번들러 예시

• webpack - 많은 서드파티가 필요한 복잡한 애플리케이션
• Rollup - 최소한의 서드파티로 라이브러리 만들 때
• Parce - 비교적 간단한 애플리케이션 만들 때
• RequireJS
• Browserify

상황에 맞는 모듈 번들러를 선택하여 사용할 수 있다.

 

 

 

번들러 없이 모듈 만들기?

commonJS AMD ES2015등을 통해 모듈화 시스템을 사용할 수도 있다.

 

 

 

webpack

• 최신 모듈 포맷(CommonJS, AMD, ES6 Module(v2부터))을 모두 지원
• 자바스크립트뿐만 아닌 CSS, Image 파일 등의 리소스의 의존성도 관리
• CRA에 이미 모듈화가 다 세팅됨
• 리액트에서 사용하는 것은 ES6 Module: 이는 우리가 import, export를 사용하는 이유이기도 하다.
• node.js에서는 require을 사용하는데 node는 CommonJS 모듈을 사용하기 때문이다.