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

Love The Way You Lie 2022-03-12 10:42 184阅读 0赞

# Babel学习系列2-Babel组成 #

第一篇 [Babel学习系列1-Babel历史][Babel_1-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的设计，组成 有条理的讲出来，肯定会加分

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

[Babel_1-Babel]: https://link.juejin.im?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzAwOTkzNDc0Mg%3D%3D%26amp%3Btempkey%3DOTk3X2dRK3hFd25sMzlyU2d4MWV2Q3RhaTYyS3hZbUFJMWRLbmc4V0c1bzR6UGhTMjNGenpjR3RLR1N3LUdiTFphOEx2dHdPSnpKQnJXS3JvRWhKZFJjMjF6MlVNVW8ySUE4THl0YlFuSWl1TzJXNVVMUFYwMXpXQjZpMElkV1FuSTFpWDB2MC1Vek1SS0FmNE5uTFlLNG12cFBpc05JU3VGR29jQTVDWGd%252Bfg%253D%253D%26amp%3Bchksm%3D1b5943a62c2ecab0afc2d97fe8451eb401d0fa5d8123d045ef464c8efda0dc48c874e5bd7aff%23rd