webpack之babel学习系列2——babel设计 / 组成 / 简介

第一篇webpack之babel学习系列1—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/polyfillbabel7.4之后用core-js 和 regenerator-runtime替代@babel/polyfillbabel7.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，按需导入,代码少

转载于：https://zhuanlan.zhihu.com/p/57883838