babel教程

Babel是什么？

Babel是一个工具集，主要用于将ES6版本的JavaScript代码转为ES5等向后兼容的JS代码，从而可以运行在低版本浏览器或其它环境中。

因此，你完全可以在工作中使用ES6编写程序，最后使用Babel将代码转为ES5的代码，这样就不用担心所在环境是否支持了。下面是一个示例：

转换前，代码里使用ES6箭头函数

varfn=(num)=>num+2;

转换后，箭头函数变成ES5的普通函数。这样就可以在不支持箭头函数的浏览器里运行了

varfn=functionfn(num){returnnum+2;}

Babel就是做了上面这件事情，接下来我们从最简单的例子学习。

注:1.本教程里ES6是ECMAScript 2015及以后的版本的统称；

2.本教程里编译与转码是一个意思，不严格区分其学术定义；

3.使用Babel进行ES6转ES5时，转化之后默认是严格模式。在不影响阅读的情况下，本教程部分章节会省略严格模式的声明”use strict”。另外，如果想去除严格模式，可以通过插件来实现；

一、Babel的安装，配置与转码

Babel依赖Node.js，没有安装的话，去官网下载安装最新稳定版本的Node.js。

在本地新建一个文件夹babel01，在该文件夹下新建一个js文件，文件命名为babel.config.js。该文件是 Babel配置文件 ，我们在该文件里输入如下内容：

module.exports={presets:["@babel/env"],plugins:[]}

然后在该文件夹下新建一个js文件main.js，该js里的代码是我们需要转译的，我们写入代码

varfn=(num)=>num+2;

然后执行下面的命令安装三个npm包，这些npm包是Babel官方包

// npm一次性安装多个包，包名之间用空格隔开
  npm install --save-dev @babel/cli @babel/core @babel/preset-env

安装完成后，执行下面的命令进行转码，该命令含义是把main.js转码生成compiled.js文件

npx babel main.js -o compiled.js

此时文件夹下会生成compiled.js，该文件是转换后的代码：

"use strict";varfn=functionfn(num){returnnum+2;};

这就是一个最简单的Babel使用过程，我们把用ES6编写main.js转换成了ES5的compiled.js。

二、Babel转码说明

babel.config.js是Babel执行时会默认在当前目录寻找的Babel配置文件。

除了babel.config.js，我们也可以选择用.babelrc或.babelrc.js这两种配置文件，还可以直接将配置参数写在package.json。它们的作用都是相同的，只需要选择其中一种。 我们将在另外一节详细介绍Babel的配置文件，接下来默认使用babel.config.js。

@babel/cli，@babel/core与@babel/preset-env是Babel官方的三个包，它们的作用如下：

@babel/cli是Babel命令行转码工具，如果我们使用命令行进行Babel转码就需要安装它。

@babel/cli依赖@babel/core，因此也需要安装@babel/core这个Babel核心npm包。

@babel/preset-env这个npm包提供了ES6转换ES5的语法转换规则，我们在Babel配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码仍然是ES6的，相当于没有转码。 这些工具后续都会有单独的章节说明，现在先学会简单使用即可。

小结1.一个完整的Babel转码工程通常包括如下：

Babel配置文件

Babel相关的npm包

需要转码的JS文件 2.我们通过以下命令对单个JS文件进行转码：

npx babel main.js -o compiled.js

注:1.如果安装npm包慢的话，通过以下命令设置npm镜像源为淘宝npm后再安装

npm config set registry https://registry.npm.taobao.org

2.npx babel main.js -o compiled.js命令里npx是新版Node里附带的命令。它运行的时候默认会找到node_modules/.bin/下的路径执行。分别与下面的命令等效。

linux/unix命令行：

node_modules/.bin/babel main.js -o compiled.js

windows的cmd命令行(假设babel01在D:\myfile\路径下):

D:\myfile\babel01\node_modules\.bin\babel main.js -o compiled.js

三、引入polyfill

总体来说，Babel的主要工作有两部分：

语法转换

补齐API

上一节我们讲的是其实是用Babel进行语法转换，把ES6的箭头函数语法转换成了ES5的函数定义语法。 箭头函数语法、async函数语法、class定义类语法和解构赋值等等都是ES6新增的语法。

那什么是补齐API？ 简单解释就是，通过 Polyfill 的方式在目标环境中添加缺失的特性 。

我们按照上一节的操作对var promise = Promise.resolve('ok')进行转换，会发现转换后的代码并没有改变，过程如下。

我们新建babel02文件夹，新建babel配置文件 babel.config.js ,内容如下

module.exports={presets:["@babel/env"],plugins:[]}

新建main.js文件，内容如下

varfn=(num)=>num+2;varpromise=Promise.resolve('ok')

然后执行下面的命令安装三个npm包

// npm一次性安装多个包，包名之间用空格隔开
  npm install --save-dev @babel/cli @babel/core @babel/preset-env

然后执行命令

npx babel main.js -o compiled.js

整个过程与上一节基本一样，只是main.js里的代码多了一行

varpromise=Promise.resolve('ok')

此时文件夹下会生成新的compiled.js，代码如下：

"use strict";
varfn=functionfn(num){returnnum+2;};
varpromise=Promise.resolve('ok');

我们观察转换后生成的compiled.js代码，发现Babel并没有对ES6的Promise进行转换 。

