Comment obtenir une sortie minifiée avec browserify?
Je viens juste de commencer à utiliser browserify , mais je ne trouve pas de documentation sur la façon de l'obtenir de manière à obtenir une sortie réduite.
Donc, je cherche quelque chose comme:
$> browserify main.js > bundle.js --minified
Pipe-le à travers uglifyjs:
browserify main.js | uglifyjs > bundle.js
Vous pouvez l'installer en utilisant npm comme ceci:
npm install -g uglify-js
À partir de la version 3.38.x, vous pouvez utiliser mon plugin minifyify pour réduire votre bundle tout en conservant des cartes source utilisables. Ce n'est pas possible avec les autres solutions - le mieux que vous puissiez faire est de mapper le paquet non compressé. Réduisez au minimum les cartes dans vos fichiers sources séparés (oui, même à coffeescript!)
Ou bien utilisez glifyify transform qui "vous donne l'avantage d'appliquer la transformation" squeeze "d'Uglify avant son traitement par Browserify, ce qui signifie que vous pouvez supprimer les chemins de code mort pour les exigences conditionnelles."
Après avoir passé quelques heures à étudier comment construire de nouveaux processus de construction, j'ai pensé que d'autres pourraient tirer parti de ce que j'ai fini par faire. Je réponds à cette vieille question car elle apparaît haut dans Google.
Mon cas d'utilisation est un peu plus compliqué que demandé par OP. 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 développement, j'utilise watchify pour créer un ensemble non compressé avec la carte source chaque fois qu'un fichier JavaScript est modifié. Je ne veux pas que l'étape soit gênante, car je veux que la construction soit terminée avant que je ne modifie le navigateur pour qu'il soit mis à jour, ce qui ne présente aucun avantage pendant le développement. Pour cela, j'utilise:
watchify app/index.js --debug -o app/bundle.js -v
Pour les tests, je veux le même code exact que la production (par exemple uglified) mais je veux aussi une carte source. Je réalise cela 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 carte source.
browserify app/index.js | uglifyjs -cm > app/bundle.js
Notes:
J'ai utilisé ces instructions sous Windows 7, MacOS High Sierra et Ubuntu 16.04.
J'ai arrêté d'utiliser minifyify car il n'est plus maintenu.
Il y a peut-être de meilleures façons que ce que je partage. J'ai lu qu'il était apparemment possible d'obtenir une compression supérieure en supprimant tous les fichiers source avant de les combiner avec browserify. Si vous avez plus de temps à y consacrer que moi, vous voudrez peut-être enquêter sur cela.
Si vous n'avez pas déjà installé watchify, uglify-js ou browserify, installez-les avec npm ainsi:
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 mettre à jour. En particulier, uglify-js a modifié de façon décisive les arguments de la ligne de commande, ce qui invalide de nombreuses informations fournies par Google.
Plus besoin d'utiliser de plugins pour minifier tout en préservant une carte source:
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js