【JavaScript】深入理解Babel原理及其使用

2019-05-02 作者:计算机教程   |   浏览(58)

官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。

前言

半年前也写过一篇babel的简单使用文章,当时看了下babel的文档,但是很多地方还不理解,所以文章里没有怎么说道babel的一些关键概念,只是机械的描述如何使用(配合webstorm)。
最近刚好遇到一个问题,发现是因为js代码中使用的es6的新api没有被转义,导致抛异常了。查找了下资料,是没有引入polyfill所致,之前一直对babel的这些概念没有很好的理解,把这个bug作为引子,认真了解了下babel,写出此文。
本文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。

作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。

Babel的包构成

在升级到了Babel6.x版本之后,所有的插件都是可插拔的。这也意味着你安装了Babel之后,是不能工作的,需要配置对应的.babelrc文件才能发挥完整的作用。下面就对Babel的presets和plugins配置做一个简单解析。

核心包

  • babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
  • babylon:js的词法解析器
  • babel-traverse:用于对AST(抽象语法树,想了解的请自行查询编译原理)的遍历,主要给plugin用
  • babel-generator:根据AST生成代码

所有配置根据官方文档提供,更新时间:2016-12-05。

功能包

  • babel-types:用于检验、构建和改变AST树的节点
  • babel-template:辅助函数,用于从字符串形式的代码来构建AST树节点
  • babel-helpers:一系列预制的babel-template函数,用于提供给一些plugins使用
  • babel-code-frames:用于生成错误信息,打印出错误点源代码帧以及指出出错位置
  • babel-plugin-xxx:babel转译过程中使用到的插件,其中babel-plugin-transform-xxx是transform步骤使用的
  • babel-preset-xxx:transform阶段使用到的一系列的plugin
  • babel-polyfill:JS标准新增的原生对象和API的shim,实现上仅仅是core-js和regenerator-runtime两个包的封装
  • babel-runtime:功能类似babel-polyfill,一般用于library或plugin中,因为它不会污染全局作用域

预设(presets)

使用的时候需要安装对应的插件,对应babel-preset-xxx,例如下面的配置,需要npm install babel-preset-es2015

  • {
  • "presets": ["es2015"]
  • }

工具包

babel-cli:babel的命令行工具,通过命令行对js代码进行转译
babel-register:通过绑定node.js的require来自动转译require引用的js代码文件

env

  • {
  • "presets": ["env", options]
  • }

最近新增的一个选项,有以下options选择。

babel的配置

targets: { [string]: number },默认{}

需要支持的环境,可选例如:chrome, edge, firefox, safari, ie, ios, node,甚至可以制定版本,如node: 6.5。也使用node: current代表使用当前的版本。

使用形式

如果是以命令行方式使用babel,那么babel的设置就以命令行参数的形式带过去;
还可以在package.json里在babel字段添加设置;
但是建议还是使用一个单独的.babelrc文件,把babel的设置都放置在这里,所有babel API的options(除了回调函数之外)都能够支持,具体的options见babel的API options文档

browsers: Array | string,默认[]

浏览器列表,使用的是browserslist,可选例如:last 2 versions, > 5%。

常用options字段说明

  • env:指定在不同环境下使用的配置。比如production和development两个环境使用不同的配置,就可以通过这个字段来配置。env字段的从process.env.BABEL_ENV获取,如果BABEL_ENV不存在,则从process.env.NODE_ENV获取,如果NODE_ENV还是不存在,则取默认值"development"
  • plugins:要加载和使用的插件列表,插件名前的babel-plugin-可省略;plugin列表按从头到尾的顺序运行
  • presets:要加载和使用的preset列表,preset名前的babel-preset-可省略;presets列表的preset按从尾到头的逆序运行(为了兼容用户使用习惯)
  • 同时设置了presets和plugins,那么plugins的先运行;每个preset和plugin都可以再配置自己的option
loose: boolean,默认false

是否使用宽松模式,如果设置为true,plugins里的插件如果允许,都会采用宽松模式。

配置文件的查找

babel会从当前转译的文件所在目录下查找配置文件,如果没有找到,就顺着文档目录树一层层往上查找,一直到.babelrc文件存在或者带babel字段的package.json文件存在为止。

debug: boolean,默认false

编译是否会去掉console.log。

babel的工作原理

babel是一个转译器,感觉相对于编译器compiler,叫转译器transpiler更准确,因为它只是把同种语言的高版本规则翻译成低版本规则,而不像编译器那样,输出的是另一种更低级的语言代码。
但是和编译器类似,babel的转译过程也分为三个阶段:parsing、transforming、generating,以ES6代码转译为ES5代码为例,babel转译的具体过程如下:

ES6代码输入 ==》 babylon进行解析 ==》 得到AST
==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树
==》 用babel-generator通过AST树生成ES5代码

此外,还要注意很重要的一点就是,babel只是转译新标准引入的语法,比如ES6的箭头函数转译成ES5的函数;而新标准引入的新的原生对象,部分原生对象新增的原型方法,新增的API等(如Proxy、Set等),这些babel是不会转译的。需要用户自行引入polyfill来解决

whitelist: Array,默认[]

设置一直引入的plugins列表。

plugins

插件应用于babel的转译过程,尤其是第二个阶段transforming,如果这个阶段不使用任何插件,那么babel会原样输出代码。
我们主要关注transforming阶段使用的插件,因为transform插件会自动使用对应的词法插件,所以parsing阶段的插件不需要配置。

