Babel的工作原理

最新推荐文章于 2024-04-29 16:00:04 发布
最新推荐文章于 2024-04-29 16:00:04 发布
阅读量152 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46644991/article/details/106235890
版权

babel是一个转译器，感觉相对于编译器compiler，叫转译器transpiler更准确，因为它只是把同种语言的高版本规则翻译成低版本规则，而不像编译器那样，输出的是另一种更低级的语言代码。
但是和编译器类似，babel的转译过程也分为三个阶段：parsing(解析)、transforming（改变）、generating（生成），以ES6代码转译为ES5代码为例，babel转译的具体过程如下
ES6代码输入 ==》 babylon进行解析 ==》 得到AST==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树==》 用babel-generator通过AST树生成ES5代码

用霸王洗发水的程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Babel原理
weixin_44739881的博客
02-13 521
前言 在学习es6的时候就一直希望了解一下bable的转码原理，偶然的机会查了查，整理了一下。 Bable的主要工作原理 Bable是一个转译器，与编译器不同。bable主要负责目标代码的版本转换，只处理同一种语言，并且只负责输出转码后的代码串。大概分三个阶段： parsing 生成AST抽象语法树（将整个代码字符串分割成语法单元 ，进行语义分析，在分词结果的基础之上分析语法单元之间的关系） ...
babel的原理
weixin_47450807的博客
04-22 5780
一、babel的原理 babel的转移过程分为三个阶段，这三个步骤分别是： 1、解析parse:将代码解析生成抽象语法树（AST）,即词法分析和语法分析的过程。 2、转换Transform:对于AST进行变换的一些列的操作，babel接收得到的AST并通过babel-traverse对其进行遍历，在此过程中进行添加，更新以及移除等操作。 3、生成Generate:将变换后的AST再转换为JS代码，使用到的模块是babel-generator。 二、如何编写一个babel插件 Babel的核心模块@babe
babel原理
qq_21747731的专栏
06-12 262
presets：转译过程中使用的各类插件（插件集），这样我们只需要使用对应的preset就可以了
Babel 原理浅析
最新发布
qq_39454432的博客
04-29 935
Babel 原理浅析
Babel原理是什么？
Meraln的博客
03-22 348
babel的转义过程也分为三个阶段，这三步具体是： 解析Parse：将代码解析生成抽象语法树(即AST)，即词法分析与语法分析的过程 转换Transform：对于AST进行变换一系列的操作，babel接收得到AST并通过babel-traverse对其进行遍历，在此过程中进行添加、更新及移除等操作 生成Generate：将变换后的AST再转换为JS代码，使用到的模块是babel-genertor ...
babel.min-6.26.0
02-15
2. **Babel工作原理**：Babel 使用AST（抽象语法树）来解析代码，将源代码转换成AST，然后再将AST转换成目标代码。这种方式允许Babel在保持语义不变的情况下，灵活地改变代码结构。 3. **插件系统**：Babel的强大之...
pipeline.macro:ba一个babel宏，其工作原理与管道运算符相似
03-18
管道宏一个babel宏，工作类似。用法import pipe from 'pipeline.macro'const doubleSay = str => str + ', ' + strconst capitalize = str => str [ 0 ] . toUpperCase ( ) + str . substring ( 1 )const exclaim = ...
JavaScript编译器Babel v7.7.6
08-22
Babel 是编写下一代 JavaScript 的编译器。 ES2015 and beyond。Babel 默认使用一组 ES2015 语法转换器，允许你使用新的语法，无需等待浏览器支持。 JSX and React。Babel 内置支持 JSX，与 babel-sublim
babel-handbook：有关如何使用Babel以及如何为Babel创建插件的指导手册
01-28
Babel的手册是学习和理解其工作原理、配置以及插件开发的关键资源。 **1. Babel的基本概念** - **转译**: Babel的主要功能是将现代JavaScript语法转换为广泛支持的ES5或更低版本的语法，确保代码在各种环境下运行...
babel-7.16.0.zip
02-25
在 "babel-7.16.0.zip" 这个压缩包中，我们拥有 Babel 7.16.0 版本的源码，这为我们提供了深入理解其工作原理的机会。 1. **Babel 的核心功能** - **转换语法（Syntax Transformation）**: Babel 最主要的任务就是...
babel 原理三：babel 的工作原理
waiting677的博客
01-10 1109
更新 babel7.x preset 的变更：淘汰 es201x、删除 stage-x、强推 env npm package 名称的变化：把所有 babel-* 重命名为 @babel/* 不再支持低版本 node：要求 nodejs>=6 only 和 ignore 匹配规则的变化 @babel/node 从 @babel/cli 中独立了 babel-upgrade babel 的工作原...
Babel、AST 原理
yiyueqinghui的博客
11-30 636
1. 什么是babel Babel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。 2、babel 是如何工作的 首先得要先了解一个概念：抽象语法树（Abstract Syntax Tree, AST），Babel 本质上就是在操作 AST 来完成代码的转译。 2.1、AST是什么 AST：即用一个树型结构的对象来描述js代码 分析 AST：https://ast
babel 浏览器中实现原理
网络记事本
11-13 611
简单实现
初探 babel 深入浅出地分析 babel 原理
Cansiny0320的博客
07-06 824
写代码的时候，我们经常会使用 babel 来进行 polyfill，但是 babel 是怎么做到的呢？这篇文章会对 babel 有一个大概的介绍 babel 是啥？ babel 的用途 js 转译器 转译 esnext、typescript、flow 等到目标环境支持的 js 这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现，并且还可以把目标环境不支持的 api 进行 polyfill。 一些特定用途的代码转换 babe
babel安装和babel编译
weixin_59543485的博客
07-22 363
1:什么是babel 1：babel是一个JS编译器，用来转换最新的JS语法，比如把ES6,ES7等语法转换为ES5语法，从而可以在大部分浏览器运行， 执行过程分三步：分析，转化，生成代码，但是babel一些最新的api是不转化的，比如Object,assign,Promise等， 所以可以使用插件 babel-pilofill来引入对全部api的支持。 2:babel编译的准备工作 //在使用babel之前需要安装运行node.js运行环境 1:初始化项目,在终端输入命令 npm init //生成pa
Babel的使用及其工作原理
cc_fys的博客
08-29 3246
Babel的包构成 核心包 babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。 babylon：js的词法解析器 babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用 ba...
深入理解Babel：JavaScript编译器的工作原理
这篇文档是Babel核心贡献者Nicolò Ribaudo对Babel工作原理的深入解析。Babel是一个JavaScript编译器，它的主要任务是将源代码转换成另一种形式的JavaScript，以便在不同的环境或版本中运行。Nicolò Ribaudo分享了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值