Jak uzyskać zminimalizowane dane wyjściowe za pomocą browserify?

Właśnie zacząłem korzystać z przeglądarki browserify , ale nie mogę znaleźć dokumentacji, jak to wyrzucić zminimalizowane dane wyjściowe.

Wyglądam więc na coś takiego:

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

Przeprowadź przez uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Możesz go zainstalować używając npm w następujący sposób:

 npm install -g uglify-js

Od wersji 3.38.x możesz użyć mojej wtyczki minifyify, aby zminimalizować swój pakiet i nadal mieć użyteczne mapy źródeł. Nie jest to możliwe w przypadku innych rozwiązań - najlepsze, co możesz zrobić, to mapować z powrotem do nieskompresowanego pakietu. Zmodyfikuj mapy aż do oddzielnych plików źródłowych (tak, nawet do skryptu Coffeescript!)

Lub użyj transformacji uglifyify, która „daje korzyści ze stosowania transformacji„ squeeze ”Uglify przed przetworzeniem przez Browserify, co oznacza, że ​​możesz usunąć ścieżki martwego kodu dla wymagań warunkowych”.

Po spędzeniu kilku godzin na badaniu, jak konstruować nowe procesy kompilacji, pomyślałem, że inni mogą skorzystać na tym, co zrobiłem. Odpowiadam na to stare pytanie, ponieważ wydaje się ono wysoko w Google.

Mój przypadek użycia jest trochę bardziej zaangażowany, niż żądał OP. Mam trzy scenariusze kompilacji: programowanie, testowanie, produkcja. Ponieważ większość profesjonalnych programistów będzie miała te same wymagania, myślę, że wyjście poza zakres pierwotnego pytania jest usprawiedliwione.

W trakcie opracowywania używam watchify do tworzenia nieskompresowanego pakietu z mapą źródłową za każdym razem, gdy zmienia się plik JavaScript. Nie chcę kroku uglify, ponieważ chcę, aby kompilacja zakończyła się, zanim przejdę do przeglądarki, aby przejść do odświeżania, i tak nie jest to żadna korzyść podczas programowania. Aby to osiągnąć, używam:

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

Do testowania potrzebuję dokładnie tego samego kodu, co produkcyjny (np. Uszlachetniony), ale chcę też mieć mapę źródłową. Osiągam to dzięki:

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

Na potrzeby produkcji kod jest kompresowany za pomocą uglify i nie ma mapy źródłowej.

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

Uwagi:

Użyłem tych instrukcji w systemie Windows 7, MacOS High Sierra i Ubuntu 16.04.

Przestałem używać minifyify, ponieważ nie jest już obsługiwany.

Może są lepsze sposoby niż to, czym się dzielę. Czytałem, że najwyraźniej można uzyskać lepszą kompresję, usuwając wszystkie pliki źródłowe przed połączeniem z browserify. Jeśli masz na to więcej czasu niż ja, możesz to zbadać.

Jeśli nie masz już zainstalowanych watchify, uglify-js lub browserify, zainstaluj je za pomocą npm w ten sposób:

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

Jeśli masz zainstalowane stare wersje, polecam aktualizację. Szczególnie uglify-js, ponieważ dokonali przełomowej zmiany w argumentach wiersza poleceń, która unieważnia wiele informacji, które pojawiają się w Google.

Nie ma już potrzeby używania wtyczek do minifikacji przy zachowaniu mapy źródłowej:

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

Lubię terser, który obsługuje ES6 + i dobrą kompresję.

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

Zainstaluj globalnie:

 npm i -g terser