如何使用Browserify编译ES6并压缩NodeJS应用程序

Question

我是一个有用的助手，可以将文本翻译成中文。

我正在尝试同时掌握browserify和ES6。我有以下基本Node文件：

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吗？如何完成我的三个步骤并按什么顺序进行（当然，缩小需要最后发生）？我应该用grunt来完成这些操作吗？

- CaribouCode

---

你应该使用 Grunt 完成这个任务，并先使用 browserify。 - Olavi Sau

是的，你应该首先使用Babel，当你使用ES6模块时，这似乎是必需的。 - Bergi

这里有两个关于先运行哪个任务的冲突评论... - CaribouCode

@Coop Bergi是正确的。Grunt甚至不需要用于ES6转译或缩小。在browserify可以考虑捆绑它们之前，您需要首先使用babel转译您的模块。无论如何，将这种误解视为一个迹象，表明您可能应该放慢一点速度，花时间了解您正在使用的工具。 - Mulan

Browserify 适用于 CommonJS 模块。ES6模块不是CommonJS，因此首先必须将它们转换为 CommonJS，这就是Babel所做的（除其他事项之外）。或者您可以使用适用于 ES6 模块的捆绑程序，例如 https://github.com/rollup/rollup 。 - Felix Kling

Answer 1

现在不再需要使用任务运行器。然而，可以像其README.md中描述的那样，在命令行中使用babelify这样的整洁插件 here。

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

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

您可以从此处或其他地方添加所需的其他转换，例如uglify。

- eljefedelrodeodeljefe

---

就此而言，uglify仍不支持es6。 - Kraken

Answer 2

如果要使用 ES6，请使用 uglify-es，它支持 ES6。

npm install uglify-es -g

- Sudhanshu Gaur

Answer 3

Uglify ES已经有一年没有更新，也没有维护，可能无法正常工作。我建议使用Terser，并使用像uglifyify这样的插件运行以下命令来安装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

- DaveC