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

Question

我试图同时掌握 browserify 和 ES6。 我有以下基本节点文件：

主文件

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 main.js > bundle.js ，并使用以下命令运行它： browserify main.js > bundle.js

效果很好。 但是我应该先运行 babel 吗？ 我如何完成我的 3 步过程以及以什么顺序（当然缩小必须最后发生）？ 我应该用咕噜声做这一切吗？

Answer 1

不再需要使用任务运行器。 但是，请README.md此处的README.md所述，从命令行使用babelify类的简洁插件。

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

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

并根据需要从此处或其他任何地方添加其他转换，例如uglify 。

Answer 2

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

npm 安装 uglify-es -g

Answer 3

Uglify ES一年没有更新，没有维护，可能不会工作。 我建议将Terser与uglify 之类的插件一起使用运行以下命令来安装 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