번들러가 왜 필요할까?

번들러가 없으면 파일 순서를 수동으로 정하거나, 의존성 관리 작업을 직접 코드로 처리해야 한다. 이게 무슨 말인지 처음에 이해가 잘 되지 않았다.

 

먼저, 브라우저는 자바스크립트 파일을 순서대로 실행한다. 브라우저는 <script> 태그를 만나면 위에서 아래로 순차적으로 자바스크립트 파일을 실행한다. 따라서, 한 파일이 다른 파일을 참조하거나 의존하고 이싸면, 참조하는 파일이 먼저 로드되고 실행되어야 한다.

// utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

// main.js
import { greet } from './utils.js';

console.log(greet('Alice'));

 

위의 코드를 보면, 브라우저는 main.js가 실행되기 전에 utils.js를 올바르게 로드해야 한다. 번들러 없이 처리하려면 개발자가 직접 파일 순서를 보장해야 한다. 예를 들면, 아래와 같이 말이다. 하지만, 프로젝트가 커지면 관리가 어렵고, 순서 오류로 인해 ReferenceError가 발생할지도 모른다.

<script type="module" src="utils.js"></script>
<script type="module" src="main.js"></script>

 

하지만, 번들러가 있다면 모든 파일을 분석하여 파일 간의 의존성을 파악하고, 자동으로 올바른 순서를 결정한다. 또한, 여러 파일을 하나의 번들 파일(필요에 따라 여러 파일)로 묶어 브라우저가 순서를 걱정할 필요 없이 단일 파일을 실행한다.