Wie erhalte ich mit browserify eine minimierte Ausgabe?

Ich habe gerade angefangen, browserify zu verwenden , aber ich kann keine Dokumentation finden, wie ich es dazu bringen kann, minimierte Ausgaben zu verschütten.

Also sehe ich so aus wie:

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

Pipe es durch uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Sie können es mit npm wie folgt installieren:

 npm install -g uglify-js

Ab 3.38.x können Sie mein Minifyify- Plugin verwenden, um Ihr Bundle zu minimieren und weiterhin verwendbare Quellkarten zu haben. Dies ist mit den anderen Lösungen nicht möglich. Das Beste, was Sie tun können, ist, das unkomprimierte Bundle wieder zuzuordnen. Minimieren Sie Karten bis zu Ihren separaten Quelldateien (ja, sogar bis zu Coffeescript!).

Oder verwenden Sie die uglifyify- Transformation, die "Ihnen den Vorteil bietet, die" Squeeze "-Transformation von Uglify anzuwenden, bevor sie von Browserify verarbeitet wird. Dies bedeutet, dass Sie tote Codepfade für bedingte Anforderungen entfernen können."

Nachdem ich einige Stunden lang untersucht hatte, wie neue Build-Prozesse erstellt werden können, dachte ich, dass andere von dem profitieren könnten, was ich letztendlich getan habe. Ich beantworte diese alte Frage, da sie in Google hoch erscheint.

Mein Anwendungsfall ist etwas komplizierter als von OP verlangt. Ich habe drei Build-Szenarien: Entwicklung, Test, Produktion. Da die meisten professionellen Entwickler dieselben Anforderungen haben, halte ich es für entschuldbar, über den Rahmen der ursprünglichen Frage hinauszugehen.

In der Entwicklung verwende ich watchify, um ein unkomprimiertes Bundle mit Quellzuordnung zu erstellen, wenn sich eine JavaScript-Datei ändert. Ich möchte den uglify-Schritt nicht, da ich möchte, dass der Build abgeschlossen wird, bevor ich die Alt-Tab-Taste zum Browser gedrückt habe, um auf Aktualisieren zu klicken, und er ist während der Entwicklung sowieso nicht von Vorteil. Um dies zu erreichen, benutze ich:

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

Zum Testen möchte ich genau den gleichen Code wie die Produktion (z. B. hässlich), aber ich möchte auch eine Quellkarte. Ich erreiche dies 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 Quellkarte.

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

Anmerkungen:

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

Ich habe die Verwendung von minifyify eingestellt, da es nicht mehr gewartet wird.

Es gibt vielleicht bessere Möglichkeiten als das, was ich teile. Ich habe gelesen, dass es anscheinend möglich ist, eine überlegene Komprimierung zu erzielen, indem alle Quelldateien hässlich gemacht werden, bevor sie mit browserify kombiniert werden. Wenn Sie mehr Zeit dafür haben als ich, möchten Sie das vielleicht untersuchen.

Wenn Sie watchify, uglify-js oder browserify noch nicht installiert haben, installieren Sie sie mit npm wie folgt:

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

Wenn Sie alte Versionen installiert haben, empfehle ich Ihnen ein Upgrade. Besonders uglify-js, da sie die Befehlszeilenargumente grundlegend geändert haben, wodurch viele Informationen, die in Google angezeigt werden, ungültig werden.

Es müssen keine Plugins mehr zum Minimieren verwendet werden, während eine Quellkarte beibehalten wird:

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

Ich mag Terser, der ES6 + unterstützt und auch ein gutes Comporession.

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

Weltweit installieren:

 npm i -g terser