如何使用 browserify 获得缩小的输出？答案

【问题标题】：How to get minified output with browserify?如何使用 browserify 获得缩小的输出？
【发布时间】：2013-03-13 12:16:28
【问题描述】：

刚开始使用browserify，但我找不到关于如何让它溢出缩小输出的文档。

所以我看起来像：

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

【问题讨论】：

【解决方案1】：

通过 uglifyjs 管道：

 browserify main.js | uglifyjs > bundle.js

你可以像这样使用 npm 安装它：

 npm install -g uglify-js

【讨论】：

如何使用 grunt browserify/watchify 任务做到这一点？
如果您使用 grunt，我建议您分两步完成。先用 browserify 编译，然后再缩小。优点是您可以拥有一个带有源映射的开发版本和一个剥离所有内容的生产版本。
是的，这就是我最终所做的。它实际上是 3 个步骤，你必须清理中间文件。谢谢！
如果我想为我的 uglified 文件提供一个源映射 - 这将指向“浏览器化”之前的代码？
@ThomasDeutsch I made a plugin for that.

【解决方案2】：

从 3.38.x 开始，您可以使用我的 minifyify 插件来缩小您的捆绑包并且仍然有可用的源映射。这在其他解决方案中是不可能的——您能做的最好的事情就是映射回未压缩的包。缩小地图一直到您单独的源文件（是的，甚至到咖啡脚本！）

【讨论】：

【解决方案3】：

或者使用 uglifyify 转换，它“让您在 Browserify 处理之前应用 Uglify 的“挤压”转换，这意味着您可以删除条件要求的死代码路径。”

【讨论】：

【解决方案4】：

在花了几个小时研究如何构建新的构建流程之后，我认为其他人可能会从我最终做的事情中受益。我正在回答这个老问题，因为它在 Google 中似乎很高。

我的用例比 OP 要求的要复杂一些。我有三个构建场景：开发、测试、生产。由于大多数专业开发人员都会有相同的要求，我认为超出原始问题的范围是情有可原的。

在开发中，每当 JavaScript 文件发生更改时，我都会使用 watchify 构建一个带有源映射的未压缩包。我不想要 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 结合之前对所有源文件进行 uglifying 来获得更好的压缩。如果你花在这上面的时间比我多，你不妨调查一下。

如果您还没有安装 watchify、uglify-js 或 browserify，请使用 npm 安装它们：

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

如果您安装了旧版本，我建议您升级。特别是 uglify-js，因为他们对命令行参数进行了重大更改，这使 Google 中出现的大量信息无效。

【讨论】：

【解决方案5】：

在保留源映射的同时不再需要使用插件来缩小：

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

【讨论】：

【解决方案6】：

我喜欢terser，它支持 ES6+ 并具有良好的压缩性。

browserify main.js | terser --compress --mangle > bundle.js

全局安装：

 npm i -g terser

【讨论】：