Browserify 자바스크립트 번들러 치트시트

[!NOTE] Browserify는 Node.js의 require() 및 CommonJS 문법을 브라우저 환경에 처음 도입한 아카이브 모듈 번들러입니다. 최신 웹 애플리케이션은 주로 Vite, esbuild, Rollup, webpack을 사용합니다.

CLI 명령어 사용법

# 기본 번들 컴파일
browserify input.js -o output.js

# 트랜스폼(Transform) 적용
browserify input.js -o bundle.js -t babelify

# 디버깅을 위한 소스 맵 생성
browserify input.js -o bundle.js --debug

# 독립 실행형 UMD 번들 생성
browserify input.js -s MyLibrary -o bundle.js

# 모듈 제외, 무시 또는 외부 참조 지정
browserify input.js -u react     # --exclude
browserify input.js -x react     # --external
browserify input.js -i react     # --ignore

---

프로그래밍 API

const browserify = require('browserify');
const fs = require('fs');

const b = browserify('src/main.js', { debug: true });

b.transform('babelify', { presets: ['@babel/preset-env'] });

b.bundle().pipe(fs.createWriteStream('dist/bundle.js'));

---

인기 생태계 트랜스폼

• babelify: 최신 ES6+ 및 JSX를 브라우저 호환 ES5 코드로 트랜스파일.
• envify: process.env.NODE_ENV를 문자열 리터럴로 치환하여 미사용 코드를 제거.
• brfs: 빌드 시점에 fs.readFileSync 호출을 정적 파일 내용으로 인라인 삽입.
• watchify: 개발 중 초고속 재빌드를 제공하는 증분 빌드 감시기.