我眼中的BabelJS

我眼中的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主要有两个功能。

1. 源码转换：将ES2015+的代码转换为旧版本的JS代码（例如ES5，现在大部分浏览器对ES5的支持比较好）。
2. 预填充功能：利用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开发的问题，为开发者节省了大量的时间。

感谢阅读，如果你有任何问题，可以在下方留言，也可以去我的网站逛逛，我会不定期更新一些技术知识。