Babel初步认识

Babel初步认识

BabelJS 是一个 JavaScript 转译器,它将新功能转译成旧标准。有了这个,这些功能可以在新旧浏览器上自在运行。Babeljs 以插件、预设、polyfill 等形式提供了广泛的功能。

简而言之,Babeljs 是一个工具集,其中包含所有可用的工具,它可以帮助开发人员使用 ECMA Script 中可用的所有当前功能,而不必担心浏览器将如何支持它。

首先,我们需要理解的是为什么会出现Babel,以及Babel解决了什么问题?

我们知道,现代浏览器上的标准开发语言毫无疑问就是javascript,而js又是一门不断发展变化的语言,这门语言的标准不断的更新完善,但是实现这些标准的浏览器厂商在实现这些标准的进度上有的快有的慢,不一定能那么及时的支持新的标准。但是总的来说,大部门浏览器都支持es2015。因此Babel为了解决大部门浏览器的兼容性问题,所以开发了Babel相关的工具来将新的js标准代码转化为es2015的代码,这样代码就能更好的在各种不同的浏览器上运行。

 

Babel是怎么解决这个问题的呢?

这里我们还是来说说具体的情况,用例子来说明能很好的理解Babel各个功能的作用,首先,我们知道在新版的js标准中有箭头函数这个语法:

const fn = ()=> {
 	return 1024;
}

我们思考一下,如果你要将这个箭头函数转化成几乎大部分浏览器都可以执行的代码,应该怎么做呢?是不是应该想办法转化成es2015可以运行的函数:

var fn = function() {
	return 1024;
}

Babel在这里就是采用的预设的方式,将箭头函数转为成es2015对应的函数。具体的实现可以看源代码,这里我们只需要知道为什么会有Babel的预设这个功能就好了

再来看看下一个例子:

在es6中我们有一个新的语法叫做Promise,这个是为了解决我们的回调函数层次太多而提供的API,Babel怎么才能让这个功能在大部分浏览器上运行呢?

显然,es2015没有这个功能,如果我们自己来实现的话,那就是提供一个这样的功能,然后将这个功能绑定到浏览器的全局对象不就OK了吗?这个叫做啥?是不是应该叫做polyfill。用中文来解释就是你没有这个功能,我给你提供一个。理解了这个就容易理解为什么Babel中有很多polyfill。这个的好处是让老的浏览器也能用新的标准实现,不好的地方就是让老的浏览器的代码不那么好看。

 

最后一个例子我们再谈谈为啥会有插件?

我们知道插件的主要作用是增强功能,比如babel本身并不支持jsx语法的处理,我能否通过插件的机制将jsx语法转化成浏览器能够认识的语法呢?这其实也是一种转化,Babel是一个转化的工具,如果猜测没有错误的话,那么Babel转化jsx很有可能就是通过插件来实现的。

有了以上的分析和猜测,我想大家对babel的主要作用应该有可一定的认识,以后在使用的时候基于以上认知去选择的时候,往往能够大家提供指路的作用。

版权声明:著作权归作者所有。

相关推荐

[译]Java 9:一步步迁移项目到Jigsaw(模块化)

Java 9出来了。 我们来试试一个简单的Spring项目。 为了使练习更具挑战性,我们还要尝试使用新的模块系统。 该项目只是一个使用Spring,JDBC和Shedlock的简单示例。1、阅读所有可用的文档和规格说明。 嗯,听起来很无聊。 跳过第一步。2、下载JDK并尝试运行该项目。 我们很幸运,我们所有的依赖只使用公共Jav

使用ANDROID_ID唯一标识Android设备

使用Settings.Secure#ANDROID_ID 会返回每个用户唯一的64位hex字符串,它是在设备首次boot时生成。我们可以使用它来唯一标识Android设备。import android.provider.Settings.Secure; private String android_id = Secure.getStri

初识parcel

webpack是一个很好的web应用打包工具,但是使用webpack需要很多繁琐的配置。parcel则提供了一个零配置的方案,大大简化了使用web应用的工具的难度。Parcel特性Parcel有以下一些特性:1、相比于Webpack, Rollup以及Browserify,Parcel打包时间极快这是Parcel做的一个基准测试,基于一个合理大小的应用,包含1726个模块, 6

nginx配置Basic认证

最近在搭建kibana时,发现kibana是没有提供认证功能,所以想到给它加一个认证,最简单的就是basic auth认证。下面记录下nginx配置basic认证的过程。添加Basic Auth认证需要先创建密码文件,这里使用htpasswd。如果没有找到htpasswd命令,可以先安装httpd-tools。安装httpd-toolsyum install 

Github同步更新fork仓库命令

克隆fork仓库到本地git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git添加源仓库的远程主机cd fork-repogit remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.gitgit fetch upstream从源仓

Sonar Java默认的扫描规则

规则如下:".equals()" should not be used to test the values of "Atomic" classes:equals()方法不应该用在原子类型的数据上(如:AtomicInteger, AtomicLong, AtomicBoolean)."=+" should not be used instead of "+=":"=+"不可以替代 “+=”."=

Tomcat 8.5新安装环境初步配置优化

下载安装Tomcatwget http://mirrors.hust.edu.cn/apache/tomcat/tomcat-8/v8.5.37/bin/apache-tomcat-8.5.37.tar.gztar zxf apache-tomcat-8.5.37.tar.gz -C /usr/localmv /usr/local/apache-tomcat-8.5.37 /usr/local/t