¿Cómo obtener una salida minificada con browserify?


Acabo de empezar a usar browserify, pero no puedo encontrar documentación sobre cómo hacerlo derramando una salida minificada.

Así que estoy buscando algo como:

$> browserify main.js > bundle.js --minified
Author: Fdr, 2013-03-23

5 answers

Pipe it through uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Puede instalarlo usando npm de la siguiente manera:

 npm install -g uglify-js
 113
Author: topek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-12 16:53:31

A partir de 3.38.x puedes usar mi plugin minifyify para minificar tu paquete y tener sourcemaps utilizables. Esto no es posible con las otras soluciones the lo mejor que puede hacer es asignar de nuevo al paquete sin comprimir. Minifyify mapas todo el camino de vuelta a sus archivos fuente separados (sí, incluso a coffeescript!)

 21
Author: Ben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-19 21:48:49

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

 15
Author: srgstm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-18 16:12:52

Después de pasar unas 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 parece alta en Google.

Mi caso de uso está un poco más involucrado de lo que OP pidió. Tengo tres escenarios de construcción: desarrollo, pruebas, 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 construir un paquete sin comprimir con mapa de origen cada vez que cambia un archivo JavaScript. No quiero el paso uglify ya que quiero que la compilación termine antes de que haya alt-tabbed al navegador para presionar refrescar y no es de ningún beneficio durante el desarrollo de todos modos. Para lograr esto utilizo:

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

Para probar , quiero exactamente el mismo código que production (por ejemplo, uglified) pero también quiero un mapa de origen. Logro esto con:

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

Para production , el código se comprime con uglify y no hay mapa de origen.

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

Notas:

He utilizado estas instrucciones en Windows 7, macOS High Sierra y Ubuntu 16.04.

He dejado de usar minifyify porque ya no se mantiene.

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

Si no tienes watchify, uglify-js o browserify ya instalados, instálalos con npm así:

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

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

 7
Author: Gary Ott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-13 14:31:20

Ya no es necesario usar plugins para minificar mientras se preserva un mapa de origen:

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
 3
Author: user,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-09 13:55:43