Babel 预设与插件的选择

如果你是Babel方面的小白,看了Babel配置文件一节,可能还是不知道有哪些插件和预设,该怎么选择插件和预设。本小节就是帮你解决这个问题的。

Babel7.8官方的插件和预设目前有100多个,数量这么多,我们一个个都学习其作用是要花费大量时间的。

不过,我们没有必要全部学习。在我们现在的web前端工程里,常用的插件和预设其实只有几个。抓住重点,有的放矢地学习这几个,然后举一反三,这是最快掌握Babel的途径。

一、preset预设的选择

在Babel6的时代,常见的preset有babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest、babel-preset-stage-0、babel-preset-stage-1、babel-preset-stage-2等。

babel-preset-es2015、babel-preset-es2016、babel-preset-es2017分别是TC39每年发布的进入标准的ES语法的转换器预设,我们在这里称之为年代preset。

目前,Babel官方不再推出babel-preset-es2017以后的年代preset了。

babel-preset-stage-0、babel-preset-stage-1、babel-preset-stage-2、babel-preset-stage-3是TC39每年草案阶段的ES语法转换器预设

从Babel7版本开始,上述的预设都已经不推荐使用了,babel-preset-stage-X因为对开发造成了一些困扰,也不再更新。

babel-preset-latest,在Babel6的时候是你在使用它的时候所有年代preset的集合,在Babel6最后一个版本,它是babel-preset-es2015、babel-preset-es2016、babel-preset-es2017这三个的集合。因为Babel官方不再推出babel-preset-es2017以后的年代preset了,所以babel-preset-latest定义变成了TC39每年发布的进入标准的ES语法的转换器预设集合。其实,和Babel6时的内涵是一样的。

@babel/preset-env包含了babel-preset-latest的功能,并对其进行增强,现在@babel/preset-env完全可以替代babel-preset-latest。

经过一番梳理,可以总结为以前要用到的那么多preset预设,现在只需一个@babel/preset-env就可以了。

在实际开发过程中,除了使用@babel/preset-env对标准的ES6语法转换,我们可能还需要类型检查和react等预设对特定语法转换。这里有三个官方预设可以使用:

  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

总结起来,Babel官方的preset,我们实际可能会用到的其实就只有4个:

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

一个普通的vue工程,Babel官方的preset只需要配一个"@babel/preset-env"就可以了。

二、plugin插件的选择

虽然Babel7官方有90多个插件,不过大半已经整合在@babel/preset-env和@babel/preset-react等预设里了,我们在开发的时候直接使用预设就可以了。

目前比较常用的插件只有@babel/plugin-transform-runtime。目前我做过的几个项目,前端工程已经很少见到里使用其它的插件了。

小结:

1.这节课我们主要学习了插件和预设的选择,经过一番筛选后,我们找出了会在我们开发的过程中可能用到4个预设和1个插件。分别是@babel/preset-env、@babel/preset-flow、@babel/preset-react、@babel/preset-typescript这4个预设,以及 @babel/plugin-transform-runtime 这1个插件。

2.接下来我们会学习@babel/preset-env、@babel/plugin-transform-runtime与polyfill等内容,随着学习的深入,会不断优化我们的Babel配置,并得到一个最佳配置。

笔记与思考

发表评论

邮箱地址不会被公开。 必填项已用*标注