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

Question

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

main.js

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

foo.js

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

现在我想做以下事情：

• 将其浏览到文件bundle.js，以便我可以将其作为脚本包含在我的网站中
• 使用babel编译JS以使所有浏览器都能读取ES6
• 缩小bundle.js以改善浏览器中的加载时间

我已全局安装了browserify，并使用此命令运行： browserify main.js > bundle.js

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

Answer 1

不再需要使用任务运行器。但是，请使用命令行中的babelify这样的简洁插件，如README.md here中所述。

npm install --save-dev browserify babelify babel-preset-es2015

browserify script.js -o bundle.js \
    -t [ babelify --presets es2015 ] 

根据需要从here或其他任何地方添加其他变换，例如uglify。

Answer 2

对于es6，请使用uglify-es，它支持ES6。

  

npm安装uglify-es -g

Answer 3

Uglify ES一年没有更新，因此无法维护，可能无法正常工作。我建议将Terser与uglifyify之类的插件一起使用，运行以​​下命令以安装uglifyfy

npm i uglifyfy

截至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 uglify main.js > bundle.js