美文网首页
webpack之babel学习系列2——babel设计 / 组成

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

作者: ZH彪 | 来源:发表于2021-12-11 22:06 被阅读0次

第一篇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/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,按需导入,代码少

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

相关文章

网友评论

      本文标题:webpack之babel学习系列2——babel设计 / 组成

      本文链接:https://www.haomeiwen.com/subject/etelfrtx.html