es2015/es2016/es2017/latest

  • {
  • "presets": ["es2015"]
  • }

presets

如果要自行配置转译过程中使用的各类插件,那太痛苦了,所以babel官方帮我们做了一些预设的插件集,称之为preset,这样我们只需要使用对应的preset就可以了。以JS标准为例,babel提供了如下的一些preset:

  • es2015
  • es2016
  • es2017
  • env
    es20xx的preset只转译该年份批准的标准,而env则代指最新的标准,包括了latest和es20xx各年份
    另外,还有 stage-0到stage-4的标准成形之前的各个阶段,这些都是实验版的preset,建议不要使用。
es2015

使用es2015的,也就是我们常说的es6的相关方法,简单翻译如下,更多细节可以参看文档

  • check-es2015-constants // 检验const常量是否被重新赋值
  • transform-es2015-arrow-functions // 编译箭头函数
  • transform-es2015-block-scoped-functions // 函数声明在作用域内
  • transform-es2015-block-scoping // 编译const和let
  • transform-es2015-classes // 编译class
  • transform-es2015-computed-properties // 编译计算对象属性
  • transform-es2015-destructuring // 编译解构赋值
  • transform-es2015-duplicate-keys // 编译对象中重复的key,其实是转换成计算对象属性
  • transform-es2015-for-of // 编译for...of
  • transform-es2015-function-name // 将function.name语义应用于所有的function
  • transform-es2015-literals // 编译整数(8进制/16进制)和unicode
  • transform-es2015-modules-commonjs // 将modules编译成commonjs
  • transform-es2015-object-super // 编译super
  • transform-es2015-parameters // 编译参数,包括默认参数,不定参数和解构参数
  • transform-es2015-shorthand-properties // 编译属性缩写
  • transform-es2015-spread // 编译展开运算符
  • transform-es2015-sticky-regex // 正则添加sticky属性
  • transform-es2015-template-literals // 编译模版字符串
  • transform-es2015-typeof-symbol // 编译Symbol类型
  • transform-es2015-unicode-regex // 正则添加unicode模式
  • transform-regenerator // 编译generator函数

总结:常用的都覆盖了,并不需要太关心内容,如果使用某些还不支持的语法导致报错,可以回头查一下支持的列表。

polyfill

polyfill是一个针对ES2015 环境的shim,实现上来说babel-polyfill包只是简单的把core-js和regenerator runtime包装了下,这两个包才是真正的实现代码所在(后文会详细介绍core-js)。
使用babel-polyfill会把ES2015 环境整体引入到你的代码环境中,让你的代码可以直接使用新标准所引入的新原生对象,新API等,一般来说单独的应用和页面都可以这样使用。

es2016

使用es2016的相关插件,也就是es7,更多细节可以参看文档www.2003.com,。

  • transform-exponentiation-operator // 编译幂运算符

使用方法

  1. 先安装包: npm install --save babel-polyfill
  2. 要确保在入口处导入polyfill,因为polyfill代码需要在所有其他代码前先被调用
    代码方式: import "babel-polyfill"
    webpack配置: module.exports = { entry: ["babel-polyfill", "./app/js"] };

如果只是需要引入部分新原生对象或API,那么可以按需引入,而不必导入全部的环境,具体见下文的core-js

es2017

使用es2017的相关插件,也就是es8?,更多细节可以参看文档

  • syntax-trailing-function-commas // function最后一个参数允许使用逗号
  • transform-async-to-generator // 把async函数转化成generator函数

runtime

latest

latest是一个特殊的presets,包括了es2015,es2016,es2017的插件(目前为止,以后有es2018也会包括进去)。

polyfill和runtime的区别

直接使用babel-polyfill对于应用或页面等环境在你控制之中的情况来说,并没有什么问题。但是对于在library中使用polyfill,就变得不可行了。因为library是供外部使用的,但外部的环境并不在library的可控范围,而polyfill是会污染原来的全局环境的(因为新的原生对象、API这些都直接由polyfill引入到全局环境)。这样就很容易会发生冲突,所以这个时候,babel-runtime就可以派上用场了。

react

react是一个比较特别的官方推荐的presets,大概是因为比较火吧。加入了flow,jsx等语法,具体可以看文档

transform-runtime和babel-runtime

babel-plugin-transform-runtime插件依赖babel-runtime,babel-runtime是真正提供runtime环境的包;也就是说transform-runtime插件是把js代码中使用到的新原生对象和静态方法转换成对runtime实现包的引用,举个例子如下:

// 输入的ES6代码
var sym = Symbol();
// 通过transform-runtime转换后的ES5 runtime代码 
var _symbol = require("babel-runtime/core-js/symbol");
var sym = (0, _symbol.default)();

从上面这个例子可见,原本代码中使用的ES6新原生对象Symbol被transform-runtimec插件转换成了babel-runtime的实现,既保持了Symbol的功能,同时又没有像polyfill那样污染全局环境(因为最终生成的代码中,并没有对Symbol的引用)
另外,这里我们也可以隐约发现,babel-runtime其实也不是真正的实现代码所在,真正的代码实现是在core-js中,后面我们再说

本文由www.2003.com发布于计算机教程,转载请注明出处:【JavaScript】深入理解Babel原理及其使用

关键词: