一、Babel基础知识点的介绍

1. 什么是 babel， babel的简介和概述

Babel 是一个 JavaScript 编译器

Babel 是一个工具链（编译器），主要用于将

ECMAScript 2015+

版本的代码转换为向后兼容的 JavaScript 语法，以便代码可以运行在当前和旧版本的浏览器或其他环境中。

作为一种语言，JavaScript 在不断发展，新的标准／提案和新的特性层出不穷。 在得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译（

transpiling

，是一个自造合成词，即转换＋编译。以下也简称为转译）。

2. 为什么要使用 babel

因为babel是目前es6转es5的最火最好用的一款工具，也是使用最为广泛的一款

javascript

编译器，对多款构建工具（包括

webpack

、

gulp

等）有良好的兼容场景；使用

es6+

新特性可以极大的提升了我们的开发效率；当然，它也是编译

react

、

jsx

及

typescript

等语法的最常用的工具；学习使用

babel

以及它的配置，不仅更加深入的了解这个工具的使用，以及

AST

语法树的原理，提升前端项目在多平台的兼容性，再也不用担心各种

IE

兼容啦，而且掌握

babel

也是进阶高级前端工程师的必要的一个途径。

3. babel 的特点

• 轻便，快捷，用户量广泛，社区强大
• 紧跟js新特性更新维护
• 对大量的第三方构建工具提供支持
• 配置种类很多，且简单易用

4. babel 有哪些用途

• es6+转es5语法转换
• jsx文件转成js文件
• 通过

  Polyfill

  方式在目标环境中添加缺失的特性 (通过

  @babel/polyfill

  模块)
• 源码转换 (

  codemods

  )

5. babel 的工作原理

1. 解析：用

   babylon

   对源代码(比如ES6)进行词法解析，得到

   AST

2. 转换：用

   babel-traverse

   对AST树进行遍历转换，得到新的

   AST

   树
3. 生成：用

   babel-generator

   通过AST树生成目标代码(比如

   ES5

   )