前几天遇到一个用户反馈说页面打不开的问题，而且还是其中两个页面，其他的都没有问题，于是就要来了账号自己登陆一下看看是哪里报错。奇怪的是我们登陆都好好的啊～～ 这时候用户发来了报错信息：
babel0.png
一想这应该是浏览器兼容问题了，不识别es新的API，于是下载了低版本的Chrome浏览器打开果然报错。
简介
我们知道babel是转译es的，究竟babel哪里没配置对呢？让我们来捋一捋babel
Babel is a JavaScript compiler。这是Babel官网上的简单介绍，就是“Babel是一个JavaScript转译器”，这里有的翻译为编译器，有的翻译为转译器，我觉得转译器比较贴切，因为经过Babel转译后还是JS语言。
我们知道，JS的发展非常迅速，新的语法/特性等层出不穷。但是浏览器的发展速度跟不上JS的发展，新的特性不能及时普及，在得到广泛普及之前，Babel能够让我们提前使用它们。它可以把 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。不过Babel只转译新的语法，JS新增的API和全局对象并不支持。
我们写个简单的例子直观的看一下Babel：
babel1.png
目录就是这样的，我们在package.json的scriptes中添加一条命令，用来转译我们的文件。
如果我们什么都没有配置，Babel并不会起作用，而是会原样输出代码。现在，我们在没有配置Babel的情况下执行命令看一下输出
原文件：
babel2.png
转译之后：
babel3.png
我们发现前后并没有变化
要想Babel起作用，就得告诉他要做什么。自然，我们就得要配置插件啦。
babel转译器
- plugins
用来转译单一功能的插件，像是transform-es2015-classes，就只转译class类。且如果插件以babel-plugin-开头，则可以省略该前缀。
{
"plugins": [
"myPlugin", // 等价于
"babel-plugin-myPlugin"
]
}
- presets
转译器，一组插件的集合。人都是有惰性的，让我们一个个地配置plugin岂不是很烦，presets就是帮我们解决这个烦恼的。babel提供了如下的一些preset：
- es2015
- es2016
- es2017
- env
es20xx的preset只转译该年份批准的标准，而env则代指最新的标准，包括了latest和es20xx各年份
了解了plugins和presets之后，我们就来配置一下Babel吧。我们的例子是用了es6的class类，转译class类的插件就是transform-es2015-classes
babel5.png
现在再执行一下命令：
babel6.jpg
可以看到代码已经被编译了。
如果我们又用到了箭头函数，就要在Babel配置的plugins里面再添加transform-es2015-arrow-functions插件。一个一个配置太繁琐，这时候presets就登场了。
babel7.png
执行命令之后：
babel8.png
可以看到不论是class还是箭头函数都被转译了。
我们看上面转译class的代码，是定义了两个函数_createClass和_classCallCheck，那如果我们在多个文件中都用到了class，岂不是要定义很多遍？现在我们在index.js文件里面也定义一个class，执行命令看一下结果：
image.png
果然跟我们想的一样，那这样不是产生了很多冗余吗？？不用担心，我们还有transform-runtime
babel9.png
再执行命令：
babel10.png
可以看到是从babel-runtime引入辅助函数，而不是定义了，这就避免了冗余代码。
babel-runtime是把我们开发中依赖的全局内置函数等提取到公共模块中，在转译代码的时候通过导入模块引入，避免了污染全局作用域。为什么说可以避免污染全局作用域呢？假如我们全局引入了babel-polyfill，我们在项目中由于某种原因自定义了Array.from()方法，那么babel-polyfill中的Array.from()方法就跟我们自定义的产生了冲突。babel-runtime就没有这个问题。
babel-plugin-transform-runtime 插件做了如下事情：
- core-js：自动导入babel-runtime/core-js，并将全局静态方法、全局内置对象等映射到对应的模块。
- helper：将内联的工具函数移除，改成通过babel-runtime/helpers模块进行导入，比如_classCallCheck工具函数。
- regenerator：使用 async/generator 函数时自动导入 babel-runtime/regenerator模块。
可以通过配置来控制开关
{
"plugins": [
["transform-runtime", {
"corejs": false,
"helpers": true,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
}
有了transform-runtime怎么还需要babel-polyfill呢？看看官方怎么说的：
NOTE: Instance methods such as "foobar".includes("foo") will not work since that would require modification of existing built-ins (Use babel-polyfill for that).
因为transform-runtime不污染全局变量，所以实例方法无法使用，还得引入babel-polyfill，这就是文章开头说的为什么报错的原因。我们在项目的入口文件加上
import 'babel-polyfill'
就可以正常工作了。
网友评论