Browserify JavaScript Bundler Cheat Sheet

[!NOTE] Το Browserify είναι ένα αρχειακό JavaScript bundler που έφερε το require() του Node.js και τη σύνταξη CommonJS στον browser. Οι σύγχρονες εφαρμογές χρησιμοποιούν συνήθως Vite, esbuild, Rollup ή webpack.

Χρήση CLI

# Βασική μεταγλώττιση bundle
browserify input.js -o output.js

# Εφαρμογή transforms
browserify input.js -o bundle.js -t babelify

# Δημιουργία source maps για αποσφαλμάτωση
browserify input.js -o bundle.js --debug

# Δημιουργία αυτόνομου UMD bundle
browserify input.js -s MyLibrary -o bundle.js

# Εξαίρεση, αγνόηση ή επισήμανση modules ως εξωτερικών
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'));

---

Δημοφιλή Transforms οικοσυστήματος

• babelify: Μεταγλωττίζει σύγχρονο ES6+ και JSX σε ES5 συμβατό με προγράμματα περιήγησης.
• envify: Αντικαθιστά το process.env.NODE_ENV με σταθερές συμβολοσειρές.
• brfs: Ενσωματώνει κλήσεις fs.readFileSync με στατικά περιεχόμενα κατά το build.
• watchify: Παρατηρητής σταδιακού build για ταχύτατη επαναμεταγλώττιση.