자바스크립트 번들러란 사용자의 코드와 종속성을 하나의 자바스크립트 파일에 통합하는 도구이다. 대표적으로 Browserify, Rollup 그리고 Webpack 등이 있다.
간략하게 설명하자면, 프런트 엔드 코드의 근본적인 종속성(dependencies) 문제를 핸들링하기 위함이다. 역사적으로 자바스크립트에는 사용자의 코드로부터 의존성을 요구하는 표준이 없었습니다. (import, require statements는 존재하지 않았다.)
당신이 만든 코드를 바깥세상으로 내보내기(export) 위하여, 타인이 만든 코드를 사용하기(import) 위하여 그동안 어떤 방식을 사용해왔나요? 예를 들어서 jQuery를 사용하기 위하여 아래와 같은 코드를 만들진 않았나요?
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// `$` global variable available here
</script>만약, 당신이 작성한 코드를 분리하고 싶어서 여러 개의 파일들로 구성하였다면 다음과 같은 코드를 직면하게 되었을지도 모릅니다.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/abc.js"></script>
<script src="/js/foo.js"></script>
<script>
// Here goes some code
</script><script> 태그 안에 있는 모든 dependencies를 사용할 수 있게 되었지만, 만약 abc.js가 foo.js를 의존한다면 반드시 태그 선언 순서를 변경해야합니다.
- 최대한 global 변수 사용은 되도록 피해야 한다
- script 태그를 선언할 때 순서를 결정하는 데 있어서 주의해야 한다
- 이 같은 조건은 점점 더 복잡한 종속성을 유지하기가 어려워질 것이다
Node.js는 Commonjs module spec에 기반하여 require() 함수와 exports 객체를 실행하는 자체 모듈 시스템을 구현한다. 이 같은 이유로, 다음 코드가 CommonJS 라고 불리는 것을 보게 되는 이유입니다.
<script>
var $ = require('jquery');
</script>위 코드도 멋지지만, 다음과 같은 기술적인 제약사항이 존재합니다.
require()는 synchronous이므로 아직 로드되지 않은 파일을 require 해야하는 상황이 발생한다면, HTTP request를 해야하는데 이는 비동기식(asynchronous)입니다.
이 같은 문제를 해결할 방법은, require() 함수가 호출될 때 바로 메모리상에서 사용할 수 있도록 모든 종속성을 하나의 파일 안에 넣고, 자바스크립트 번들러가 어떤 방식으로든 처리하게끔 하는 것이다.
Note: 모든 코드를 동일한 파일에 넣으면 많은 HTTP요청을 수행할 수 없습니다.(HTTP/2 예외)
- NPM 사용 가능
require(),exports모두 Node.js와 동일하게 구현되어있다 - 브라우저나 Node.js 핵심 모듈의 특정 기능에 의존하지 않는 한
require()는 Node에서 동일하게 동작하므로 크로스 플랫폼 코드를 작성할 수 있다 - 이러한 도구를 사용하면 선택적으로 번들 프로세스 중에 서로 다른 변환(transform)을 사용할 수 있습니다. 따라서 ES6에서 ES5 등으로 코드를 transpile 할 수 있습니다.
- 또한, 일부 번들러는 사용되지 않는 코드를 제거하므로 최종 파일에는 응용 프로그램을 실행하는 데 필요한 코드만 포함됩니다.
Webpack과 Rollup.js에 대하여 더 자세히 알고 싶다면 Rich Harris가 작성한 미디엄 포스트를 읽어보세요
덧붙이고 싶은 내용이나 수정이 필요한 부분 모두 feedback 받습니다.