本文摘要：在前端开发中，Babel用于将ES6+语法转换为ES5，其配置文件如.babelrc、babel.config.js等用于设置转换规则。核心在于配置插件（plugins）和预设（presets），例如@babel/preset-env预设包含了指定时间点前所有stage4阶段的ES新特性转换插件。执行时，插件先于预设执行，并遵循特定顺序。插件和预设可设置参数以进行详细配置，同时支持简写形式。针对Babel 6的混乱预设情况，@babel/preset-env是Babel 7推荐的统一解决方案，替代了es20xx、stage-x和latest等预设。

转载文章

本篇文章为转载内容。原文链接：https://blog.csdn.net/douyinbuwen/article/details/123729828。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

一、配置文件

几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5，转换工具要么使用babel-cli，要么使用webpack的babel-loader，不管使用哪种转换工具，通常都需要一个配置文件来建立转换规则（也可以在webpack的babel-loader的配置项，原理都一样）。

babel执行时默认从当前目录查找配置文件，支持的配置文件格式有：.babelrc，.babelrc.js，babel.config.js和package.json。它们的配置项都是相同，作用也是一样的，只需要选择其中一种，推荐使用.js结尾的文件，这样可以在配置文件中进行编程控制,如下：

module.exports = function (api) {api.cache(true);const presets = [ ... ];const plugins = [ ... ];return {presets,plugins};
}

也可以直接使用module.exports = {}，没有必要一定是一个function。

在编写配置文件中，最主要的就是设置plugins(插件)和presets(预设)，每个插件或预设都是一个npm包，插件和预设会在编译过程中把我们的ES6+代码转换成ES5。

二、插件和预设的关系

babel中的插件太多，以es2015为例：

@babel/plugin-transform-arrow-functions
@babel/plugin-transform-block-scoped-functions
@babel/plugin-transform-block-scoping
....

如果只采用插件的话，我们需要配置非常多的插件数组，如果项目使用了es2016又得增加一堆，而且我们压根也记不住哪个es版本里该使用哪些插件。

preset就是解决这个问题的，它是一系列插件的集合，以@babel/preset-env为例，假设项目中安装的npm包版本是2020年1月发布的，那么这个预设里包含了2020年1月以前所有进入到stage4阶段的语法转换插件。

可能有小伙伴会问，假如我设置了一个语法插件，指定某个预设里又包含了插件，此时会发生什么？这就涉及到插件和预设的执行顺序了，具体的规则如下：

插件比预设先执行
插件执行顺序是插件数组从前向后执行
预设执行顺序是预设数组从后向前执行

三、插件和预设的参数

不配置参数的情况下，每个插件或预设都是数组中的一个字符串成员，例：preset:["@babel/preset-env","@babel/preset-react"]，如果某个插件或预设需要配置参数，成员项就需要由字符串换成一个数组，数组的第一项是插件或预设的名称字符串，第二项为对象，该对象用来设置插件或预设的参数，格式如下：

  {"presets": [["@babel/preset-env",{"useBuiltIns": "entry"}]]}

四、插件和预设的简写

插件或可以在配置文件里用简写名称，如果插件的npm包名称的前缀为 babel-plugin-，可以省略前缀。例如"plugins": ["babel-plugin-transform-decorators-legacy"]可以简写为"plugins": ["transform-decorators-legacy"]。

如果npm包名称的前缀带有作用域@，例如@scope/babel-plugin-xxx,短名称可以写成@scope/xxx。

到babel7版本时，官方的插件大多采用@babel/plugin-xxx格式的，没有明确说明是否可以省略@babel/plugin-，遇到这中npm包时，最好还是采用全称写法比较稳妥。

预设的短名称规则跟插件差不多，前缀为babel-preset-或带有作用域的包@scope/babel-preset-xxx的可以省略掉babel-preset-。

babel7里@babel/preset-前缀开头的包，例如@babel/preset-env的短名称是@babel/env，官方并没有给出明确说明以@babel/preset-xxx卡头的包是否都可以采用简写，因此最好还是采用全称。

五、混乱的babel6预设

如果直接接触babel7的前端同事都知道es预设直接用@babel/preset-env就行了，但是如果要维护和迭代基于babel6的项目呢？各个项目中使用的可能都不一样，babel-preset-es20xx、babel-preset-stage-x、babel-preset-latest这些预设是啥意思？

babel-preset-es20xx: TC39每年发布的、进入标准的ES语法转换器预设，最后一个预设是babel-preset-es2017，不再更新。

babel-preset-stage-x： TC39每年草案阶段的ES语法转换器预设。x的值是0到3，babel7时已废弃，不再更新。

babel-preset-latest： TC39每年发布的、进入标准的ES语法转换器预设。在babel6时等于babel-preset-es2015、babel-preset-es2016、babel-preset-es2017。该包从 v2 开始，需要@babel/core@^7.0.0，也就是需要babel7才能使用，既然要升级到babel7，不如使用更加强大的@babel/preset-env。

本篇文章为转载内容。原文链接：https://blog.csdn.net/douyinbuwen/article/details/123729828。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

Babel：Babel 是一个广泛使用的 JavaScript 编译器，主要用于将 ECMAScript 6（ES6）及更高版本的现代JavaScript语法转换为向后兼容的JavaScript语法，以便在不支持新特性的旧版浏览器或环境中运行。

插件 (Plugins)：在Babel中，插件是一种可扩展机制，用于处理特定的代码转换任务。开发者可以针对不同类型的ES6+新特性或自定义需求编写插件，当Babel执行编译时，这些插件会按照指定顺序应用到源代码上，实现从高级语法到低级语法的转换。

预设 (Presets)：预设是Babel中一组预先配置好的插件集合，它们通常围绕某个特定的目标或规范进行组织。比如@babel/preset-env预设就包含了对最新稳定版ECMAScript特性的转换插件集合。通过引入预设，开发人员无需逐一安装和配置每个插件，简化了Babel的配置过程，并确保了对目标环境的广泛兼容性。

TC39：TC39是Ecma International下属的技术委员会，负责制定和维护JavaScript语言的标准，即ECMAScript规范。每年，TC39会对新的JavaScript提案进行讨论、试验和标准化，提案分为不同的成熟度阶段，最终达到stage 4阶段的特性会被纳入下一版本的ECMAScript标准。

Stage-x：在Babel 6及之前版本中，Stage-x预设对应于TC39提出的不同成熟度阶段的JavaScript提案，例如stage-0表示提案处于试验阶段，stage-3表示提案已接近完成。随着Babel的更新，这种基于提案阶段的预设已被废弃，转而推荐使用@babel/preset-env来按需转换已进入stage 4阶段的特性。