Riferimento rapido

Cheat Sheet del bundler JavaScript Browserify

Guida di archivio per Browserify, il classico bundler CommonJS per JavaScript lato client: opzioni CLI, trasformazioni e utilizzo programmatico.

· Pubblicato

[!NOTE] Browserify è un bundler di moduli JavaScript di archivio che ha portato require() e CommonJS di Node.js nel browser. Le applicazioni moderne usano solitamente Vite, esbuild, Rollup o webpack.

Utilizzo della CLI

# Compilazione bundle di base
browserify input.js -o output.js

# Applicare trasformazioni
browserify input.js -o bundle.js -t babelify

# Generare source map per il debug
browserify input.js -o bundle.js --debug

# Generare un bundle UMD autonomo
browserify input.js -s MyLibrary -o bundle.js

# Escludere, ignorare o contrassegnare moduli come esterni
browserify input.js -u react     # --exclude
browserify input.js -x react     # --external
browserify input.js -i react     # --ignore

API programmatica

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'));

Trasformazioni popolari dell'ecosistema

  • babelify: Esegue il transpiling di ES6+ e JSX verso ES5 compatibile con i browser.
  • envify: Sostituisce process.env.NODE_ENV con valori letterali per eliminare codice non utilizzato.
  • brfs: Include il contenuto di fs.readFileSync al momento della compilazione.
  • watchify: Watcher incrementale per ricompilazioni ultra-rapide durante lo sviluppo.

Argomenti correlati