前言

前面写过一篇简单的 AST 抽象语法树的文章简述 AST 抽象语法树。今天来看一下在 babel 中是如何将 ES6 转换为 ES5 的。

babel 各种包介绍

babel-core：核心包，提供转译的 API，用于对代码进行转译。例如 babel.transform。在 webpack 中 babel-loader 就是通过这个包实现。
babylon：babel 的词法解析器。将原始代码逐个字母地像扫描机一样读取分析得出 AST 语法树结构。
babel-traverse：对 AST 进行遍历转译。
babel-generator：将新的 AST 语法树生成新的代码。
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 中，因为它不会污染全局作用域。
参考：https://www.jianshu.com/p/e9b94b2d52e2

转换过程

转换过程分为三步：

Parser 解析
第一步主要是将 ES6 语法解析为 AST 抽象语法树。简单地说就是将代码打散成颗粒组装的对象。这一步主要是通过 babylon 插件来完成。
Transformer 转换
第二步是将打散的 AST 语法通过配置好的 plugins（babel-traverse 对 AST 进行遍历转译）和 presets （es2015 / es2016 / es2017 / env / stage-0 / stage-4 其中 es20xx 表示转换成该年份批准的标准，env 是最新标准，stage-0 和 stage-4 是实验版）转换成新的 AST 语法。这一步主要是由 babel-transform 插件完成。plugins 和 presets 通常在 .babelrc 文件中配置。
Generator 生成
第三步是将新的 AST 语法树对象再生成浏览器都可以识别的 ES5 语法。这一步主要是由 babel-generator 插件完成。

案例

举个简单的例子，比如代码块 let a = 10 中有 ES6 语法 let。转换的过程如下：

使用在线 astexplorer 将代码块解析成 AST 语法树。

{"type": "Program","start": 0,"end": 10,"body": [{"type": "VariableDeclaration","start": 0,"end": 10,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 10,"id": {"type": "Identifier","start": 4,"end": 5,"name": "a"},"init": {"type": "Literal","start": 8,"end": 10,"value": 10,"raw": "10"}}],"kind": "let"}],"sourceType": "module"
}

将以上 AST 语法树对象中的 ES6 语法 let 替换成 var。
再将新的语法树生成新的代码 var a = 10。

babel ES6 转换 ES5 实现原理相关推荐

es6转换es5 babel配置
npm install --save-dev babel-preset-es2015 babel-cli .babelrc文件 "presets":[ " ...
babel es6转es5
首先需要安装依赖环境 npm i --save-dev babel-cli babel-preset 安装es5转换 npm i --save-dev babel-preset-es2015 安装po ...
ES6代码转为ES5代码babel在线转换
ES6代码转为ES5代码babel在线转换 es6转es5还是很有用的.有的时间项目不大,不用配置webpack,就是个单页文件,又想用es6语法,写完可以直接转换一下就OK了.快捷方便. https ...
ES6中的class是如何实现的？（附Babel编译的ES5代码详解）
序言这篇文章主要讲解面试某大厂遇到的一个问题 - ES6中的class语法的实现? ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰.更人性化.风格更接近面向 ...
ES6转ES5：Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩以上步骤自动监控执行步骤: 1.安装插件在命令行中定位到项目根目录安装全局 Gulp npm install -g gulp 安装项目中使 ...
es5直接引入html文件,ES6+转ES5（webpack+babel、指定多个js文件、自动注入）
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 一.新建项目,目录如下二.执 ...
如何将ES6转换成ES5？
一. 介绍 ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现. Babel是一个广泛使用的转码 ...
babel—ES6代码转换为ES5代码
为什么要将ES6代码转换为ES5代码? 为了浏览器兼容,以及为了在node.js环境可以顺畅运行应用程序.ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以 ...
webpack之配置es6转换成es5
webpack之配置es6转换成es5 为什么要将代码中的es6语法转换成es5语法呢?这是因为有些浏览器无法识别es6语法.而webpack在不借助babel的情况下,只能对js进行打包处理,无法将 ...

babel ES6 转换 ES5 实现原理

babel ES6 转换 ES5 实现原理

前言

babel 各种包介绍

转换过程

案例

babel ES6 转换 ES5 实现原理相关推荐

最新文章

热门文章