Question

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

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

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

我想对browserify（生成版本）和watchify（开发期间）使用相同的参数。在开发过程中编译的js应该与生产版本中的完全相同（即我在开发过程中也需要缩小。我希望使用browserify进行最强化的缩小。我知道还有其他模块加载器，如汇总或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

请注意，所有参数看起来都一样。这就是我希望将来保持命令同步的方式。

现在我的问题是如何添加uglification / minification。

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

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

Answer 1

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

您不需要缩小文件进行开发，只需使用watchify进行开发，并将browserify + uglify用于生产包。

以下是npm使用browserify并与babel一起观察的一些脚本示例：

"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

Answer 2

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

Uglifyify为您提供了应用Uglify＆＃34;挤压＆＃34;在包含在包中之前对每个文件进行转换，这意味着您可以删除条件要求的死代码路径。

所以要更改以前的命令以包含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命令，因为它们包含|或>字符。< / LI>
在捆绑阶段之后管道结果时，uglifyjs必须将文件作为整个而不是较小的块使用，这样您将失去一些速度优势{ {1}}提供。

如何正确使用Watchify与Uglifyify？

2 个答案:

注释