Webpack的Bable及工作原理

已于 2023-04-10 16:38:03 修改
阅读量99 收藏
点赞数
分类专栏： webpack 文章标签： webpack javascript 前端
于 2023-03-31 15:15:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littlepelican/article/details/129880945
版权
Babel是一个JavaScript编译器，主要功能是将现代JavaScript语法如ES6、jsx和ts转换为广泛支持的ES5。它首先通过词法分析和语法分析将源代码转化为抽象语法树(AST)，然后修改AST以转换高级语法，最后生成目标ES5代码，确保在各种浏览器中兼容运行。
摘要由CSDN通过智能技术生成

作用

bable是转义器，可以转换浏览器无法支持的ES6、jsx、ts语法

工作阶段

解析parse

将js代码转换成AST(抽象语法树)

  1. 词法分析阶段

    将代码拆分为词法单元，每一个字符，都被拆分成一组type+value

  2. 语法分析阶段

    通过语法分析，解析词法单元处理生成AST

转换trasnsforming

修改AST中的内容（将ES6语法转换成ES5，将jsx转换为js…）

生成generating

根据AST生成目标代码

丑小鹈鹕
关注
专栏目录
Babel原理
weixin_44739881的博客
02-13 549
前言 在学习es6的时候就一直希望了解一下bable的转码原理，偶然的机会查了查，整理了一下。 Bable的主要工作原理 Bable是一个转译器，与编译器不同。bable主要负责目标代码的版本转换，只处理同一种语言，并且只负责输出转码后的代码串。大概分三个阶段： parsing 生成AST抽象语法树（将整个代码字符串分割成语法单元 ，进行语义分析，在分词结果的基础之上分析语法单元之间的关系） ...
babel原理_手写webpack核心原理，再也不怕面试官问我webpack原理
weixin_34517745的博客
12-13 280
手写webpack核心原理一、核心打包原理1.1 打包的主要流程如下1.2 具体细节二、基本准备工作三、获取模块内容四、分析模块五、收集依赖六、ES6转成ES5（AST）七、递归获取所有依赖八、处理两个关键字一、核心打包原理 1.1 打包的主要流程如下需要读到入口文件里面的内容。分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。根据AST语法树，生成浏览器能够运行的代码1.2 具体...
Babel和Webpack打包原理学习笔记
一条吃软饭的软狗
03-13 1736
一、babel babel是一个JS编译器，用来转换最新的JS语法，比如把ES6, ES7等语法转化成ES5语法，从而能够在大部分浏览器中运行。像箭头函数，就可以做转换。babel在执行过程中，分三步：先分析(parsing)、再转化、最后生成代码。 但babel只转换语法的话，一些最新的api是不转化的，比如Object.assign， Promise等。所以babel还提供了很多插件，也就...
webpack+babel构建ES6语法运行环境
难凉热血的博客
01-15 1271
由于ES6语法在各个浏览器上支持的情况各不相同，所以在使用ES6语法时需要使用babel经过一次编译，将ES6语法编译为ES5语法，下面就开始搭建一个基于webpack+babel的ES6语法运行环境：1.需要安装的包 webpack(安装webpack，必装) babel-loader和babel-core(babel转码器，必装) babel-preset-es2015(转码规则，以es2015
初识webpack
doomliu的博客
05-16 755
一、简介 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 首先介绍一下前端打包和构建的概念。 前端打包，从字面意思，是将多个文件合并成一个文件。 因为前端模块化开发，不同模块放在不同的文件中，而发布运行时候，为了减少网络请求，应该将文件合并在一起。webpack做的就是这个工作。 当然前端代码开发完成将要发布时候，不仅仅打包就够了，还有很多工作要做： 代码压缩，为了减小运行时代码体积，提升加载速度，另外也为了降低代码可读性，从而提升安全性，需要对代码进行混淆压
2023前端面试系列-- webpack & Git篇
郊眠寺
03-10 294
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
webpack优化——Dllplugin
riddle1981的博客
03-04 1767
前言 我入行的时候前端框架就盛行，react、angular、vue等框架大行其道。这些框架的好处是十分显然的，便捷、快速且稳定。如果框架搭建的足够便捷不熟悉业务的人也能够快速上手项目，拿vue-cli来说，现成的脚手架已经集成了webpack、eslint、bable等常见框架的基础配置，而这些配置未必最优却通用性很强，对于初学者来说甚者可以不去了解这些常见框架就可以直接上手开发了。正是由于框架的便捷性，使得框架更加流行。vue-cli3更是直接把配置内置在了第三方插件里，让你在工作目录中完全看不到基础配
从Vue-cli看 webpack配置
etemal_bright的博客
04-08 629
用了哪些loader？ vue-loader: 把vue转成js sass-loader: 把sass转成css css-loader: 把css转成js style-loader: 把css注入到js里，通过dom操作 stylus-loader：加载并编译stylus文件 file-loader: 把文件输出到文件夹中使用相对路径引用 url-loader: 与file-loader类似，唯一不同的是可以添加阈值，超过limit阈值生成带有hash后缀的文件，不超过阈值的转化成base64 ima..
（二）webpack babel详解
wzwccc的博客
07-14 465
1.安装 npm install @babel/core -d npm install @babel/cli -d 2.使用 npx babel src --out-dir result //指将src文件夹下文件用babel转化后放到result文件夹下 3.使用插件 npm install @babel/plugin-transform-arrow-functions -d //安装箭头函数转化插件 npx babel src --out-dir result --plugins=@babel/p
初探 babel 深入浅出地分析 babel 原理
Cansiny0320的博客
07-06 856
写代码的时候，我们经常会使用 babel 来进行 polyfill，但是 babel 是怎么做到的呢？这篇文章会对 babel 有一个大概的介绍 babel 是啥？ babel 的用途 js 转译器 转译 esnext、typescript、flow 等到目标环境支持的 js 这个是最常用的功能，用来把代码中的 esnext 的新的语法、typescript 和 flow 的语法转成基于目标环境支持的语法的实现，并且还可以把目标环境不支持的 api 进行 polyfill。 一些特定用途的代码转换 babe
webpack 之 使用 loader && babel
玄鱼殇
05-06 2311
webpack 之 零基础使用常用的Loader
关于webpack中babel插件的使用
weixin_38401146的博客
03-30 616
1.为什么需要BABEL webpack是不能解析es6语法的，需要用到插件来转化为es5和浏览器能识别的文件 2.NPM安装和配置 1.cnpm i babel-corebabel-loader@7babel-plugin-transform-runtime -D这里我使用的cnpm指令安装可以更快，尽量不要npm和cnpm指令混用，因为可能是npm删掉cnpm之前安装的包，，所以要么一直用npm或者cnpm。这个包核心是babel-loader和core，第二个是插件plugin，需要辅助用...
webpack 面试题
王亮的博客
10-20 591
webpack 常见面试题
webpack基础(四)——babel
weixin_47450807的博客
01-29 3252
一、babel介绍 在开发中我们经常使用ES6+，typescript等语法，但是在打包后，这些代码浏览器不能识别，所以此时我们使用babel来解决该问题。 babel定义：babel是一个工具链主要用于将ES6+语法兼容老版本的浏览器。 二、babel简单使用 babel是一个独立的工具，可以不在webpack中使用。 @babel/core：babel核心代码必须安装 @babel/cli:在命令行执行babel代码 npm install @babel/core @babel/cli -D //需要转
前端项目工程化工具webpack，gulp，babel的使用和原理
kellywong的博客
02-22 1288
一、项目中的工程化 node.js 运行时，npm 包管理 expressjs 服务端框架 babel 编译 ES2015+ 代码到 ES5 webpack打包和压缩源码 eslint 检查代码规范(腾讯那套) prettier.js 代码自动美化排版 git hook规范代码提交格式（按照anjular.js） mocha 单元测试 二、webpack使用和工作原理 webpack是前端项目...
Babel的使用及其工作原理
cc_fys的博客
08-29 3282
Babel的包构成 核心包 babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。 babylon：js的词法解析器 babel-traverse：用于对AST（抽象语法树，想了解的请自行查询编译原理）的遍历，主要给plugin用 ba...
简单说一下webpack 的原理？简单说一下babel的原理？
陈小陈的博客
03-10 483
前端面经 简单说一下webpack 的原理 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译； 确定入口：根据配置中的 entry 找出所有的入口文件； 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模 块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理； 完成模块编译：在经过第4步使用 Loader 翻译完所
webpack的工作原理
最新发布
09-13
webpack是一个现代的模块打包工具，它的工作原理可以简单概括为以下几个步骤： 1. 入口点分析：webpack会根据配置文件中指定的入口点（entry point）开始分析项目的依赖关系。入口点可以是一个或多个文件，webpack会从这些文件开始递归地查找和解析依赖。 2. 依赖解析：webpack会解析每个模块的依赖关系。在解析过程中，它支持各种模块系统（如CommonJS、AMD、ESM）和其他资源类型（如CSS、图片等），并且可以通过加载器（loader）处理非JavaScript资源。 3. 打包生成：在解析完所有依赖后，webpack会根据配置文件中的规则（如输出路径、命名规则等）将所有模块打包成一个或多个输出文件。在这个过程中，webpack还支持各种功能，如代码压缩、文件分块、按需加载等。 4. 优化处理：webpack还提供了一些优化功能，以提高打包后的代码的性能和体积。例如，它可以通过代码分割和按需加载来减小初始加载的文件大小，也可以通过使用Tree Shaking和代码压缩等技术来消除未使用的代码和减小文件体积。 5. 输出结果：最后，webpack将打包生成的文件输出到指定的目录中。输出的文件可以是JavaScript代码、CSS样式表、图片等资源，具体输出的内容和格式由配置文件中的设置决定。 总的来说，webpack通过分析项目的依赖关系，解析模块的依赖关系和处理各种资源类型，将它们打包成一个或多个输出文件，并提供了一些优化功能来提高打包后代码的性能和体积。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值