Babel原理

最新推荐文章于 2024-04-29 16:00:04 发布
最新推荐文章于 2024-04-29 16:00:04 发布
阅读量557 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44739881/article/details/104291822
版权
本文介绍了Babel的主要工作原理，包括parsing、transforming和generating三个阶段，以及它如何通过babylon、babel-traverse和babel-generator等核心包实现JS代码的版本转换。还探讨了Babel中的plugins、presets、polyfill和runtime的概念，帮助理解Babel在ES6+代码转译中的作用。
摘要由CSDN通过智能技术生成

前言

在学习es6的时候就一直希望了解一下bable的转码原理，偶然的机会查了查，整理了一下。

Bable的主要工作原理
Bable是一个转译器，与编译器不同。bable主要负责目标代码的版本转换，只处理同一种语言，并且只负责输出转码后的代码串。大概分三个阶段：

  • parsing 生成AST抽象语法树（将整个代码字符串分割成语法单元 ，进行语义分析，在分词结果的基础之上分析语法单元之间的关系）
  • transforming 修改语法树，生成新的语法树
  • generating 根据新的语法树生成目标代码

Babel主要由几个核心包组成

  • babel-core：babel转译器本身，提供了babel的转译API。webpack的babel-loader就是调用这些API来完成转译过程。
  • babylon：js的词法解析器
  • babel-traverse：用于对AST的遍历，主要给plugin用
  • babel-generator：根据AST生成代码

Bable核心概念

  • plugins
    主要在第二阶段transforming，修改AST树，生成新的语法树时使用。bable会根据配置的plugins进行AST的修改。

  • presets

最低0.47元/天 解锁文章
赫奇。
关注
专栏目录
babel的原理
weixin_47450807的博客
04-22 5928
一、babel的原理 babel的转移过程分为三个阶段，这三个步骤分别是： 1、解析parse:将代码解析生成抽象语法树（AST）,即词法分析和语法分析的过程。 2、转换Transform:对于AST进行变换的一些列的操作，babel接收得到的AST并通过babel-traverse对其进行遍历，在此过程中进行添加，更新以及移除等操作。 3、生成Generate:将变换后的AST再转换为JS代码，使用到的模块是babel-generator。 二、如何编写一个babel插件 Babel的核心模块@babe
深入理解babel原理
weixin_47450807的博客
02-04 1972
在现在开发者基本使用ES6+语法，但是任然存在部分浏览器不能完全支持ES6+语法，此时我们需要利用babel来进行转化，将ES6+语法转化成ES5语法，来实现浏览器兼容的功能。 babel是实现代码的转化，而不是对代码进行打包。 下面将从babel原理方法对其进行解析。 一、babel运行的三个阶段 babel我们可以把他理解为一个编译器，也就是实现代码转换的功能，其转换过程分为三个阶段。 1、解析： 将js代码转换成AST（抽象语法树） 2、转化： 根据抽象语法树进行变换操作 3、生成： 将转换后的抽象语
babel原理
czlj1998的博客
09-23 467
用户可以根据自己的需求编写自定义的转换规则，或使用已有的插件来实现特定的转换操作。Babel是一个非常流行的JavaScript编译器工具，其主要功能是将新版本的JavaScript代码转换为旧版本的代码，以便能够在旧版本的浏览器或环境中运行。生成：在转换过程完成后，Babel将转换后的AST重新生成为可执行的JavaScript代码。Babel的工作原理是通过将JavaScript代码解析为抽象语法树（AST，Abstract Syntax Tree），然后对。
babel 原理与演进
.
08-19 3702
什么是 babel 官网上的定义是 babel 是一个 JavaScript 编译器，具体来说，babel 是一个工具用于将 ECMAScript 2015+ 语法编写的代码转化成向后兼容的 JavaScript 语法，以便于能够运行在当前或者旧版本浏览器或其他环境中。 如图所示先来回顾下 v8 执行 js 代码的整体流程，有一段 js 代码经过词法分析将代码解析成几个 token，然后经过语法分析生成一棵 AST 数，再经过语义分析解析出作用域、领域等上下文环境。最终生成中间代码的形态(中间代码可能是..
babel 原理三：babel 的工作原理
waiting677的博客
01-10 1141
更新 babel7.x preset 的变更：淘汰 es201x、删除 stage-x、强推 env npm package 名称的变化：把所有 babel-* 重命名为 @babel/* 不再支持低版本 node：要求 nodejs>=6 only 和 ignore 匹配规则的变化 @babel/node 从 @babel/cli 中独立了 babel-upgrade babel 的工作原...
初探 babel 深入浅出地分析 babel 原理
Cansiny0320的博客
07-06 867
写代码的时候，我们经常会使用 babel 来进行 polyfill，但是 babel 是怎么做到的呢？这篇文章会对 babel 有一个大概的介绍 babel 是啥？ babel 的用途 js 转译器 转译 esnext、typescript、flow 等到目标环境支持的 js 这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现，并且还可以把目标环境不支持的 api 进行 polyfill。 一些特定用途的代码转换 babe
Babel原理是什么？
Meraln的博客
03-22 373
babel的转义过程也分为三个阶段，这三步具体是： 解析Parse：将代码解析生成抽象语法树(即AST)，即词法分析与语法分析的过程 转换Transform：对于AST进行变换一系列的操作，babel接收得到AST并通过babel-traverse对其进行遍历，在此过程中进行添加、更新及移除等操作 生成Generate：将变换后的AST再转换为JS代码，使用到的模块是babel-genertor ...
Babel、AST 原理
yiyueqinghui的博客
11-30 676
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 的原理
HZFEStudio的博客
09-20 138
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题Babel 是什么Babel 有什么用压缩代码如何实现回答关键点JS 编译器 AST 插件系统Babel 是 JavaScript 编译器：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将
Babel 原理浅析
最新发布
qq_39454432的博客
04-29 997
Babel 原理浅析
babel的使用和原理
我的博客简介
08-03 1312
promise和generator，symbol转换不了，需要装polyfill。@babel/core：babel的核心代码，必须安装；@babel/cli：可以让我们在命令行使用babel；–out-dir：指定要输出的文件夹dist；src：是源文件的目录；
快速了解babel工作原理
文摘资讯
08-03 776
介绍Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。静态分析是在不需要执行代码的前提下对代码进行分析的处理过...
Babel的使用及其工作原理
cc_fys的博客
08-29 3306
Babel的包构成 核心包 babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。 babylon：js的词法解析器 babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用 ba...
babel原理_浅谈babel原理以及使用
weixin_36429440的博客
12-24 929
最近项目中遇到再安卓5.0以下的兼容问题，最后查了资料发现没有引入babel-polyfill的原因导致。后来就详细了解并整理了一下babel相关的知识点。Babel包的构成核心包babel-core ：是babel转译器本身，提供转译的API，例如babel.transform等，webpack的babel-loader就是调用这些API完成转译的babylon ：js的词法解析器babel-t...
BABLE 原理
weixin_30323961的博客
03-11 138
1、babel转换原理 2.主要过程 （1）babylon进行解析得到AST （2）babel-traverse插件对AST树进行遍历转译得到新的AST树 （3）babel-generator将AST树生成ES5代码 转载于:https://www.cnblogs.com/mengfangui/p/10510493.html...
【Babel】Babel的工作原理
webFrontEndDev的博客
12-03 392
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其它环境中。 // Babel 输入： ES2015 箭头函数 [1, 2, 3].map((n) => n + 1) // Babel 输出： ES5 语法实现的同等功能 [1, 2, 3].map(function(n)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值