Babel 是什么？

我不是女神ヾ 2022-10-09 00:40 124阅读 0赞

## 1.vue哪里用到了 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

## 2.了解 ##

### babel 到底做了什么？怎么做的？ ###

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。本文以 babel 6.x 为基准进行讨论。最近 babel 出了 7.x，放在最后聊。

严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。

如果你对 es5/es2015 等等也不了解的话，那你可能真的需要先补补课了。

了解babel：[https://zhuanlan.zhihu.com/p/43249121][https_zhuanlan.zhihu.com_p_43249121]

## 3.官网：[https://www.babeljs.cn/docs/][https_www.babeljs.cn_docs] ##

### Babel 是什么？ ###

### Babel 是一个 JavaScript 编译器 ###

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

*  语法转换
 *  通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 [core-js][]，实现）
 *  源码转换 (codemods)
 *  更多资源！（请查看这些 [视频][Link 1] 以获得启发）

// Babel 输入： ES2015 箭头函数
    [1, 2, 3].map((n) => n + 1);
    
    // Babel 输出： ES5 语法实现的同等功能
    [1, 2, 3].map(function(n) {
      return n + 1;
    });

> 有关编译器的精彩教程，请查看 [the-super-tiny-compiler][] 项目，它还高屋建瓴地解释了 Babel 的工作方式。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/896484f0e9ff4a92a9533d6768cc79f4.png
[https_zhuanlan.zhihu.com_p_43249121]: https://zhuanlan.zhihu.com/p/43249121
[https_www.babeljs.cn_docs]: https://www.babeljs.cn/docs/
[core-js]: https://github.com/zloirock/core-js
[Link 1]: https://www.babeljs.cn/videos.html
[the-super-tiny-compiler]: https://github.com/thejameskyle/the-super-tiny-compiler