¿Cómo obtener resultados minificados con browserify?

Acabo de comenzar a usar browserify , pero no puedo encontrar documentación sobre cómo hacer que se derrame una salida minificada.

Entonces me veo algo como:

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

Canalícelo a través de uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Puedes instalarlo usando npm así:

 npm install -g uglify-js

A partir de 3.38.x, puede usar mi complemento minifyify para minimizar su paquete y aún tener mapas de origen utilizables. Esto no es posible con las otras soluciones; lo mejor que puede hacer es volver a mapear el paquete sin comprimir. Minimice los mapas hasta sus archivos fuente separados (sí, ¡incluso a coffeescript!)

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

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 porque parece alta en Google.

Mi caso de uso es un poco más complicado de lo que pidió OP. 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 , uso watchify para crear un paquete sin comprimir con el mapa fuente cada vez que cambia un archivo JavaScript. No quiero el paso uglify ya que quiero que la compilación termine antes de que haya pulsado la pestaña Alt en el navegador para presionar la actualización y de todos modos no es de ningún beneficio durante el desarrollo. Para lograr esto utilizo:

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

Para las pruebas , quiero exactamente el mismo código que el 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.

Quizás haya mejores formas que las que estoy compartiendo. He leído que aparentemente es posible obtener una compresión superior uglificando todos los archivos de origen antes de combinarlos con browserify. Si tiene más tiempo que yo para dedicarle, es posible que desee investigarlo.

Si aún 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 realizaron un cambio radical en los argumentos de la línea de comandos que invalida una gran cantidad de información que aparece en Google.

Ya no es necesario usar complementos para minificar mientras se conserva un mapa de origen:

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

Me gusta terser que tiene soporte para ES6 + y también una buena composición.

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

Instalar globallly:

 npm i -g terser