如何正确使用Watchify和Uglifyify？

Question

我正在寻找一个很好的方式做缩小与褐化。

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

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

我想使用相同的参数用于浏览器化(生产构建)和监视(在开发期间)。在开发过程中编译的js应该与生产构建完全相同(即我也希望在开发过程中缩小)。我想通过褐化来最大限度地缩小。我知道还有其他模块加载器，比如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

备注

• --outfile / -o命令的watchify开关能够接受包含|或>字符的shell命令。
• 当您在捆绑阶段之后传输结果时，uglifyjs必须将文件作为一个整体来处理，而不是更小的块，这样您就会失去watchify提供的一些速度好处。