一、babel设计理念
图片(在 AlloyTeam 找的图,AST:Abstract Syntax Tree, 抽象语法树)
从图上可以看到,Babel 会将我们写的代码转换AST之后,通过遍历 AST 树,对树做一些修改,然后再将 AST 转成 code,这样我们用的 箭头函数,let,const,解构赋值才能用的舒坦
二、babel组成
Babel 的核心是在 @babel/core
这个npm 包,围绕在它周围的分别是
-
@babel/cli
-
@babel/preset-env*
-
@babel/plugin*
-
@babel/runtime*
-
@babel/polyfill(babel7.4之后废弃,npm上面上一次更新是4年前)
babel7.4之后用core-js 和 regenerator-runtime替代@babel/polyfill
babel7.4之后用core-js 和 regenerator-runtime替代@babel/polyfill
babel7.4之后用core-js 和 regenerator-runtime替代@babel/polyfill
-
.babelrc/babel.config.js
为了形象的讲每个的作用,我用汽车发动机来做比喻 我们的在加油站加的油(我们写的代码)需要发动机把油放到活塞里,火花塞点火,推动活塞做功,转换成动能(转换后的代码),供给其他系统让车子上跑起来。
babel/core
就是活塞转动做功这个过程,那要燃烧需要的东西
babel/cli
火花塞,通过这个我们就可在cmd终端执行 babel src/test.js
这样就开始转换test.js
了
babel/plugin*
可能这个自带得发动机你不太满意,有些耗油,还时不时熄火,发动机厂商提供了些工具来DIY修复一些问题,这就是babel/plugin
babel/preset-env*
这些工具就是厂商在提供工具得过程中,发现大家很多需求是一样的,那把它组装在一起,搞个套件,拉来就用,这个就是babel/preset-env
babel/runtime*
/babel/plofill
那有可能你的车子只能用 93# 汽油,这会加油站只有柴油,那你得有个装置做个转换,这个就是 babel/plofill
(差不多是补丁的意思)做个兼容,这个兼容很粗暴,管它是 #97 #94,柴油,花生油,菜籽油什么都一把梭得都给转了,那可能 你这个车 其实 #94号油也是能跑的,不想这么粗暴,所以就出来了 babel/runtime*
需要的转才转换下。
那通过这个比喻,我们再来总结下
-
@babel/core AST转换的核心
-
@babel/cli 打包工具
-
@babel/preset-env* 预设插件,把许多 @babel/plugin* 综合了下,减少配置
-
@babel/plugin* Babel 插件机制(预设插件里面没有的),Babel基础功能不满足的时候,手动添加些
-
@babel/polyfill 把浏览器某些不支持API,兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大
-
@babel/runtime 把你使用到的浏览器某些不支持API,按需导入,代码少
网友评论