Come ottenere un output minimizzato con browserify?

Ho appena iniziato a usare browserify , ma non riesco a trovare la documentazione su come ottenerlo fuoriuscire dall'output minimizzato.

Quindi sto cercando qualcosa del tipo:

$> browserify main.js > bundle.js --minified

Conducilo attraverso uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Puoi installarlo usando npm in questo modo:

 npm install -g uglify-js

A partire da 3.38.x puoi usare il mio plugin minifyify per minimizzare il tuo bundle e avere ancora mappe dei sorgenti utilizzabili. Questo non è possibile con le altre soluzioni: il meglio che puoi fare è mappare di nuovo al bundle non compresso. Minimizza le mappe fino ai tuoi file sorgente separati (sì, anche a coffeescript!)

Oppure usa la trasformazione uglifyify che "ti dà il vantaggio di applicare la trasformazione" squeeze "di Uglify prima che venga elaborata da Browserify, il che significa che puoi rimuovere i percorsi di codice inattivi per i requisiti condizionali."

Dopo aver trascorso alcune ore a studiare come costruire nuovi processi di build, ho pensato che altri potessero trarre vantaggio da ciò che ho finito per fare. Sto rispondendo a questa vecchia domanda in quanto appare in alto su Google.

Il mio caso d'uso è un po 'più complicato di quanto richiesto da OP. Ho tre scenari di build: sviluppo, test, produzione. Poiché la maggior parte degli sviluppatori professionisti avrà gli stessi requisiti, penso che sia scusabile andare oltre lo scopo della domanda originale.

In fase di sviluppo , utilizzo watchify per creare un bundle non compresso con la mappa sorgente ogni volta che cambia un file JavaScript. Non voglio il passaggio brutto poiché voglio che la compilazione finisca prima di aver premuto il tasto Alt per il browser per aggiornare e comunque non è di alcun vantaggio durante lo sviluppo. Per ottenere ciò utilizzo:

watchify app/index.js  --debug -o app/bundle.js -v

Per il test , voglio lo stesso identico codice della produzione (ad esempio, uglified) ma voglio anche una mappa sorgente. Ottengo questo con:

browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"

Per la produzione , il codice viene compresso con uglify e non esiste una mappa sorgente.

browserify app/index.js  | uglifyjs -cm > app/bundle.js

Appunti:

Ho usato queste istruzioni su Windows 7, MacOS High Sierra e Ubuntu 16.04.

Ho smesso di usare minifyify perché non è più mantenuto.

Forse ci sono modi migliori di quello che sto condividendo. Ho letto che a quanto pare è possibile ottenere una compressione superiore semplificando tutti i file sorgente prima di combinarli con browserify. Se hai più tempo da dedicare a quello che ho io, potresti indagare su questo.

Se non hai già installato watchify, uglify-js o browserify, installali con npm così:

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

Se hai vecchie versioni installate ti consiglio di aggiornare. Particolarmente uglify-js in quanto hanno apportato una modifica sostanziale agli argomenti della riga di comando che invalida molte informazioni che vengono fuori in Google.

Non è più necessario utilizzare plug-in per minimizzare preservando una mappa di origine:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js

Mi piace terser che ha il supporto per ES6 + e anche qualche buona comporession.

browserify main.js | terser --compress --mangle > bundle.js

Installa globalmente:

 npm i -g terser