2013-03-23 6 views
77

Ich habe gerade angefangen, browserify zu verwenden, aber ich kann keine Dokumentation finden, wie man die verkleinerte Ausgabe verschüttet.Wie bekomme ich eine reduzierte Ausgabe mit browserify?

Deshalb suche ich nach so etwas wie:

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

Die Verkleinerung liegt außerhalb des Bereichs von browserify. Sie müssen die Ausgabe über einen Minifier ausführen. – generalhenry

Antwort

108

Rohr es durch uglifyjs:

browserify main.js | uglifyjs > bundle.js 

Sie können es installieren npm mit etwa so:

npm install -g uglify-js 
+3

Wie dies mit grunt browserify/watchify task tun? –

+1

Wenn Sie grunt verwenden, würde ich empfehlen, es in zwei Schritten zu tun. Kompilieren Sie zuerst mit browserify und dann minimieren. Der Vorteil ist, dass Sie einen Entwicklungs-Build mit Quellkarten und einem Produktions-Build erstellen können, der alles ausblendet. – topek

+0

Ja, das ist, was ich getan habe. Es ist eigentlich 3 Schritte, müssen Sie die Zwischenablage aufräumen. Vielen Dank! –

15

Oder verwenden uglifyify verwandeln was "Ihnen den Vorteil bringt, Uglifys" Squeeze "-Transformation anzuwenden, bevor es von Browserify verarbeitet wird, m Sie können tote Codepfade für bedingte Anforderungen entfernen. "

+0

Es erfordert immer noch die Verwendung der Uglify-Pipe in der oberen Antwort angezeigt. Sie sagen es direkt am Anfang ihres Docs. –

21

Ab 3.38.x können Sie mein minifyify Plugin verwenden, um Ihr Bundle zu minimieren und immer noch brauchbare Quellkarten zu haben. Dies ist mit den anderen Lösungen nicht möglich - das Beste, was Sie tun können, ist die Zuordnung zum unkomprimierten Bundle. Minifyify ordnet die ganzen Weg zurück zu Ihrer separaten Quelldatei (ja, auch an Coffee!)

+1

Es sagt, es unterstützt bis Browser Version 9. Browserify ist derzeit bei 11.0.1. Wird es das unterstützen? – cchamberlain

+0

[Uglifyify] (https://github.com/hughsk/uglifyify) scheint für mich als ein guter Ersatz zu arbeiten –

3

Keine Notwendigkeit Plugins zu verwenden mehr minify während einer Quelle Karte Erhaltung:

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

Nach ein paar Stunden zu verbringen Untersuchung Wie man neue Build-Prozesse baut, dachte ich, dass andere von dem profitieren könnten, was ich getan habe. Ich beantworte diese alte Frage, da sie in Google hoch erscheint.

Mein Anwendungsfall ist ein wenig mehr beteiligt als OP gefragt. Ich habe drei Build-Szenarien: Entwicklung, Test, Produktion. Da die meisten professionellen Entwickler die gleichen Anforderungen haben, glaube ich, dass es entschuldbar ist, über den Umfang der ursprünglichen Frage hinauszugehen.

In der Entwicklung verwende ich Watchify, um ein unkomprimiertes Bundle mit Quellzuordnung zu erstellen, wann immer sich eine JavaScript-Datei ändert. Ich möchte nicht den Uglify-Schritt, da ich möchte, dass der Build fertig ist, bevor ich in den Browser getippt habe, um auf "Refresh" zu klicken, und es ist sowieso kein Vorteil während der Entwicklung. Um dies zu erreichen Ich benutze:

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

Zum Testen, ich mag den exakt gleichen Code wie Produktion (z uglified), aber ich möchte auch eine Quelle Karte. Dies erreiche ich mit:

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

Für die Produktion, wird der Code mit uglify komprimiert und es gibt keine Quelle Karte.

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

Hinweise:

Ich habe diese Anweisungen auf Windows 7, MacOS High Sierra und Ubuntu 16.04 verwendet.

Ich habe die Verwendung von minifyify gestoppt, weil es nicht mehr gepflegt wird.

Es gibt vielleicht bessere Möglichkeiten als das, was ich teile. Ich habe gelesen, dass es offensichtlich möglich ist, eine bessere Komprimierung zu erhalten, indem man alle Quelldateien vor der Kombination mit browserify uglifiziert.Wenn Sie mehr Zeit dafür haben als ich, sollten Sie das untersuchen.

Wenn Sie nicht watchify haben, verunstalten-js oder browserify bereits installiert ist, installieren Sie sie mit npm so:

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

Wenn Sie alte Versionen installiert empfehle ich Ihnen ein Upgrade. Besonders uglify-js, da sie eine wichtige Änderung an Befehlszeilenargumenten vorgenommen haben, die viele Informationen in Google ungültig macht.

Verwandte Themen