大家好,又见面了,我是你们的朋友全栈君。
前面写过一篇简单的 AST 抽象语法树的文章 简述 AST 抽象语法树。今天来看一下在 babel 中是如何将 ES6 转换为 ES5 的 。
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
转换过程分为三步:
举个简单的例子,比如代码块 let a = 10
中有 ES6 语法 let
。转换的过程如下:
{
"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"
}
let
替换成 var
。var a = 10
。版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/190009.html原文链接:https://javaforall.cn