자바스크립트 모듈 번들러
자바스크립트 모듈 번들러는 여러 개의 자바스크립트 파일과 관련된 리소스를 하나의 파일 또는 몇 개의 파일로 병합하여 배포할 수 있도록 하는 도구입니다. 이를 통해 웹 애플리케이션의 성능을 최적화하고, 관리와 유지보수를 쉽게 할 수 있습니다.
주요 모듈 번들러
- Webpack
- Rollup
- Parcel
- Browserify
각 모듈 번들러의 기능과 사용법을 상세히 살펴보겠습니다.
Webpack
특징
- 모듈 의존성 그래프: Webpack은 애플리케이션의 의존성 그래프를 구축하고, 이 그래프를 통해 필요한 모듈들을 하나의 번들로 묶습니다.
- 로더: 로더는 특정 유형의 파일을 처리하고 변환하는 역할을 합니다. 예를 들어, Babel 로더를 사용해 최신 자바스크립트 코드를 ES5로 변환할 수 있습니다.
- 플러그인: 플러그인은 번들링 과정에 추가적인 기능을 제공하며, 파일 압축, 환경 변수 설정, HTML 파일 생성 등 다양한 작업을 수행할 수 있습니다.
설치 및 기본 사용법
- Webpack 설치:
npm install --save-dev webpack webpack-cli- Webpack 설정 파일 (
webpack.config.js) 생성:
const path = require('path');
module.exports = {
entry: './src/index.js', // 시작 파일
output: {
filename: 'bundle.js', // 출력 파일 이름
path: path.resolve(__dirname, 'dist'), // 출력 경로
},
module: {
rules: [
{
test: /\.js$/, // .js 파일에 대해
exclude: /node_modules/, // node_modules 제외
use: {
loader: 'babel-loader', // Babel 로더 사용
},
},
],
},
};- 스크립트 설정 (
package.json):
{
"scripts": {
"build": "webpack"
}
}- 빌드 명령 실행:
npm run buildRollup
특징
- ES 모듈 지원: Rollup은 ES6 모듈을 기본적으로 지원하며, 이를 최적화하여 번들링합니다.
- 트리 셰이킹(Tree-shaking): 사용되지 않는 코드를 제거하여 번들 크기를 줄입니다.
- 플러그인 시스템: 다양한 플러그인을 통해 확장할 수 있습니다.
설치 및 기본 사용법
- Rollup 설치:
npm install --save-dev rollup- Rollup 설정 파일 (
rollup.config.js) 생성:
import babel from 'rollup-plugin-babel';
export default {
input: 'src/index.js', // 시작 파일
output: {
file: 'dist/bundle.js', // 출력 파일
format: 'iife', // 즉시 실행 함수 표현식
},
plugins: [
babel({
exclude: 'node_modules/**', // node_modules 제외
}),
],
};- 스크립트 설정 (
package.json):
{
"scripts": {
"build": "rollup -c"
}
}- 빌드 명령 실행:
npm run buildParcel
특징
- 설정 필요 없음: Parcel은 기본적으로 설정 파일 없이도 작동합니다.
- 빠른 빌드 속도: 멀티 코어 처리 및 파일 시스템 캐싱을 통해 빠른 빌드를 제공합니다.
- 자동 번들링: 의존성을 자동으로 감지하고 번들링합니다.
설치 및 기본 사용법
- Parcel 설치:
npm install --save-dev parcel- 프로젝트 구조:
├── src
│ └── index.js
└── index.html- HTML 파일에서 스크립트 태그 추가 (
index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Example</title>
</head>
<body>
<script src="src/index.js"></script>
</body>
</html>- 개발 서버 시작:
npx parcel index.html- 빌드 명령 실행:
npx parcel build index.htmlBrowserify
특징
- CommonJS 모듈: Node.js 스타일의 CommonJS 모듈을 브라우저에서도 사용할 수 있게 합니다.
- 플러그인 및 변환기: 다양한 플러그인과 변환기를 통해 기능을 확장할 수 있습니다.
설치 및 기본 사용법
- Browserify 설치:
npm install --save-dev browserify- 프로젝트 구조:
├── src
│ └── index.js
└── dist- 스크립트 설정 (
package.json):
{
"scripts": {
"build": "browserify src/index.js -o dist/bundle.js"
}
}- 빌드 명령 실행:
npm run build결론
자바스크립트 모듈 번들러는 개발자가 여러 파일로 분리된 코드를 효과적으로 관리하고 배포할 수 있도록 도와줍니다. 각 번들러는 고유의 장점과 사용 사례를 가지고 있으며, 프로젝트의 요구 사항에 맞게 선택할 수 있습니다. Webpack은 복잡한 애플리케이션에 적합하고, Rollup은 라이브러리 번들링에 유리하며, Parcel은 설정 없이 빠른 개발 환경을 제공합니다. Browserify는 Node.js 스타일의 모듈을 브라우저에서 사용할 수 있게 해줍니다.