webpack之babel学习系列2——babel设计 / 组成
一、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，按需导入,代码少
