Comment obtenir une sortie minifiée avec browserify?

Je viens de commencer à utiliser browserify , mais je ne trouve pas de documentation sur la façon de le faire déborder d'une sortie minifiée.

Donc je regarde quelque chose comme:

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

Passez-le à travers uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Vous pouvez l'installer en utilisant npm comme ceci:

 npm install -g uglify-js

A partir de 3.38.x vous pouvez utiliser mon minifyify plugin rapetisser votre paquet et ont encore sourcemaps utilisables. Ce n'est pas possible avec les autres solutions - le mieux que vous puissiez faire est de revenir au bundle non compressé. Minifyify maps jusqu'à vos fichiers source séparés (oui, même à coffeescript!)

Ou utilisez la transformation uglifyify 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."

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 haut dans Google.

Mon cas d'utilisation est un peu plus complexe que celui 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 bundle non compressé avec une carte source chaque fois qu'un fichier JavaScript change. Je ne veux pas que l'étape uglify car je veux que la construction se termine avant que j'ai alt-tabed dans le navigateur pour appuyer sur Actualiser et cela n'a aucun 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 la production (par exemple uglifié) mais je veux aussi une carte source. 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 carte source.

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

Remarques:

J'ai utilisé ces instructions sur 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 est apparemment possible d'obtenir une compression supérieure en modifiant tous les fichiers sources avant de les combiner avec browserify. Si vous avez plus de temps à y consacrer que moi, vous voudrez peut-être enquêter là-dessus.

Si vous n'avez pas encore 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 d'anciennes versions installées, je vous recommande de mettre à niveau. Surtout uglify-js car ils ont apporté une modification radicale aux arguments de ligne de commande qui invalide de nombreuses informations qui apparaissent dans Google.

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

J'aime terser qui prend en charge ES6 + et une bonne comporession aussi.

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

Installez globalement:

 npm i -g terser