如何通過browserify獲得縮小輸出？

剛開始使用browserify，但我找不到文檔說明如何讓它縮小輸出。如何通過browserify獲得縮小輸出？

所以我要尋找的東西，如：

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

2013-03-23 Fdr

縮小超出browserify的範圍，您需要通過縮小器運行它的輸出。 – generalhenry 2013-03-23 19:32:30

108

它管道uglifyjs：

browserify main.js | uglifyjs > bundle.js

可以使用NPM像這樣安裝：

npm install -g uglify-js

2013-03-23 21:28:28 topek

如何用grunt browserify/watchify任務來做到這一點？ – 2013-12-29 22:32:51

如果你使用咕嚕聲，我會建議分兩步做。首先使用browserify進行編譯，然後進行縮小。優點是你可以通過源地圖和生產版本來開發版本，它可以將所有東西都分離出來。 – topek 2013-12-30 08:08:40

是的，這就是我最終做的。其實際上3個步驟，你必須清理中間文件。謝謝！ – 2013-12-31 00:01:16

或者使用uglifyify變換它「在應用Uglify的」擠壓「變換之前爲您提供了好處，它由Browserify，m處理你可以去除條件需求的死代碼路徑。「

2014-01-18 16:12:52 srgstm

它仍然需要使用頂級答案中顯示的uglify管道。他們在文檔的開頭就這麼說。 – 2016-10-11 19:36:03

從3.38.x開始，您可以使用我的minifyify插件縮小您的包並仍然有可用的源地圖。這對其他解決方案來說是不可能的 - 您可以做的最好的事情是映射回未壓縮的包。 Minifyify一路映射回您單獨的源文件（是的，甚至到CoffeeScript的！）

2014-05-19 21:48:49 Ben

它說它支持到browserify版本9. Browserify目前在11.0.1。它會支持嗎？ – cchamberlain 2015-09-03 19:28:26

[uglifyify]（https://github.com/hughsk/uglifyify）似乎對我來說是一個很好的替代品 – 2017-02-20 01:13:43

無需使用插件不再來縮小，同時保留源地圖：

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

2017-04-09 13:55:43 user

花幾個小時的調查後，如何構建新的構建過程，我認爲其他人可能從我最終做的事情中受益。我在回答這個老問題，因爲它在Google看來很高。

我的用例比OP所涉及的要多一點。我有三種構建方案：開發，測試和生產。由於大多數專業開發人員都會有相同的要求，我認爲超越原始問題的範圍是可以理解的。

在開發中，我使用watchify在JavaScript文件更改時使用源映射構建一個未壓縮的包。我不希望uglify這一步，因爲我希望構建在完成之前完成，直到刷新瀏覽器並刷新，並且在開發過程中它沒有任何好處。爲了實現這一點我使用：

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

出於測試，我要完全相同的代碼作爲生產（例如變醜），但我也希望有一個源映射。我做到這一點有：

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

對於生產，代碼壓縮與醜化，沒有來源的地圖。

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

注：

我已經使用在Windows 7上這些指令，MacOS的高塞拉利昂和Ubuntu 16.04。

我已經停止使用minifyify，因爲它不再被維護。

有可能比我分享更好的方式。我已經讀過它顯然有可能通過在與browserify結合之前通過uglify所有源文件來獲得優越的壓縮。如果你比我有更多的時間花在它上面，你可能希望調查一下。

如果你沒有watchify，醜化-JS或browserify已經安裝，因此與故宮安裝：

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

如果您已經安裝了舊版本，我建議你升級。特別是uglify-js，因爲它們對命令行參數做出了重大改變，這些改變使Google中出現的大量信息無效。

2017-12-19 14:37:03

回答