Babel 认识与使用

距ES6的第一个版本——ECMAScript 6.0(《ECMAScript 2015 标准》简称 ES2015),正式发布已有三年之久,其所带来的语法糖一来弥补了语言本身的不足,二来给开发者更加舒适的开发体验,得到了开发者的一致认同,同时被广泛运用在如今的各个复杂前端应用中。但是不可回避的历史问题,使得 JavaScript (以下简称JS)运行时环境并不能很好的支持 ES6 所带来的新特性、新语法。好在 Babel 的出现改变了这一尴尬的境地。

JS 作为解释型语言,其运行依赖 Node.js 和浏览器两大主流运行时环境。今天的 Node 原生支持大部分 ES6 特性,故而可以直接运行 ES6 代码。而对于浏览器而言,其兼容性不容乐观。

[ https://kangax.github.io/compat-table/es6 ]

Babel(The compiler for writing next generation JavaScript)正是下一代(JS 语言的下一个版本就是指代ES6)JS语言的编译器。它能够将开发者书写的下一代 JS 代码编译成目标运行环境支持的版本实现。例如:

//ES6 箭头函数与 const 常量定义

constadd=(a,b)=>{

returna+b ;}

//转换后变成浏览器兼容的语法

varadd=function(a,b) {

returna+b;}

所以,一言以蔽之,Babel 是一个语法转换器,在指定的转换规则下,给定一个代码输入,得到一个向后兼容的目标输出。

认识了什么是 Babel ,以及 Babel 解决了什么问题之后。接下来就是解决作为工具,它该如何使用的问题。无论是babel-cli 的terminal 命令行转码还是引用核心库 babel-core 模块并借助其 API 编译转码,阮一峰老师的《Babel 入门教程》一文中有者详尽的示例与解释,此处不做赘述。此处我们应着力要搞清楚的是里面提及的概念及其彼此之间的关系如何。

首先,无论何种使用方式,babel-core 基础核心功能库是一定要有的,无需多言。毕竟没有了发动机,劳斯莱斯也只是一个空壳而已。

有了发动机,还要有变速器。Babel 需要知道使用者想要如何转换代码,以达到其预期效果。因此,用户需要指定转换规则,这样,Babel在运行时,才会把源代码中符合规则的部分根据规则进行转换,这也就是 Babel Plugins 的作用。例如。转换上述 add 函数示例中使用到的箭头函数。如果是命令行模式,需要如下指定plugins 参数:

babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

而如果通过 .babelrc 配置文件的方式使用,则需要如下指定plugins 参数:

{

"plugins": [

"@babel/plugin-transform-arrow-functions"]}

然而,ES6 提供了诸如 classes 、block-scoping、template-literals 等等诸多新语法。如果沿用此模式,配置文件会很长很长且难以维护,更重要的是每一个开发者都在 Repeat Yourself ,这显然是不合理的。于是 Babel 官方把一系列相关的 Plugin 组合在一起形成了一个插件集合,这便是 preset。preset 顾名思义,就是一组预设。只是,更详细的展开说它是 Babel 转换规则的集合预设,以方便开发者的快速使用。而官方推荐使用的预设便是env 预设,同时预设提供了,可供开发者对其进行个性化设置方式(https://babeljs.io/docs/en/next/babel-preset-env)。既然是预设,由此以来,每一个人都可以个性化定制自己的 plugin。

至此,Babel 问题已经解决了一半——新语法问题。还剩下的便是 Babel 默认不会进行转换的如Generator、Proxy、Symbol、Promise等新的全局对象,以及全局对象上新的如Object.assign、String.includes静态方法。 Babel 的 babel-polyfill 正是用于实现浏览器并不支持的原生API的代码。美中不足的是,polyfill 会引入许多无用的内容,使得代码体积变大。好在提供了 useBuiltIns 选项,当其值为 usage 时 Babel 会自动根据目标环境,检查代码,然后补齐缺失的实现。真正做到了,简单配置,按需引用。

所以,学习新的东西,开始可以浏览一些互联网上其他同学二次消化的内容。但是往往会出现概念不清晰,逻辑不连贯的问题。导致理解上的偏差与障碍。最终,一定是要回到官方文档,即便是英文的。慢慢看,效果仍然是远远胜过其他文章。

参考文章:

(1)阮一峰《Babel 入门教程》

(2)尚学堂明辉《前端“黑话”polyfill》

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180715G13MR200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券