我们通过一个index.html文件引用转码后的 compiled.js ，在比较老的浏览器（ 例如火狐27 ）里打开HTML文件后后控制台报错：Promise is not defined。

为何 Babel没有对ES6的Promise进行转换 ？

因为Babel默认只转换新的JavaScript语法（syntax），而不转换新的 API。

新的API分类两类，一类是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法，例如Object.assign，Promise.resolve；另一类是新的实例方法，例如数组实例方法[1, 4, -5, 10].find((item) => item < 0)

如果想让ES6新的API在低版本浏览器正常运行，我们就不能只做语法转换。

在前端web工程里，最常规的做法是使用polyfill，为当前环境提供一个垫片。所谓垫片，是指垫平不同浏览器之间差异的东西。polyfill提供了全局的ES6对象以及通过修改原型链Array.prototype等实现对实例的实现。

polyfill广义上讲是为环境提供不支持的特性的一类文件或库，狭义上讲是polyfill.js文件以及@babel/polyfill这个npm包。

我们可以直接在html文件引入polyfill.js文件来作为全局环境垫片， polyfill.js 有Babel官方的 polyfill.js，也有第三方的。我们引入一个Babel官方已经构建好的polyfill脚本。

简单起见，我们通过在html里引入polyfill.js的方式。

<scriptsrc="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.js"></script>

我们在IE9打开验证，也可以用Firefox27等低版本的浏览器验证。这个时候发现可以正常运行了。

补齐API的方式除了通过引入 polyfill.js 文件 ，还有通过在构建工具入口文件（例如webapck），babel配置文件等方式进行。本节讲的通过在HTML里直接引入 polyfill.js 文件 这种方式进行在现代前端工程里逐渐淘汰，很少使用了。但这种方式对初学者理解 polyfill 是做什么的是简单直接的。后续章节我们会学习到其它补齐API的方式。

小结:本节讲了通过 polyfill.js 文件来补齐代码运行时环境所缺失的API。

通过上一节讲的语法转换和本节讲的补齐API，就可以使一个使用ES6编写项目完整运行了不支持ES6语言的环境上了。

注:1.可以在 https://ftp.mozilla.org/pub/firefox/releases/27.0.1/ 页面下载对应操作系统的火狐27，如果长期使用该版本注意设置成不要自动更新，windows的话，左上角Firefox-选项-高级-更新里设置。

2.什么是API？初学编程的人看了百度百科这一类高大上的解释会很迷惑。我们举个简单例子来解释：JS里的数组有排序方法sort()，这个就是JS语言制定者给数组制定的API。引申一下，你使用了别人已经写好的对象、类、函数或方法，那就是使用了API。

那ES6有哪些新的API呢？Promise对象，数组的Array.from()与Array.of()方法，数组实例的展平方法flat()，Object.assign()方法等等。只要是新的对象名、类名、函数名或方法名，就是ES6的新API。

四、关于Babel版本

目前，前端开发领域使用的Babel版本主要的Babel6和Babel7这两个版本。

你可能想问，怎么查看使用的Babel是哪个版本？

在入门章节，我们讲过Babel是一个工具集，而这个工具集是围绕@babel/core这个核心npm包构成的。每次@babel/core发布新版本的时候，整个工具集的其它npm包也都会跟着升级到与@babel/core相同的版本号，即使它们的代码可能一行都没有改变。

因此，我们提到Babel版本的时候，通常是指@babel/core这个Babel核心包的版本。

在一次次版本变更的过程中，很多Babel工具以及npm包等都发生了变化，导致其配置文件有各种各样的写法。同时，很多Babel相关的文章没有注意到版本的问题，这给学习者也造成了很大的困惑。

web前端开发有必要了解这两个版本的变化。

Babel7的npm包都是放在babel域下的，即在安装npm包的时候，我们是安装@babel/这种方式，例如@babel/cli、@babel/core等。而在Babel6，我们安装的包名是babel-cli，babel-core等。其实它们本质是一样的，都是Babel官方的cli命令行工具和core核心包。在平时开发和学习的过程中，碰到'@babel/'和'babel-'应该下意识认识到他俩是一个包，只是版本不一样而已。

对于这两个版本更细微的变化，都会再接下来的各小节里讲到。

五、Babel配置文件

一、配置文件

在前面几小节，我们已经简单使用过Babel的配置文件了。现在我们来深入学习它。

无论是通过命令行工具babel-cli来进行编译，还是webpack这类的构建工具，通常情况下，我们都需要建立一个Babel配置文件来指定编译的规则。

Babel的配置文件是Babel执行时默认会在当前目录寻找的文件，主要有.babelrc，.babelrc.js，babel.config.js和package.json。它们的配置项都是相同，作用也是一样的，只需要选择其中一种。

对于.babelrc，它的配置是这样子

{"presets":["es2015","react"],"plugins":["transform-decorators-legacy","transform-class-properties"]}

对于babel.config.js和.babelrc.js，它的配置是一样的，通过module.exports输出配置项

module.exports={"presets":["es2015","react"],"plugins":["transform-decorators-legacy","transform-class-properties"]}

对于package.json，就是在package.json中增加一个babel属性和值，它的配置是这样子

{"name":"demo","version":"1.0.0","description":"","main":"index.js","scripts":{"test":