那些年babel踩过的坑

Posted by 畅通 on July 4, 2018

本期内容:babel

最近项目上需要对项目进行IE的适配,纳尼????? 已经习惯了ES6的写法,简洁,迅速,高效,但是无奈于项目上的需求,还是做了...

HTML5对ES6语法的支持

HTML5仅支持部分的ES6语法,详情请见http://html5test.com/,有兴趣的同学可以去了解一下。

如何解决浏览器对语法的适配

最简单的且有效的方式当然是:重写(OMG,内心OS:一万只草泥马呼啸而过)。 以上仅仅是玩笑,当然选择的方法有很多,本文主要介绍的是BABEL(看了阮一峰老师的blog较多)。

babel是什么

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。

官方网站:https://babeljs.io/

官方给出的解释为:Babel is a JavaScript compiler. Use next generation JavaScript, today.(babel是一个JavaScript编译器,现在可以使用下一代标准的javascript)

github的页面:https://github.com/babel/babel,详细使用可以参考该页面,本文的使用为非常菜逼的html引入方式

引入的内容

各个方式的安装方法参考https://babeljs.io/en/setup.html

本文中使用的cdn地址为:https://unpkg.com/babel-standalone@6/babel.min.js">

如何使用

在script标签内加入type="text/babel"即可,是不是很简单??(宝宝心里苦啊)

遇到的问题

在使用的过程中,遇到了很多晦涩的问题,看上去难以解决,实际源自于自己的无知,对babel不甚了解。 其实Babel只能将部分的ES6语法转义成功,更多的API需要通过其他JS共同完成

babel对ES6语法的解析情况

ES6特性 兼容性
箭头函数 支持
类的声明和继承 部分支持,IE8不支持
增强的对象字面量 支持
字符串模板 支持
解构 支持
参数默认值,不定参数,拓展参数 支持
let与const 支持
for of IE == GG
iterator, generator 不支持
模块 module、Proxies、Symbol <不支持

查看更多关于对语法的支持参考:https://www.cnblogs.com/chris-oil/p/5931180.html

tips:Array.from == gg,未对变量进行定义==gg(含泪写完)

以上为踩过的坑和使用关键点,欢迎大家使用