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


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

Так что я смотрю что-то вроде:

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

5 ответов:

труба его через uglifyjs:

 browserify main.js | uglifyjs > bundle.js

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

 npm install -g uglify-js

по состоянию на 3.38.X вы можете использовать мой minifyify плагин для минимизации вашего пакета и по-прежнему имеют полезные исходные карты. Это невозможно с другими решениями - лучшее, что вы можете сделать, это вернуться к несжатому пакету. Minifyify maps полностью возвращается к вашим отдельным исходным файлам (да, даже к coffeescript!)

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

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

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

в разработке, я использую 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, потому что он больше не поддерживается.

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

если у вас еще нет 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