当前位置: 代码迷 >> 综合 >> Babel中关于Present,Plugin,Stage-x的区别及联系
  详细解决方案

Babel中关于Present,Plugin,Stage-x的区别及联系

热度:90   发布时间:2023-11-18 00:14:57.0

首先先看一个配置文件.babelrc

{"presets": ["env""react","stage-0",],"plugins": [["import", { "libraryName": "antd", "style": "css" }],"transform-runtime", // 转译JS最新的api"transform-decorators-legacy", // 转译es7的@修饰器]
}

以上是我个人项目中babel的配置项,接下来我们来详细说一下它们之间的区别和联系

Plugin(插件)

插件就是在代码运行时所需要的用来将ES2015+的JS语法转换为ES5的语法。
实际上PresetStage也是归属于Plugin中的。
举个?:如果你需要转换ES2015(ES6)的语法,你需要在.babelrc文件中按需引入check-es2015-constantses2015-arrow-functionses2015-block-scoped-functions等等几十个不同作用的plugin就行了

// .babelrc
{"plugins": ["check-es2015-constants","es2015-arrow-functions","es2015-block-scoped-functions",// ...]
}

但是Babel团队为了方便,将同属ES2015的几十个Transform Plugins集合到babel-preset-es2015一个Preset中,这样你只需要在.babelrc的presets加入es2015一个配置就可以完成全部ES2015语法的支持了,如下

// .babelrc
{"presents": ["es2015"]
}

另外官网也给出了PluginsPresets的配置项,点击此处查看

以上内容部分参考:点击这里

Present(预设)

在之前的Plugin中已经提到过了,Present可以称为是一些功能的Plugins的集合,用的比较多的Presets如下

// .babelrc
{"preset": ["env","es2015","es2016","es2017","stage-0","stage-1","stage-2","stage-3","react"]
}

官网这里有详细的说明

接下来说一下这些presets的作用

es2015+ 是Babel官方推出的用来转译已经进入标准的es2015+的语法。
进入标准该怎么理解呢 就是说一群ES标准制定的人经过好几次开会,讨论允许使哪些新的语法进入ES2015+标准,据我现在所知常用的es2015+语法且没有进入标准的例如:

  • @修饰器语法
  • …拓展运算符
  • 箭头函数

先说进入标准的通过使用presets"es2015", "es2016", "es2017",即可但是npm install安装的时候才发现

上面提示说presetes2015, es2016, es2017已经被Babel官方给废弃掉了。官方推荐使用babel-preset-env

引用Babel官网的一句话

在没有任何配置选项的情况下,babel-preset-env 与 babel-preset-latest(或者babel-preset-es2015,babel-preset-es2016和babel-preset-es2017一起)的行为完全相同

即:

// .babelrc
{presets: ["es2015","es2016","es2017"]
}
等同于
.babelrc
{"presets": ["env"]
}

是不是很方便只需要使用env一个就可以替换掉很多复杂的配置,更多配置详见官网配置

Stage-x(阶段)

stage-x和上面的es2015等有些类似,但是它是按照JavaScript的提案阶段区分的,一共有5个阶段。而数字越小,阶段越靠后,存在依赖关系。也就是说stage-0是包括stage-1的

stage-4

已完成的提案,与年度发布的release有关,包含2015年到明年正式发布的内容。例如,现在是2016年,stage-4应该是包括es2015,es2016,es2017。经过测试,babel-preset-stage-4这个npm包是不存在的,如果你单纯的需要stage-4的相关方法,需要引入es2015~es2017的presets

stage-0/1/2/3

那么stage-0/1/2/3es2015+的共同点在哪里呢?
stage-x是按照阶段提出来的,到了某一个阶段之后提出一些新的特性有些进入了ECMA Script的标准,所以就被Babel团队加入到了es2015+也就是babel-perset-env中了,但是有些还没有进入标准,例如上面提到的@修饰器, ...拓展运算符, 箭头函数等
既然babel-preset-env的预设中没有这些内容,那么我们只能在.babelrc的配置文件中引入stage-x

// .babelrc
{"presets": ["env","stage-0"]
}

如果引入的预设stage-x过大的话,可以在预设中去掉stage-x转而在Plugin中加入不支持的语法,如:

// .babelrc
{"presets": ["env",],"plugin": ["transform-decorators-legacy", // 转译@修饰器"transform-object-rest-spread" // 转译...拓展运算符”transform-arrow-functions“    // 转译箭头函数]
}

stage-x的参数列表 请参考

该文章参考链接如下:

  1. 如何写好.babelrc
  2. 关于Babel配置项的这点事

PS:以下是我的个人博客小站,欢迎关注哦
戳我戳我

  相关解决方案