前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >es6类型转换_单片机ad转换原理

es6类型转换_单片机ad转换原理

作者头像
全栈程序员站长
发布2022-11-09 21:31:54
3080
发布2022-11-09 21:31:54
举报

大家好,又见面了,我是你们的朋友全栈君。

babel ES6 转换 ES5 实现原理

前言

前面写过一篇简单的 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

转换过程

转换过程分为三步:

  1. Parser 解析 第一步主要是将 ES6 语法解析为 AST 抽象语法树。简单地说就是将代码打散成颗粒组装的对象。这一步主要是通过 babylon 插件来完成。
  2. 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 文件中配置。
  3. Generator 生成 第三步是将新的 AST 语法树对象再生成浏览器都可以识别的 ES5 语法。这一步主要是由 babel-generator 插件完成。

案例

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

  1. 使用 在线 astexplorer 将代码块解析成 AST 语法树。
代码语言:javascript
复制
{ 

"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"
}
  1. 将以上 AST 语法树对象中的 ES6 语法 let 替换成 var
  2. 再将新的语法树生成新的代码 var a = 10

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/190009.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月24日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • babel ES6 转换 ES5 实现原理
  • 前言
  • babel 各种包介绍
  • 转换过程
  • 案例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档