Как получить минифицированный вывод с помощью browserify?

Только начал использовать browserify , но я не могу найти документацию о том, как заставить его выводить минифицированный вывод.

Итак, я выгляжу примерно так:

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

Пропустите его через uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Вы можете установить его с помощью npm так:

 npm install -g uglify-js

Начиная с версии 3.38.x, вы можете использовать мой плагин minifyify, чтобы минимизировать ваш пакет и по-прежнему использовать исходные карты. Это невозможно с другими решениями - лучшее, что вы можете сделать, - это сопоставить несжатый пакет. Уменьшите карты до отдельных исходных файлов (да, даже до coffeescript!)

Или используйте преобразование uglifyify, которое «дает вам преимущество применения преобразования« сжатие »Uglify до его обработки с помощью Browserify, что означает, что вы можете удалить пути мертвого кода для условных требований».

Потратив несколько часов на изучение того, как построить новые процессы сборки, я подумал, что другие могут извлечь выгоду из того, что я в итоге сделал. Я отвечаю на этот старый вопрос, поскольку он виден высоко в Google.

Мой вариант использования немного сложнее, чем просил OP. У меня есть три сценария сборки: разработка, тестирование, продакшн. Поскольку у большинства профессиональных разработчиков одни и те же требования, я считаю простительным выходить за рамки исходного вопроса.

В процессе разработки я использую watchify для создания несжатого пакета с исходной картой при каждом изменении файла JavaScript. Мне не нужен шаг uglify, так как я хочу, чтобы сборка завершилась до того, как я нажал на Alt-Tab, чтобы браузер нажал обновить, и в любом случае это не принесет никакой пользы во время разработки. Для этого я использую:

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

Для тестирования мне нужен тот же код, что и для продакшена (например, uglified), но мне также нужна исходная карта. Я добиваюсь этого с помощью:

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

Для производства код сжат с помощью uglify, и исходной карты нет.

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

Примечания:

Я использовал эти инструкции в Windows 7, MacOS High Sierra и Ubuntu 16.04.

Я перестал использовать minifyify, потому что он больше не поддерживается.

Может быть, есть способы лучше, чем то, чем я делюсь. Я читал, что, по-видимому, можно получить превосходное сжатие, удалив все исходные файлы перед объединением с браузером. Если у вас есть больше времени, чтобы потратить на это, чем у меня, вы можете исследовать это.

Если у вас еще не установлены watchify, uglify-js или browserify, установите их с помощью npm следующим образом:

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

Если у вас установлены старые версии, я рекомендую вам обновить. В частности, uglify-js, поскольку они внесли критическое изменение в аргументы командной строки, которое делает недействительной большую часть информации, которая появляется в Google.

Больше не нужно использовать плагины для минимизации при сохранении исходной карты:

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

Мне нравится terser, который поддерживает ES6 +, а также имеет хорошее сочувствие.

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

Установить глобально:

 npm i -g terser