Babel是什么？

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

Babel 的中文解释是巴别塔。在《圣经》当中，有这样的故事。当时地上的人们都说同一种语言，当人们离开东方之后，他们来到了示拿之地。在那里，人们想方设法烧砖好让他们能够造出一座城和一座高耸入云的塔来传播自己的名声，以免他们分散到世界各地。上帝来到人间后看到了这座城和这座塔，说一群只说一种语言的人以后便没有他们做不成的事了；于是上帝将他们的语言打乱，这样他们就不能听懂对方说什么了，还把他们分散到了世界各地，这座城市也停止了修建。这座城市就被称为巴别城，这座塔即是巴别塔。

可以将 Babel 看做语言的统一。Babel 的作者将其取名为 Babel，是有相当一部分野心的。他是想将目前不同的 JS 语言规范，统一成一种，实现不同浏览器下的兼容。

截止到目前，babel 也有过很多次更新了。该文主要将以 babel@7.0 版本来理解 babel 的使用。

Babel做什么？

常用的功能有3种：

1. 语法转换。譬如将 es6 的箭头函数转换为低版本浏览器兼容的普通函数。
2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)。
3. 源码转换。譬如转换 typescript、jsx等。

了解步骤

下面我们会从 CLI 、 plugins 、presets 以及 polyfill 等一步步来了解babel的用法。

准备工作

• 新建目录。
• 执行 yarn init -y。
• 创建 src目录。
• 在 src 下创建入口文件 main.js。

main.js 文件的内容如下：

// 1.arrow function
const arrowFun = () => {
  console.log('arrow-function', this)
}

// 2.class
class Person {
  constructor() {
    this.name = name
  }
  say() {
    alert('hello')
  }
}

// 3.promise es6新增
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() * 10 >= 5) {
      resolve('大于5')
    } else {
      reject('小于5')
    }
  }, 2000)
})

// 4.async await es7
async function fn() {
  try {
    const result = await promise
    console.log(result)
  } catch(err) {
    console.warn('error', err)
  }
  console.log('--- after promise ---')
}

fn()

// 5.includes
const flag = [1, 2, 3].includes(1)
console.log('includes', flag)

之所以创建这些例子，是有原因的。当前目录结果大致如下：

.
├── package.json
├── src
│   └── main.js
└── yarn.lock

下文的讲述都是基于该项目。