我眼中的BabelJS
虽然我去年才正式转前端工作,但是接触前端算是比较早的,早在2013年就在学校学习了HTML、CSS和JS。那时候对编程还不够熟练,只能利用html、css、js文件完成一些比较简单的页面。那时候的前端不像现在这么火,所以学校的教学重心也不在前端上面。
一.问题
随着前端的发展,web开发者在处理JavaScript时都面临一个难题。因为各个浏览器对ECMAScript标准的实现不统一。导致开发者在写代码的时候,必须确保他们的代码(例如一些Dom API)可以在各个主流浏览器中运行。
二.解决问题
有问题,肯定会出现一大堆解决问题的方法。
预填充
其中一个方法,就是预填充(Polyfill)。预填充就是扩充API的一段代码,如果某个浏览器,不支持某个新的JS语法,那么预填充就会为这个浏览器环境提供等价的API,这样可以保证JS代码在浏览器中正常运行。使用预填充功能,你不用关心一些旧的浏览器是否支持新的js语法。
目前Babel也支持预填充功能,可以通过安装@babel/polyfill,启用预填充功能。
jQuery
另一种方式就是使用jQuery。使用jQuery中的API作为开发工具,你也不需要关心浏览器的兼容问题,只需要在开发时引入jQuery包,使用它提供的API就可以。所以在很长一段时间内,jQuery都非常的流行,很遗憾现在用jQuery的人越来越少了。
三.JavaScript时代的来临
2014年HTML5面世了,2015年ES6(ES2015)也发布了,ES6更新了大量的JS语法,也正是这次更新,世界才掀起了一场前端风暴。越来越多的程序员开始重新认识JavaScript。同时随着ES6的发布,jQuery也慢慢被人抛弃,因为很多API在ES6都内置了,jQuery越来越显得多余臃肿了。
虽然JS更新的很快,但是各大浏览器对新语法的支持还是没有统一,问题依然存在。这个时候JavaScript编译器(我更倾向于称它们为JavaScript语法转换器,因为JS并不需要编译)出现了。BabelJS就是其中的一个,也是接下来我要介绍的。
四.BabelJS
通过阅读BabelJS的官方文档,我认为BabelJS主要有两个功能。
- 源码转换:将ES2015+的代码转换为旧版本的JS代码(例如ES5,现在大部分浏览器对ES5的支持比较好)。
- 预填充功能:利用Babel可以很方便的使用预填充功能,将预填充代码插入到源码中,你可以指定预填充在哪些浏览器环境启用。
通过以上两个功能,BabelJS很好的解决了之前浏览器对新语法支持程度不统一的问题。
在BabelJS的配置文件中(.babelrc、babel.config.json或者package.json),你应该经常能看到plugins和preset模块。
-
plugins: BabelJS通过pulgins转换源代码。
-
presets: 你可以认为presets是一些特定的plugins集合。例如@babel/preset-env。
我根据官方文档写了个BabelJS入门教程,有兴趣的可以看一看。
五.总结
我认为BabelJS是推动JS发展的一大原因,有了BabelJS,开发者可以放肆的使用JS新语法,不用考虑复杂多变的浏览器环境,排除了很多web开发的问题,为开发者节省了大量的时间。
感谢阅读,如果你有任何问题,可以在下方留言,也可以去我的网站逛逛,我会不定期更新一些技术知识。