什么是Babel?

在这里插入图片描述
传说古时候一群人想建一个通天塔,去天上看看上帝在干什么。上帝于是挥挥手,让这群人说不同的语言,于是他们再也不能顺畅沟通,塔也就建不起来了。
在JavaScript中,不同版本的浏览器对JavaScript的版本各有要求,而Babel的出现是的开发者几乎不用考虑浏览器的支持情况,尽情享受最新语法的舒适。

Babel is a JavaScript compiler.

Babel是一个编译器,能将ES2015+的代码转换正ES2015。

在这里插入图片描述

Babel is a compiler

如上图,左侧的ES6结构语法转换成ES5的按照下标取数组元素。
Babel做了什么?
在这里插入图片描述

image.png

解析 (Parsing)
通过词法分析和语法分析,将JavaScript源代码转换成抽象语法树。
转换 (transforming)
对语法树(ast)进行转换操作,把ES2015+的部分转换为ES5。
再建 (generation)
将转换之后的语法树重新生成代码。
插件机制

Now, out of the box Babel doesn’t do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again. You will need to add plugins for Babel to do anything.
来源: 官方文档 plugin

按照 解析-> 转换 -> 再建的步骤,ES2015+怎么就转换成了ES2015呢?这依赖于在babel在转换阶段做的手脚,而如何转换需要我们配置一系列转换的插件。

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

但是我们往往不用手动去配置plugin,因为维护一大堆plugin十分困难,试想我们准备使用所有的ES6语法。
preset是一堆plugin的简写
还记得我们怎么配置babel的吗?

{
  preset: ['babel-preset-XXX']
}

如果我们指定presets为 babel-preset-env, 那么就默认包含了转换所有ES5+标准语法的plugin。
这里可以理解presets只是一个语法糖,帮我们做了维护插件集这件事情。
Babel做什么,不做什么
Babel只对不属于ES5的语法做了转换,如:

for-of
箭头函数
结构
块级作用域
let/const

但下面情况不作处理:

一些内置的全局变量,如:Promise、Symbol、Set、WeakMap
对一些Object新增的方法,如: Array.includes、Object.is
generactor 函数。

在这里插入图片描述

如图,babel不处理Promise

谁来处理上面的情况?
Babel-polyfill
为了能使用Promise、WeakMap等,我们可能需要考虑引入babel-polyfill了。它会检测运行环境是否支持Promise等,如果不支持,会创建全局的Promise等对象或者给Array等新增方法。
Babel-runtime
Babel-runtime也能起到几乎一样的作用,但它跟Babel-polyfill不同的是它不会污染全局作用域。它会提供一个module, 当使用Promise时,它会把这个module的某个对象导出给使用的地方。
所以如果需要考虑到对原型或者全局变量的污染,我们应该使用babel-runtime,比如说我们需要开发一个公共库开源出去。
Babel是万能的吗
官方总结了以下几种情况Babel会遇到问题:

Built-in classes such as Date, Array, DOM etc cannot be properly subclassed due to limitations in ES5
Inheriting from a class then static properties from it via proto which is not supported on IE <= 10
Getter/Setter( 8 and below)

Babel与jsx
如果你觉得jsx很高大上,那么了解了@babel/plugin-transform-react-jsx
就不会这么想了。
回想一下babel的定位: babel is a javascript compiler. 而babel使用了转换jsx语法的插件。
在这里插入图片描述

babel把jsx转换成js

拜拜 babel-preset-2015
2015表示使用2015年最新的语法,那么到了2016年,我们可能需要将babel-preset-2015改为babel-preset-2016来使用又新出的语法。
避免每年都要去更新年份,babel决定废弃这种用法,改为使用babel-preset-env, 这将默认将ES2015+的代码转换为ES2015版本的语法。
现在安装babel-preset-2015就会得到以下警告:
在这里插入图片描述

image

作者:浩神
链接:https://www.jianshu.com/p/0e6673a81fbd
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值