node.js 如何使用 browserify 获得缩小的输出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15590702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get minified output with browserify?
提问by Fdr
Just started to use browserify, but I cannot find documentation for how to get it spilling out minified output.
刚开始使用browserify，但我找不到有关如何让它溢出缩小输出的文档。
So I am looking something like:
所以我看起来像：
$> browserify main.js > bundle.js --minified
回答by topek
Pipe it through uglifyjs:
通过 uglifyjs 管道它：
browserify main.js | uglifyjs > bundle.js
You can install it using npm like so:
你可以像这样使用 npm 安装它：
npm install -g uglify-js
回答by Ben
As of 3.38.x you can use my minifyifyplugin to minify your bundle and still have usable sourcemaps. This is not possible with the other solutions -- the best you can do is map back to the uncompressed bundle. Minifyify maps all the way back to your separate source files (yes, even to coffeescript!)
从 3.38.x 开始，您可以使用我的minify插件来缩小您的包并且仍然有可用的源映射。这在其他解决方案中是不可能的——你能做的最好的事情就是映射回未压缩的包。缩小映射到您单独的源文件（是的，甚至到 coffeescript！）
回答by srgstm
回答by Gary Ott
After spending a few hours investigating how to construct new build processes, I thought others may benefit from what I ended up doing. I'm answering on this old question as it appears high in Google.
在花了几个小时研究如何构建新的构建过程后，我认为其他人可能会从我最终所做的事情中受益。我正在回答这个老问题，因为它在谷歌中显得很高。
My use case is a little more involved than OP asked for. I have three build scenarios: development, testing, production. As most professional developers will have the same requirements, I think it's excusable to go beyond the scope of the original question.
我的用例比 OP 要求的要多一些。我有三个构建场景：开发、测试、生产。由于大多数专业开发人员都会有相同的要求，我认为超出原始问题的范围是情有可原的。
In development, I use watchify to build an uncompressed bundle with source map whenever a JavaScript file changes. I don't want the uglify step since I want the build to finish before I've alt-tabbed to the browser to hit refresh and it's not of any benefit during development anyway. To achieve this I use:
在开发中，每当 JavaScript 文件更改时，我都会使用 watchify 构建一个带有源映射的未压缩包。我不想要 uglify 步骤，因为我希望构建在我用 alt-tab 键切换到浏览器以刷新之前完成，无论如何在开发过程中它没有任何好处。为了实现这一点，我使用：
watchify app/index.js --debug -o app/bundle.js -v
For testing, I want the exact same code as production (e.g. uglified) but I also want a source map. I achieve this with:
对于测试，我想要与生产完全相同的代码（例如丑化），但我也想要一个源地图。我通过以下方式实现了这一目标：
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
For production, the code is compressed with uglify and there is no source map.
对于 production，代码是用 uglify 压缩的，没有 source map。
browserify app/index.js | uglifyjs -cm > app/bundle.js
Notes:
笔记：
I have used these instructions on Windows 7, MacOS High Sierra and Ubuntu 16.04.
我在 Windows 7、MacOS High Sierra 和 Ubuntu 16.04 上使用了这些说明。
I have stopped using minifyify because it is no longer maintained.
我已经停止使用 minifyify 因为它不再被维护。
There maybe better ways than what I am sharing. I have read it is apparently possible to get superior compression by uglifying all source files before combining with browserify. If you've got more time to spend on it than I have, you may wish to investigate that.
也许有比我分享的更好的方法。我已经读过，在与 browserify 结合之前，通过丑化所有源文件显然有可能获得卓越的压缩。如果你有比我更多的时间花在它上面，你可能希望调查一下。
If you do not have watchify, uglify-js or browserify installed already, install them with npm thus:
如果您还没有安装 watchify、uglify-js 或 browserify，请使用 npm 安装它们：
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
If you have old versions installed I recommend you upgrade. Particularly uglify-js as they made a breaking change to command line arguments which invalidates a lot of information that comes up in Google.
如果您安装了旧版本，我建议您升级。特别是 uglify-js，因为他们对命令行参数进行了重大更改，这使 Google 中出现的许多信息无效。
回答by user
No need to use plugins anymore to minify while preserving a source map:
无需再使用插件来缩小，同时保留源映射：
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
