babel工作原理

已于 2023-06-21 18:11:47 修改
阅读量128 收藏
点赞数
分类专栏： 面试每日一题 文章标签： babel 前端工程化 前端 前端框架
于 2022-07-17 15:56:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50789156/article/details/125832707
版权

在这里插入图片描述

AST语法树:就是计算机理解的一种方式

面试一般会问

  • babel是什么?
  • babel的工作原理是什么?

babel是什么

babel是一种由高阶es6以上的语法转换为低阶的es5语法的工具.

babel的工作原理

工作过程就是上图,分别描述下三个阶段:

parse ===> transform ===> generator

  1. parse：第一步是babel使用babylon将原始代码转换为抽象语法树
  2. transform：第二步是babel通过babel-traverse对前面的抽象语法树进行遍历修改并获得新的抽象语法树
  3. generator：第三步是babel使用babel-generator将抽象语法树转换为代码

欢迎加qq群交流: 623354172

影风莫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-21 1365
前端修罗场提供全网最专业的前端优质文章与社区服务，为应届生，初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务！内容包含：前端面试辅导，前端面试题，前端交流，前端答疑，前端基础知识，前端知识体系，技能树搭建，Javascript，CSS，CSS3，HTML，React，Vue，小程序，前端简历，职业交流，远程工作，英文交流，英文提升，外企，互联网，国企，大厂，牛客面试题，掘金面试题，面经，优质前端文章分享...
babel的原理
weixin_47450807的博客
04-22 5819
一、babel的原理 babel的转移过程分为三个阶段，这三个步骤分别是： 1、解析parse:将代码解析生成抽象语法树（AST）,即词法分析和语法分析的过程。 2、转换Transform:对于AST进行变换的一些列的操作，babel接收得到的AST并通过babel-traverse对其进行遍历，在此过程中进行添加，更新以及移除等操作。 3、生成Generate:将变换后的AST再转换为JS代码，使用到的模块是babel-generator。 二、如何编写一个babel插件 Babel的核心模块@babe
面试官(7): 聊一聊 Babel?
weixin_34319640的博客
05-23 304
往期 面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus的实现 面试官系列(3): 前端路由的实现 面试官系列(4): 基于Proxy 数据劫持的双向绑定优势所在 面试官系列(5): 你为什么使用前端框架 面试官系列(6): 写过『通用前端组件』吗? 前言 Babel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都能看到他的身影,其背后的原理对于...
【前端面试指南】babel
Light.T的博客
05-11 205
babel作用：转换，把高版本的ES6转换成低版本的ES5 babel安装步骤 安装node.js,需要使用其npm 在dos界面,进入工程目录,生成package.json文件 安装babel ,用于转码 安装转码规则 创建.babelrc文件 babel安装命令 npm init --y npm install -g babel-cli npm install --save babel-preset-es2015 babel es6.js --presets-es2015 bab..
假如面试官问你Babel的原理该怎么回答
loveX001的博客
02-20 369
简单地说，Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。// es2015 的 const 和 arrow function// Babel 转译后Babel 的功能很纯粹。我们传递一段源代码给 Babel，然后它返回一串新的代码给我们。就是这么简单，它不会运行我们的代码，也不会去打包我们的代码。它只是一个编译器。大名鼎鼎的 Taro 也是利用 Babel 将 React 语法转化成小程序模板。
每天一道面试题(13) - webpack, babel, loader等原理解析
眼里长着太阳，笑里全是坦荡
10-13 838
偷懒了这么些天, 终于又开始更新啦~~ 文章目录前端代码为什么要进行构建和打包?webpack的打包原理loader和plugin的区别?编写loader和pluginBabel是什么, 与webpack的区别Babel的工作原理babel-runtime和babel-polyfill作用及区别 前端代码为什么要进行构建和打包? 体积更小(压缩, 合并), 加载更快 编译高级语言和语法(TS,ES6,模块化,scss) 兼容性和错误检查(plyfill, postcss, eslint) 统一, 高效的开
初学 Babel 工作原理
xb's area
04-16 111
原文链接：http://axuebin.com/articles/fe-solution/babel/first.html，转载请联系 前言 Babel 对于前端开发者来说应该是很熟悉了，日常开发中基本上是离不开它的。 已经 9102 了，我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说，可能和它们还不够熟悉，我们得让浏览器理解它们，这就需要 Babel。 当然，仅仅是 Babel 是不够的，还需要 polyfill 等等等等，这里就先不说了。 What：什么是 Babel Babel
babel原理
czlj1998的博客
09-23 395
用户可以根据自己的需求编写自定义的转换规则，或使用已有的插件来实现特定的转换操作。Babel是一个非常流行的JavaScript编译器工具，其主要功能是将新版本的JavaScript代码转换为旧版本的代码，以便能够在旧版本的浏览器或环境中运行。生成：在转换过程完成后，Babel将转换后的AST重新生成为可执行的JavaScript代码。Babel的工作原理是通过将JavaScript代码解析为抽象语法树（AST，Abstract Syntax Tree），然后对。
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 最主要的任务就是...
pywebview 入门
小小宾的博客
08-18 738
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 254
【代码】【js】各类前端输入校验方法。
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3907
web前端之html弹窗面板的popover新属性
CORS error && 302 Found
zcxbd的博客
08-19 195
单点登录认证：访问A系统，在B系统登录认证此处代码为A系统。
vue3 组合式 API：setup()
咸鱼滚滚
08-17 1036
setup()props和contextprops：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrsslotsemit等。可以通过解构赋值的方式获取特定的上下文信息。示例：< script setup lang = " ts " > // defineProps 用于定义组件接收的父组件传递过来的属性（props）。// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。import {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

影风莫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值