Babel学习系列2-Babel设计,组成-CSDN博客

Babel学习系列2-Babel组成

上篇讲了 Babel 的历史，为了解决ES6浏览器不支持的问题，这篇聊下Babel的整个设计,基本组成

设计理念

（在 AlloyTeam 找的图，AST：Abstract Syntax Tree, 抽象语法树）从图上可以看到，Babel 会将我们写的代码转换AST 之后，通过便利 AST 树，对树做一些修改，然后再将 AST 转成 code，这样我们用的箭头函数，let，const，解构赋值才能用的舒坦

组成

Babel 的核心是在 @babel/core 这个npm 包，围绕在它周围的分别是

@babel/cli
@babel/preset-env*
@babel/plugin*
@babel/runtime*
@babel/polyfill
.babelrc/babel.config.js

为了形象的讲每个的作用，我用汽车发动机来做比喻我们的在加油站加的油(我们写的代码)需要发动机把油放到活塞里，火花塞点火，推动活塞做功,转换成动能（转换后的代码），供给其他系统让车子上跑起来

babel/core就是活塞转动做功这个过程,那要燃烧需要个东西

babel/cli是火花塞,通过这个我们就可在 cmd,终端执行 babel src/test.js 这样就开始转换test.js了

可能这个自带得发动机你不太满意，有些耗油，还时不时熄火，发动机厂商提供了些工具来DIY,这些工具就是babel/plugin*厂商在提供工具得过程中，发现大家很多需求是一样得，那把它组装在一起，搞个套件，拉来就用，这个就是 babel/preset-env*

那有可能你的车子只能用 93# 汽油，这会加油站只有柴油，那你得有个装置做个转换,这个就是 babel/plofill做个兼容，这个兼容很粗暴，管它是 #97 #94，柴油，花生油，菜籽油什么都一把梭得都给转了，那可能你这个车其实 #94号油也是能跑的，不想这么粗暴，所以就出来了 babel/runtime*需要的转才转换下。

那通过这个比喻，我们再来总结下

@babel/core AST转换的核心
@babel/cli 打包工具
@babel/plugin* Babel 插件机制，Babel基础功能不满足的时候,手动添加些
@babel/preset-env* 把许多 @babel/plugin* 综合了下，减少配置
@babel/polyfill 把浏览器某些不支持API，兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大
@babel/runtime 把你使用到的浏览器某些不支持API，按需导入,代码少

OK,Babel 本就这些组成,看到这，你知道了Babel 的设计，主要组成部分了么。

哦哦，不是还有个 .babelrc/babel.config.js 没讲么，是哦，上面这些配置总得放在一个地方,.babelrc/babel.config.js 就是放这些配置地方，例如

{
    "presets": [
        ["@babel/preset-env"]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"],
    ]
}
复制代码

插一句哈，大家在学习一个新的框架，新的库时，千万不要直接去百度搜个**教程，**Demo，千万要忍住，千万要忍住，千万要忍住！，为什么？第一，前端版本更新的非常快，很可能你撸了半天，跑不起来，比如你装的 Babel7，教程里却是 Babel6，差了半条街；

第二：地基，框架，库的地基就是它是为了解决什么问题出现的，在它之前有什么解决办法？它的解决思路是什么?(关注它的设计思路)，解决思路的落地是怎么样的？(整个框架有分为了哪些大的模块，分别干什么事)，这样学习开始比较慢，后面有意思了，脑子里是网状的

看到这，读者朋友可以放下手机，心里默默捋一下，下次面试问Babel，你把Babel的设计，组成有条理的讲出来，肯定会加分

完毕，睡觉去了，我的妞都开始说梦话了，下篇讲具体的配置