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

Ответ 1

Протяните его через uglifyjs:

 browserify main.js | uglifyjs > bundle.js

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

 npm install -g uglify-js

Ответ 2

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

Ответ 3

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

Ответ 4

Нет необходимости использовать плагины для минимизации при сохранении исходной карты:

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

Ответ 5

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

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

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

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 и MacOS.

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

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

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

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

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