javascript - online - browserify vs webpack

¿Cómo obtener resultados minificados con browserify?

Question

Acabo de empezar a usar browserify , pero no puedo encontrar documentación sobre cómo obtenerlo derramando resultados minificados.

Así que estoy buscando algo así como:

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

Answer 1

A partir de 3.38.x puedes usar mi complemento minifyify para minimizar tu paquete y aún tener mapas fuente útiles. Esto no es posible con las otras soluciones: lo mejor que puede hacer es volver al mapa sin comprimir. Minifyify mapas todo el camino de regreso a sus archivos de origen separados (sí, incluso a coffeescript!)

Answer 2

Después de pasar algunas horas investigando cómo construir nuevos procesos de construcción, pensé que otros podrían beneficiarse de lo que terminé haciendo. Estoy respondiendo a esta vieja pregunta, ya que aparece en lo alto de Google.

Mi caso de uso es un poco más complicado de lo que OP me pidió. Tengo tres escenarios de construcción: desarrollo, prueba, producción. Como la mayoría de los desarrolladores profesionales tendrán los mismos requisitos, creo que es excusable ir más allá del alcance de la pregunta original.

En desarrollo , utilizo watchify para compilar un paquete sin comprimir con el mapa fuente cada vez que cambia un archivo JavaScript. No quiero el paso de uglify ya que quiero que termine la compilación antes de que tenga una pestañas alt en el navegador para presionar actualizar y de todos modos no sea de ninguna utilidad durante el desarrollo. Para lograr esto uso:

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

Para las pruebas , quiero el mismo código exacto de producción (por ejemplo, uglified) pero también quiero un mapa fuente. Lo logro con:

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

Para la producción , el código se comprime con uglify y no hay un mapa fuente.

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

Notas:

He usado estas instrucciones en Windows 7, MacOS High Sierra y Ubuntu 16.04.

Dejé de usar minifyify porque ya no se mantiene.

Hay quizás mejores formas de lo que estoy compartiendo. He leído que aparentemente es posible obtener una compresión superior al uglificar todos los archivos fuente antes de combinar con browserify. Si tienes más tiempo para gastar en él que yo, tal vez quieras investigar eso.

Si no tiene watchify, uglify-js o browserify instalados, instálelos con npm así:

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

Si tiene instaladas versiones antiguas, le recomiendo que actualice. Particularmente uglify-js ya que hicieron un cambio radical en los argumentos de línea de comando que invalida una gran cantidad de información que aparece en Google.

Answer 3

O use uglifyify transform que "le da el beneficio de aplicar la transformación" squeeze "de Uglify antes de que Browserify lo procese, lo que significa que puede eliminar rutas de código muerto para requisitos condicionales".

Answer 4

Tápelo a través de uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Puedes instalarlo usando npm así:

 npm install -g uglify-js

Answer 5

Ya no es necesario usar complementos para minimizar mientras se preserva un mapa fuente:

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