Только начал использовать browserify , но я не могу найти документацию о том, как заставить его выводить минифицированный вывод.
Итак, я выгляжу примерно так:
$> browserify main.js > bundle.js --minified
Только начал использовать 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