Browserify JavaScript バンドラーチートシート

[!NOTE] Browserify は、Node.js の require() 構文と CommonJS 仕様をブラウザ環境に持ち込んだ初期の代表的モジュールバンドラーです。現代のWeb開発では Vite、esbuild、Rollup、webpack 等が主流です。

CLI コマンド構文

# 基本的なバンドル出力
browserify input.js -o output.js

# Transform プラグインの適用
browserify input.js -o bundle.js -t babelify

# デバッグ用ソースマップ（Source Maps）の生成
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

---

JavaScript 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: 開発中の差分更新を高速化するインクリメンタルファイル監視ツール。