Babel 原理

最新推荐文章于 2024-09-19 09:20:10 发布

LuckXinXin

最新推荐文章于 2024-09-19 09:20:10 发布

阅读量135

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/LuckXinXin/article/details/107855196

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

                    
                    本质就是编译器，当代码转为字符串生成 AST，对 AST 进行转变最后再生成新的代码
分为三步：词法分析生成 Token，语法分析生成 AST，遍历 AST，根据插件变换相应的节点，最后把 AST转换为代码

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LuckXinXin

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

深入理解babel原理

weixin_47450807的博客

02-04

1929

在现在开发者基本使用ES6+语法，但是任然存在部分浏览器不能完全支持ES6+语法，此时我们需要利用babel来进行转化，将ES6+语法转化成ES5语法，来实现浏览器兼容的功能。 babel是实现代码的转化，而不是对代码进行打包。下面将从babel原理方法对其进行解析。一、babel运行的三个阶段 babel我们可以把他理解为一个编译器，也就是实现代码转换的功能，其转换过程分为三个阶段。 1、解析：将js代码转换成AST（抽象语法树） 2、转化：根据抽象语法树进行变换操作 3、生成：将转换后的抽象语

babel 原理与演进

08-19

3683

什么是 babel 官网上的定义是 babel 是一个 JavaScript 编译器，具体来说，babel 是一个工具用于将 ECMAScript 2015+ 语法编写的代码转化成向后兼容的 JavaScript 语法，以便于能够运行在当前或者旧版本浏览器或其他环境中。如图所示先来回顾下 v8 执行 js 代码的整体流程，有一段 js 代码经过词法分析将代码解析成几个 token，然后经过语法分析生成一棵 AST 数，再经过语义分析解析出作用域、领域等上下文环境。最终生成中间代码的形态(中间代码可能是..

参与评论您还未登录，请先登录后发表或查看评论

Babel、AST 原理

yiyueqinghui的博客

11-30

654

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是如何编译JS代码的及理解抽象语法树(AST）

weixin_33968104的博客

11-20

346

Babel是如何编译JS代码的及理解抽象语法树(AST） 1. Babel的作用是？很多浏览器目前还不支持ES6的代码，但是我们可以通过Babel将ES6的代码转译成ES5代码，让所有的浏览器都能理解的代码，这就是Babel的作用。2. Babel是如何工作的？ Babel的编译过程和大多数其他语言的编译器大致相同，可以分为三个阶段。 1. 解析(PARSE)：将代码字符串解析成抽...

关于babel转化后AST语法树的解析

前端361

09-29

3617

AST语法树结构： AST语法树每一层都拥有相同的结构，这样的每一层结构也被叫做节点（Node）。一个 AST 可以由单一的节点或是成百上千个节点构成。它们组合在一起可以描述用于静态分析的程序语法。单层AST节点示例： { type: "BinaryExpression", operator: ..., left: {...}, right: {...} } ...

babel原理

qj6837的博客

08-31

245

什么是Babel？ Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。 Babel 大概分为三大部分: 解析: 将代码(其实就是字符串)转换成 AST( 抽象语法树) 转换: 访问 AST 的节点进行变换操作生成新的 AST 生成: 以新的 AST 为基础生成代码抽象语法树（AST）举个例子： // JS const add = (a...

Babel原理

奇舞周刊

03-16

2856

Babel是什么？我们为什么要了解它?1. 什么是babel ?Babel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，简言之，利用ba...

Babel 原理浅析

qq_39454432的博客

04-29

963

Babel 原理浅析

浅谈babel原理

楠姐的博客

03-02

330

浅谈babel原理

babel 原理三：babel 的工作原理

waiting677的博客

01-10

1126

更新 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

846

写代码的时候，我们经常会使用 babel 来进行 polyfill，但是 babel 是怎么做到的呢？这篇文章会对 babel 有一个大概的介绍 babel 是啥？ babel 的用途 js 转译器转译 esnext、typescript、flow 等到目标环境支持的 js 这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现，并且还可以把目标环境不支持的 api 进行 polyfill。一些特定用途的代码转换 babe

包管理工具

最新发布

CaptainDrake的博客

09-19

1824

包括包及其管理工具概念、npm、yarn、pnpm、npm install原理、包的发布流程等

【webpack4系列】webpack进阶用法（三）

mengran_code的博客

09-15

1802

一个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去，就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在uglify阶段被擦除掉。uglify阶段：将 JavaScript代码进行压缩、混淆，并去除一些不必要的代码，从而减小文件体积。webpack4及以上默认内置了，当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法，CJS 的⽅式不⽀持。

【webpack4系列】编写可维护的webpack构建配置（四）

mengran_code的博客

09-15

1935

冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。

【webpack4系列】webpack初识与构建工具发展（一）

mengran_code的博客

09-15

875

webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之后不再作为 webpack 的依赖了，我们使用时需要单独安装这个工具。，便可以访问到我们刚才创建的 html 文件了，打开控制台就可以看到前边的 js 代码打印出来的 hello world 了。在日常开发中，我们不可能每次修改一次代码就执行一次构建，我们需要一个方便本地开发的工具，和 webpack 配套的则是。然后我们执行npm run build，就会生成「dist/bundle.js」文件，这说明配置文件生效了。

【webpack4系列】webpack构建速度和体积优化策略（五）

mengran_code的博客

09-15

1626

add-asset-html-webpack-plugin参考地址：https://www.npmjs.com/package/add-asset-html-webpack-plugin/v/3.2.2?起作用就是把build/library/library.dll.js拷贝到编译后的dist文件夹下，并且通过script标签引入到index.html中。官网地址：https://github.com/stephencookdev/speed-measure-webpack-plugin#readme。

【webpack4系列】设计可维护的webpack4.x+vue构建配置（终极篇）

mengran_code的博客

09-15

2056

一个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去，tree shaking 就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在uglify 阶段被擦除掉。uglify阶段：将 JavaScript代码进行压缩、混淆，并去除一些不必要的代码，从而减小文件体积。webpack4及以上默认内置了，当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法，CJS 的⽅式不⽀持。

webpack6与Babel深度解析：从原理到实战

首先，Babel是一个编译器，它的工作原理是读取源代码，分析其语法结构，然后按照预设的规则将其转换为目标版本的JavaScript。在上述例子中，Babel将箭头函数`n=>n2`转换为`function(n){return Math.pow(n,2);}`。...