js的 Babel原理

9月前作者：周万宁.FoBJ 分类：Toy博客阅读(22) 违法举报

这篇具有很好参考价值的文章主要介绍了js的 Babel原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介

babel是一个JavaScript编译器,可以将ES2015+ 转换为向后兼容的JavaScript代码,

Babel的原理是将JavaScript代码分为三个阶段: 解析, 转换和输出

1. 解析阶段

Babel首先会使用 Babylon 解析器将输出的 ES2015+diamagnetic解析成抽象语法树(AST), 抽象语法树是
一种JSON形式表示的代码结构的数据结构,他将代码分解成语法单元,并按照层次结构组织起来,
抽象语法树包含了代码的所有信息,包括变量,函数语句等

传送门

例如:

let a = 12

语法树:
js的 Babel原理

2. 转换阶段

Babel的转换阶段会遍历抽象语法树, 并根据预设的转换规则,对代码进行转换; 转换规则是一组插件,
每个插件都可以针对不同的代码结构进行转换;

例如ES6的箭头函数在ES5中没有对应的语法, Babel的箭头函数插件会将箭头函数转换为普通函数,Babel还支持自定义插件, 开发者可以根据自己的需求的需求写插件

3. 输出阶段

Babel的输出阶段会将转换后的抽象语法树转换为JavaScript代码, 输出格式可以是浏览器或者 nodeJs可以执行的代码,也可以是其他JavaScript的的转换工具可以处理代码格式, Babel也支持输出抽象语法树,方柏霓开发者进行后续处理

总之Babel可以通过解析,转换,和输出三个阶段, 将ES2015+ 代码转换为向后兼容的JavaScript代码,
Babel的插件机制使得他可以支持新的JavaScript特性,并使得开发可以根据自己的需求自定义转换规则文章来源地址https://www.toymoban.com/news/detail-496869.html

到了这里，关于js的 Babel原理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

带你揭开神秘的Javascript AST面纱之Babel AST 四件套的使用方法

作者：京东零售周明亮这里我们初步提到了一些基础概念和应用：分析器抽象语法树 AST AST 在 JS 中的用途 AST 的应用实践有了初步的认识，还有常规的代码改造应用实践，现在我们来详细说说使用 AST，如何进行代码改造？其实在解析 AST 这个工具上，有很多可以使用，上

2023年04月12日
浏览(26)
Webpack5 core-js和babel-loader区别和用法

core-js是一个流行的JavaScript库，它提供了对新的JavaScript特性、API和方法的兼容性支持。它通过模拟缺失的功能，并提供 polyfill 来使这些功能可以在旧版浏览器中正常运行 polyfill 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，

2024年02月13日
浏览(39)
webpack原理之手写babel-loader，将es6以上语法转换为低版本语法

一、手写babel-loader 一个基于webpack的简单的loader，将es6以上版本的语法转换成低版本语法的步骤如下： 1. 创建一个名为 es6-to-es5-loader 的文件夹，进入该文件夹。 2. 在该文件夹中创建一个名为 index.js 的文件。该文件是我们自定义的loader。再创建一个 schema.json 文件，用于定义配

2024年02月11日
浏览(39)
小程序：Error: module ‘@babel/runtime/helpers/defineProperty.js‘ is not defined, require args is ‘../../

今天正在开发商城项目，结果写完一段代码运行后没用效果。清理了缓存，结果报错，如下所示：重复编译也没用效果，把刚刚写的代码删除掉也没效果，无语了。然后网上小伙伴说是微信开发工具的bug，重启一下试试，结果没有用。经过反复寻找最终在app.json 文件下有

2024年02月11日
浏览(36)
webpack报错：Module build failed (from ./node_modules/babel-loader/lib/index.js)

webpack打包的时候报错，报错信息如下： ERROR in ./static/js/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: this.getOptions is not a function 报错原因：使用了高版本的babel-loader，导致babel-loader和babel-core版本冲突，我降低之前babel-loader为9版本解决办法：降低babel

2024年02月12日
浏览(47)
解决 “Module build failed (from ./node_modules/babel-loader/lib/index.js)“ 错误的方法

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。在前端项目开发中，如果使用了 Babel 来转译 ES6+ 语法，有时会遇到错误信息 “Module build failed (from ./node_modules/b

2024年02月15日
浏览(87)
08-babel

babel命令行使用 babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用如果我们希望在命令行尝试使用babel，需要安装如下库 @babel/core：babel的核心代码，必须安装； @babel/cli：可以让我们在命令行使用babel；使用babel来处理我们的源代码 s

2024年02月10日
浏览(23)
babel兼容低版本游览器

npm init 初始化项目，并一路回车 webpack与webpack-cli 安装执行命令 npm i webpack webpack-cli -D 安装编译模板并配置入口和出口文件安装编译模板 npm i html-webpack-plugin 项目结构配置 webpack.config.js 新建入口文件 index.js , 出口文件 build 修改package.json 打包命令配置 webpack-dev-server 热更新

2024年02月17日
浏览(28)
深度学习AI编译器-LLVM简介

LLVM的命名最早来源于底层语言虚拟机（Low Level Virtual Machine）的缩写。它是一个用于建立编译器的基础框架，以C++编写。创建此工程的目的是对于任意的编程语言，利用该基础框架，构建一个包括编译时、链接时、执行时等的语言执行器。目前官方的LLVM只支持处理C/C++，Obje

2024年02月06日
浏览(40)
深度学习AI编译器-TVM简介

深度学习编译器主要为解决不同框架下训练的模型部署到指定的某些设备上时所遇到的一系列复杂的问题，即将各种深度学习训练框架的模型部署到各种硬件所面临的问题；首先深度学习领域，从训练框架看，当前可选的框架有pytorch、TensorFlow、Mxnet、paddle，oneflow、caffe/c

2024年02月11日
浏览(43)