Babel 和 Webpack 到底是什么？2 分钟讲解完毕。

巴别塔

Webpack

总结，

Babel 和 Webpack 就像苹果🍎和香蕉🍌。由于它们解决的问题不同，人们从来不会将它们放在一起比较。这篇文章解释了它们之间的区别。

巴别塔

Babel 只是一个翻译器，它将你的“花哨的”（ES6+）JS 代码翻译成浏览器（前端）或 Node.js（后端）可以理解的“不那么花哨的”（ES5）代码。

为什么我们说的比浏览器和 Node.js 更花哨？因为我们迫不及待地想用最新最好的，甚至在它们正式获得支持之前。

下面是如今大多数开发者写的一段花哨的代码。尽管它看起来花哨，但我们的浏览器/Node.js 根本不知道它在说什么。（注：部分 Node.js 高版本现已支持 ES6。）

// ES6 syntax
import moment from 'moment';

export default () => moment().format("YYYY Do MM");

这就是为什么我们需要 Babel 将上面的代码转换成下面等效的、不那么花哨的代码，以便我们的浏览器 / Node.js 能够理解。

// ES5 syntax
const moment = require('moment')

function getDateString() {
  const date = moment();
  return date.format("YYYY Do MM");
}

exports.default = getDateString;

这就是为什么 Babel 有时被称为转译器。

值得注意的是，Babel 通常用于前端和后端。为什么我要提到这一点？因为 Webpack 在大多数情况下只适用于前端。

Webpack

如果说 Babel 是 JS 的翻译器，那么 Webpack 则是一个超级多功能翻译器，可以处理各种语言（或资源）。例如，Webpack 经常将 Babel 作为其任务之一运行。再比如，Webpack 可以收集 JavaScript 文件中所有内联 CSS 样式，并将它们打包成一个。

为什么前端需要这么一个庞然大物，而后端却不需要呢？

因为前端拥有各种各样的资源，例如 CSS、SASS、图片、字体，比仅有 JS 的后端复杂得多，也更具动态性。最终，我们需要以某种方式将所有类型的资源打包成一个小文件，以便用户浏览器在页面加载时下载。这也称为minify。uglify你看，后端完全没有上述任何要求。

另一个重要原因是前端不支持模块（同样，在大多数情况下）。模块是 Node.js 的内置功能，而非浏览器的内置功能。如今，开发人员已经习惯在前端使用npm install、import和exportJS 模块，因为它可以让我们更好地组织代码和共享包。但实际上，它们只是语法糖，Webpack 的工作是找出我们在代码中使用的所有模块之间的所有依赖关系，并将它们编译成浏览器能够理解的一大段 JS 代码。

我们什么时候在后端使用 Webpack？一个很好的用例是支持 SSR（服务器端渲染）。

总结，

• 后端：我们使用 Babel，以便我们可以将最花哨的 JS 语法（ES6/7）与 Node.js 一起使用。
• 前端：我们使用 Webpack（它使用了 Babel 和其他工具）将 JS 代码和许多其他资源编译成几个小的打包文件，供用户在首次加载我们的网页时下载。例如，在创建您的应用时，create-react-app我们会同时使用 Webpack 和 Babel。