Como obter uma saída minimizada com o browserify?

Acabei de começar a usar o browserify , mas não consigo encontrar a documentação de como fazer com que ele exiba uma saída minimizada.

Então, estou parecendo algo como:

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

Canalize através de uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Você pode instalá-lo usando o npm da seguinte forma:

 npm install -g uglify-js

A partir de 3.38.x, você pode usar meu plug-in minifyify para reduzir seu pacote e ainda ter mapas de origem utilizáveis. Isso não é possível com as outras soluções - o melhor que você pode fazer é mapear de volta para o pacote descompactado. Minify mapas de volta para seus arquivos de origem separados (sim, até mesmo para coffeescript!)

Ou use a transformação uglifyify que "lhe dá o benefício de aplicar a transformação" squeeze "do Uglify antes de ser processada pelo Browserify, o que significa que você pode remover caminhos de código morto para requisitos condicionais."

Depois de passar algumas horas investigando como construir novos processos de construção, pensei que outras pessoas podem se beneficiar com o que acabei fazendo. Estou respondendo a esta pergunta antiga, pois ela aparece no topo do Google.

Meu caso de uso é um pouco mais complicado do que o OP pediu. Eu tenho três cenários de construção: desenvolvimento, teste, produção. Como a maioria dos desenvolvedores profissionais terá os mesmos requisitos, acho que é desculpável ir além do escopo da pergunta original.

No desenvolvimento , eu uso watchify para construir um pacote descompactado com mapa de origem sempre que um arquivo JavaScript é alterado. Eu não quero a etapa uglify, pois quero que a compilação termine antes de eu clicar com a tecla Alt para que o navegador clique em atualizar e, de qualquer forma, isso não traz nenhum benefício durante o desenvolvimento. Para conseguir isso, eu uso:

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

Para teste , quero exatamente o mesmo código de produção (por exemplo, uglified), mas também quero um mapa de origem. Eu consigo isso com:

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

Para produção , o código é compactado com uglify e não há mapa de origem.

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

Notas:

Usei essas instruções no Windows 7, MacOS High Sierra e Ubuntu 16.04.

Parei de usar o minifyify porque ele não é mais mantido.

Talvez existam maneiras melhores do que as que estou compartilhando. Eu li que, aparentemente, é possível obter compressão superior feio todos os arquivos de origem antes de combinar com o browserify. Se você tem mais tempo para dedicar a isso do que eu, pode querer investigar.

Se você ainda não tem watchify, uglify-js ou browserify instalado, instale-os com o npm desta forma:

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

Se você tiver versões antigas instaladas, eu recomendo que você atualize. Particularmente o uglify-js, pois eles fizeram uma alteração significativa nos argumentos da linha de comando, o que invalida muitas informações que aparecem no Google.

Não há necessidade de usar plug-ins mais para minimizar enquanto preserva um mapa de origem:

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

Eu gosto do terser que tem suporte para ES6 + e alguns bons comporession também.

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

Instale globalmente:

 npm i -g terser