如何正确使用 Watchify 和 Uglify？

Question

我正在寻找一种使用 browserify 进行缩小的好方法。

我正在开发一个反应应用程序，试图使构建设置尽可能简单。

我正在使用browserify、babelify 和watchify。 我不想使用像 grunt 或 gulp 这样的任务运行器，而只是使用 npm 以使设置尽可能简单。

我想对 browserify（生产构建）和 watchify（在开发过程中）使用相同的参数。开发期间编译的 js 应该与生产构建中的完全相同（即我希望在开发期间也进行缩小。我希望使用 browserify 进行最强大的缩小。我知道还有其他模块加载器，如 rollup 或 systemjs 可以实现更小的输出，但这不是我感兴趣的。

我当前的watch 命令如下所示： watchify src/main.js -t babelify -t envify -o build/bundle.js -v 相应的构建命令如下所示： browserify src/main.js -t babelify -t envify -o build/bundle.js -v

请注意，所有参数看起来都一样。这就是我想成为的样子，以便将来保持命令同步。

现在我的问题是如何添加丑化/缩小。

我尝试像这样添加 uglifyify：-g [ uglifyify --no-sourcemap ] 但输出中仍然有很多换行符，所以我猜它没有完全缩小。

我还尝试删除 -o 参数并通过 uglifyjs as described here 管道输出。这会产生较小的输出，但不适用于 watchify 命令。

Answer 1

请注意，uglifyify 从 uglifyjs 运行挤压变换，但它建议您仍然在结果输出上使用 uglifyjs。

Uglifyify 为您提供了在每个文件包含在包中之前对其应用 Uglify 的“挤压”转换的好处，这意味着您可以删除条件要求的死代码路径。

所以要更改您以前的命令以包含uglifyjs：

browserify src/main.js -t babelify -t envify -t uglifyify | uglifyjs -cm > build/bundle.min.js

watchify src/main.js -t babelify -t envify -t uglifyify -o 'uglifyjs -cm > build/bundle.min.js' -v

注意事项

• watchify 命令上的--outfile / -o 开关能够接受包含| 或> 字符的shell 命令。
• 当您在捆绑阶段之后通过管道传输结果时，uglifyjs 必须将文件作为一个整体而不是较小的块处理，因此您将失去watchify 带来的一些速度优势提供。

Answer 2

你不应该将 uglify 与 watchify 一起使用，我在使用它时遇到了很多麻烦（终端崩溃，ram eater），直到我读到一些 minify 工具与它不兼容。

你不需要压缩文件进行开发，只需使用 watchify 进行开发，使用 browserify + uglify 进行生产包。

下面是一些 npm 使用 browserify 和 watchify 的脚本示例：

"scripts" : {
  "build": "browserify -t babelify -t uglifyify ./src/app.js -o ./dist/app.min.js",
  "watch": "watchify -t babelify ./src/app.js -o ./dist/app.js --debug"
}

也不要忘记你项目根目录下的 .babelrc 文件，然后安装这个：

npm i -S babel-runtime babel-preset-es2015 browserify watchify