Javascript 如何浏览、编译ES6和缩小NodeJS应用程序

我正试图同时处理browserify和ES6。我有以下基本节点文件：

main.js

var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);

exports.math = (n)=>{ 
  return n * 111;
};

foo.js

var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);

exports.math = (n)=>{ 
  return n * 111;
};

现在我想做以下工作：

• 将其浏览到一个文件

  bundle.js

  ，这样我就可以将其作为脚本包含在我的网站中
• 使用babel编译JS，使所有浏览器都能阅读ES6
• 缩小

  bundle.js

  以缩短浏览器中的加载时间

我已在全局安装了browserify，并使用以下命令运行它：

browserify main.js>bundle.js

---

效果很好。但我应该先运行babel吗？我如何完成我的三步流程，以及以什么顺序（当然缩小必须在最后进行）？我应该用grunt来完成这一切吗？

应该不再需要使用任务运行器了。但是，从命令行使用整洁的插件，如

babelify

，如其

README.md

中所述

并根据需要从其他任何地方添加其他转换，例如，

uglify

对于es6使用，它支持es6

npm安装uglify es-g

一年内未更新，未维护，可能无法运行。我建议使用类似run的插件来安装uglifyify

npm i uglifyify

自2018年起，babelify需要@babel/core（babel 7）和一个类似@babel/preset env的预设

按如下方式安装它们：

npm i babelify @babel/core @babel/preset-env

最后

browserify \
-t [ babelify --presets [[ @babel/preset-env]]  \
-g uglifyify main.js > bundle.js

---

你应该使用grunt，首先使用browserify。是的，你应该首先使用babel，当你在这里使用ES6模块时，这似乎是必要的。2关于首先运行哪个任务的相互矛盾的评论…@Coop Bergi是正确的。Grunt甚至不需要用于ES6透明化或缩小。您需要先使用babel传输您的模块，然后browserify甚至可以考虑绑定它们。无论如何，把这种误解当作一个信号，也许你应该放慢一点速度，花点时间去理解你正在使用的工具。ES6模块不是CommonJS，因此必须首先将它们转换为CommonJS，这就是Babel所做的（以及其他事情）。或者使用在ES6模块上工作的绑定器，例如.FWIW，uglify仍然不支持ES6