Comment obtenir une sortie minifiée avec browserify ?

Question

Je viens de commencer à utiliser browserify mais je n'arrive pas à trouver de documentation sur la façon d'obtenir une sortie minifiée.

Je cherche donc quelque chose comme :

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

Answer 1

Passez par uglifyjs :

 browserify main.js | uglifyjs > bundle.js

Vous pouvez l'installer en utilisant npm comme suit :

 npm install -g uglify-js

Answer 2

A partir de la version 3.38.x, vous pouvez utiliser ma miniaturiser pour réduire votre bundle tout en conservant des cartes de source utilisables. Ce n'est pas possible avec les autres solutions -- le mieux que vous puissiez faire est de mapper vers le bundle non compressé. Minifyify permet de mapper jusqu'à vos fichiers sources séparés (oui, même coffeescript !).

Answer 3

Ou utilisez uglifyifier qui "vous donne l'avantage d'appliquer la transformation "squeeze" d'Uglify avant qu'elle ne soit traitée par Browserify, ce qui signifie que vous pouvez supprimer les chemins de code morts pour les exigences conditionnelles".

Answer 4

Après avoir passé quelques heures à étudier comment construire de nouveaux processus de construction, j'ai pensé que d'autres pourraient bénéficier de ce que j'ai fini par faire. Je réponds à cette vieille question car elle apparaît en bonne place dans Google.

Mon cas d'utilisation est un peu plus impliqué que ce que le PO a demandé. J'ai trois scénarios de construction : développement, test, production. Comme la plupart des développeurs professionnels auront les mêmes exigences, je pense qu'il est excusable d'aller au-delà de la portée de la question initiale.

En cours de développement J'utilise watchify pour construire un paquet non compressé avec une carte des sources à chaque fois qu'un fichier JavaScript est modifié. Je ne veux pas de l'étape uglify car je veux que la construction se termine avant que j'aie fait un alt-tab sur le navigateur pour frapper le rafraîchissement et ce n'est pas un avantage pendant le développement de toute façon. Pour y parvenir, j'utilise :

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

Pour les tests Je veux exactement le même code que celui de la production (par exemple uglifié) mais je veux aussi une carte des sources. J'y parviens avec :

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

Pour la production Le code est compressé avec uglify et il n'y a pas de source map.

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

Notes :

J'ai utilisé ces instructions sur Windows 7, MacOS High Sierra et Ubuntu 16.04.

J'ai cessé d'utiliser minifyify car il n'est plus maintenu.

Il y a peut-être de meilleurs moyens que ceux que je partage. J'ai lu qu'il est apparemment possible d'obtenir une compression supérieure en uglifiant tous les fichiers sources avant de les combiner avec browserify. Si vous avez plus de temps à y consacrer que moi, vous pouvez vous renseigner à ce sujet.

Si vous n'avez pas déjà installé watchify, uglify-js ou browserify, installez-les avec npm donc :

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

Si vous avez des anciennes versions installées, je vous recommande de les mettre à jour. En particulier uglify-js, qui a apporté un changement radical aux arguments de la ligne de commande, ce qui invalide un grand nombre d'informations qui apparaissent dans Google.

Answer 5

Plus besoin d'utiliser des plugins pour minifier tout en préservant une carte source :

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