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

es6类型转换_单片机ad转换原理babelES6转换ES5实现原理

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 极智开发 | ubuntu源码编译opencv

    极智开发 | ubuntu源码编译opencv本教程详细记录了在ubuntu1804中源码编译opencv的方法。

  • 万字图解Java多线程

    万字图解Java多线程前言java多线程我个人觉得是javaSe中最难的一部分,我以前也是感觉学会了,但是真正有多线程的需求却不知道怎么下手,实际上还是对多线程这块知识了解不深刻,不知道多线程api的应用场景,不知道多线程的运行流程等等,本篇文章将使用实例+图解+源码的方式来解析java多线程。文章篇幅较长,大家也可以有选择的看具体章节,建议多线程的代码全部手敲,永远不要相信你看到的结论,自己编码后运行出来的,才是自己的。什么是java多线程?进程与线程进程当一个程序被运行,就开启了一个进程,比如启动了qq,w.

  • 脚手架专项施工方案范本_脚手架工程施工方案主要内容

    脚手架专项施工方案范本_脚手架工程施工方案主要内容前言如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建查看创建新项目的命令先来查看一下帮助命令httpr

  • 找jaeger_CQB初探

    找jaeger_CQB初探导读:有一天我们接到这样一条客诉“你们的收银软件最近特别慢,严重影响我们的收银效率,再不解决我们就不用了”,我相信大家应该都遇到过这种问题,即使现在没遇到,将来一定会遇到的,那遇到了怎么办呢?就这个话

  • 喉头梗阻的常见原因有哪六项_晕针的原因症状处理及预防

    喉头梗阻的常见原因有哪六项_晕针的原因症状处理及预防点击上方”IT牧场”,选择”设为星标”技术干货每日送达!每一个JVM线程都拥有一个私有的JVM线程栈,用于存放当前线程的JVM栈帧(包括被调用函数的参数、局部…

    2022年10月26日
  • 【Linux】文本编辑器Vim[通俗易懂]

    【Linux】文本编辑器Vim[通俗易懂]Linux文本编辑器Vim详细学习笔记

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号