babel原理(babel+polyfill)
2023-02-28 本文已影响0人
糖糖不加糖_
babel:
https://zhuanlan.zhihu.com/p/85915575
https://www.cnblogs.com/75115926/p/12627009.html
polyfill:
https://zhuanlan.zhihu.com/p/71640183
chatgpt
babel是一个转译器,它只是把同种语言的高版本规则翻译成低版本规则
主要分为三个阶段
- 解析:将代码字符串解析成抽象语法树(AST)
- 转换:对抽象语法树进行转换操作(使用插件,添加、删除、修改AST节点),得到新的抽象语法树
- 再建:根据变换后的抽象语法树再生成代码字符串
babel只是转译新标准引入的语法,比如ES6的箭头函数转译成ES5的函数;而新标准引入的新的原生对象,部分原生对象新增的原型方法,新增的API等(如Proxy、Set等),这些babel是不会转译的。需要用户自行引入polyfill来解决
Polyfill(补丁)解决上面,新标准引入的新的原生对象,部分原生对象新增的原型方法,新增的API等(如Proxy、Set等)
babel 最重要的包(其实由多个npm包组成,但下面的更重要)
- @babel/core: babel的核心包,包含了babel的转换引擎、插件管理器、AST等,是使用babel的必备包
- @babel/preset-env: bable的预设包,提供了对不同js版本的支持,可以通过配置自动转换js版本
- babel-loader: webpack中使用的babel插件,用于在webpack构建时自动转换js代码,常用语构建react程序
babel 常用的插件
- @babel/plugin-transform-arrow-functions:将es6箭头函数转化为传统函数
- @babel/preset-react:用于支持react应用程序的预设包,提供了jsx转换功能
- @babel/polyfill:提供ES6+特性的垫片,可以在不支持这些特性的环境中使用
- @babel/runtime:提供了运行时辅助库,支持babel转换的代码在不同环境中运行
在入口处导入polyfill,因为polyfill代码需要在所有其他代码前先被调用
polyfill和runtime区别
- 作用范围不同。runtime是在代码转换时使用,包含了运行时辅助函数,帮助转换后的代码在不同环境中运行,polyfill在运行时使用,包含了一些垫片,在不支持es6+语法的环境中,模拟这些语法
- 体积不同。runtime更轻量级!!!它包含了转换后代码所需的辅助函数,而polyfill包含了整个es6+语法的实现
- 使用方式不同。runtime需要借助babel转换功能,通过在代码中插入转换后的辅助函数,实现功能,polyfill可以直接作为依赖引入,不需要任何转换