面试题45：babel是什么，有什么作用？

babel是什么，有什么作用？

babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台

引入

在此之前或许你已经用过babel，也许听说过什么 babel-loader babel-core、babel-cli、babel-plugin-…、babel-preset-env
反正各种乱七八糟的做项目随便用一一下就可以了，对他只有个一知半解，甚至不知道他到底是干什么的，反正项目要用，照着用就行了，至少博主之前的状态是这样，如果只对他有个一知半解甚至都不了解，那么项目出bug了你都不知道怎么去调试，只能复制–>粘贴–>百度。
基于此，写下自己对Babel的理解。

Babel是什么？

我们在他的官方网站找到这样一句话

Babel is a JavaScript compiler
Babel 是一个 JavaScript 编译器

Babel是一个编译器，针对JavaScript，为什么会有Babel这样一个工具的存在？

本文默认你对es6、es7等有所涉足，我们在写es6+语法的时候是不是很方便，什么promise、async await`，可是es6+语法写的虽然很酸爽，但是浏览器他不兼容啊，你想想你写的代码在浏览器上跑不起来，在好的语法在好的特性又有什么用？

这个时候Babel这样一个工具出来了，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写酸爽的语法，又可以让使浏览器兼容。
相信到这你已经知道了Babel的概念，并且可以脑补出Babel可以干什么。

下面介绍Babel的使用和一些细节

Babel 的使用

    单体文件
    命令行
    配合Webpack使用

本文将介绍Babel配合webpack使用的情况

配置文件
babel的配置文件有几种，.babelrc，babel.config.json
配置方法都一样，本文以.babelrc配置文件为主

在初次接触Babel我们只要用到一下两项配置

//.babelrc
{
  "presets": [...],
  "plugins": [...]
}

下面介绍presets与plugins

Plugins

Plugins顾名思义插件。
babel 本身不具有任何转化功能，我们要的代码要转换某些功能，比如将es6转换为es5，我们就需要下载相应的插件，并且将这些插件配置到.babelrc文件的plguins里面。

比如将箭头函数转换为浏览器能识别的普通函数
我们就需要用到 @babel/plugin-transform-arrow-functions插件，并将其添加到配置文件
1.首先下载插件 npm i @babel/plugin-transform-arrow-functions -D
2.添加至配置文件

//.babelrc
{
    "plugins":[
		  "@babel/plugin-transform-arrow-functions"
		]
}

这样babel就能够将箭头函数转换为普通函数了

//转换前
var a = () => {};
//转换后
var a = function () {};

Presets

Presets顾名思义预设。
我们要转换一些语法就得使用各种插件，并且添加到配置文件，如果每次项目需要的babel插件都差不多，而我们每次都要进行重复的下载，配置工作，这样效率是不是很低，很繁琐。
这个时候我们就可以利用presets这个功能，将一些常用的babel插件，配置放入预设中，下载直接将这个预设放入配置文件即可

比如项目中经常要使用到 @babel/plugin-transform-arrow-functions和@babel/plugin-transform-for-of插件，那么我们可以将这两个插件设为预设 具体操作参照文档

将其设为预设后。

下次在.babelrc文件配置即可，如假设预设为 myPreset，那么在配置文件

//.babelrc
{
    "presets":["myPreset"	]
}

当然除了我们自定义预设，我们还可以使用别人定义好的一些预设，如你经常看到的
@babel/preset-env、@babel/preset-react

使用方法
1.下载preset npm i @babel/preset-env
2.配置文件

//.babelrc
{
    "presets":["preset-env"	]
}

Polyfill

Plolyfill 垫片。
babel默认只转换新的 JavaScript 语法，比如箭头函数、扩展运算（spread）。
不转换新的 API，例如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，则需要为当前环境提供一个垫片（polyfill）。
Polyfill主要有三种
@babel/polyfill

Babel 包含一个polyfill 库即@babel/polyfill。这个库里包含 regenerator 和 core-js。