[FE] 모듈 번들러와 트랜스파일러

📌 모듈 번들러(Module bundler)

• FrontEnd 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이다.
• 의존성 처리, 모듈이 많아짐에 따른 오버헤드, ES6+의 코드 처리 등의 문제들을 해결하기 위해 등장한 것이 모듈 번들러이다.
• 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만드는 도구이다.
• 대표적으로 Webpack, Rollup 등이 있다.

📌 트랜스파일러(Transpiler)

• 특정 언어로 작성된 코드를 비슷한 다른언어로 변환시켜주는 것을 말한다.
• 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5로 변환해주기 위해서 필요하다.
• 리액트의 JSX를 JS코드로 변환하는 것, TypeScript를 JS로 변환하는 것 등도 포함된다.
• 대표적으로 바벨(Babel)이 있다.

출처

What is module bundler and how does it work?