Babel 踩坑总结(三) —— 7.X 版本升级

刺骨的言语ヽ痛彻心扉 2022-02-22 13:22 214阅读 0赞

Babel 7 已于去年发布，作为 Babel 的使用者，是不能停止对它的新版本的学习和研究的，首先来看一下 Babel 7 作出了哪些重大的改变

### 1. 废除 stage-x presets ###

`stage-x` 原本是对应于 **ECMA Script 提案**的不同阶段，不同阶段有着不同的特性，`stage-x` 预设事实上就是对应这些特性转译的**插件集合**，比如我们最常用的 `babel-preset-stage-0`：

module.exports = { 
      presets: [
        require("babel-preset-stage-1")
      ],
      plugins: [
        require("babel-plugin-transform-do-expressions"),
        require("babel-plugin-transform-function-bind")
      ]
    };

在 `stage-1` 的基础上，新添了两个插件，同样 `stage-1` 包含 `stage-2`，`stage-2` 包含 `stage-3`…

为了在项目用上尽可能多的特性，大部分使用者并不考虑其中究竟用了哪些插件，直接使用 `babel-preset-stage-0`

在 React 项目中，我们最经常看到的 `.babelrc` 配置是这样的：

{ 
      "presets": [
        "env",
        "react",
        "stage-0"
      ]
    }

不过 `stage-x` 提供的是**提案**特性的转译，这里需要强调**提案**这个概念

提案是一直在变化的，如今是 `stage-0` 的特性，之后可能就会转入 `stage-1`，也有一些实验性质的特性，在未来可能会被废除不会进入 ECMA Script 规范中

如果 Babel 更新这些 `stage-x`，在现阶段大量的前端项目、npm 库都在使用 stage-x，由于提案的不确定性，会不会突然某天发现不能编译某个特性了呢？这是有一定风险的。

由于开发者已经习惯了 `stage-x` 的配置，对**插件集合**封装了哪些插件已不再关心，因此为了明确 Babel 插件的边界，Babel 官方决定废除 `stage-x`

> 详情可查看[官方博客][Link 1]

### 2.废除 babel-preset-es201x ###

`babel-preset-env` 已经发布了很长时间了，这里不做过多介绍详情可查看[官方手册][Link 2]

简单说 `babel-preset-env` 集成了以下的 preset

*  babel-preset-es2015
 *  babel-preset-es2016
 *  babel-preset-es2017
 *  babel-preset-latest

### 3. 7.X的配置 ###

其实和 6.X 版本相差不大，就是插件的名称发生了一些变化，以 React 项目举例

> 详情参考[官方手册][Link 3]，此外还有原来 `babel-runtime`、`babel-polyfill` 的配置与 6.X 类似，没什么需要特别注意的地方，自行翻阅手册

npm install -D @babel/core @babel/preset-env

.babelrc

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

此外，因为废除了 `stage-x` 需要自行安装用到的插件，报了啥错装啥插件，Babel 的错误提示都很详细

[Link 1]: https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
[Link 2]: https://babeljs.io/docs/en/next/babel-preset-env.html
[Link 3]: https://babeljs.io/docs/en/usage

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 python版本升级流程，升级2.7跟3.x版本流程一样

前言：　　目前python2.6版本很多库已经不支持，在安装库的时候总会遇到很多装不上的事故，特别烦恼，所以以后不纠结，直接升级python版本后再使用，避免多次采坑；当然

àì夳堔傛蜴生んèń/ 2023年08月17日 15:21/ 0 赞/ 100 阅读

相关 CentOS 7.x安装Google Chrome踩坑指南

CentOS 7.x安装Google Chrome踩坑指南转载：[https://www.pmssw.com/210.html][https_www.pmssw.com

Bertha 。/ 2022年12月26日 10:11/ 0 赞/ 131 阅读

相关 babel@7.x核心概念

babel核心概念 babel已经推出7.x版本，与babel紧密关联的`core-js`也推出了3.x版本，与`babel7.x`和`core-js3.x`对应的是`b

男娘i/ 2022年11月28日 00:45/ 0 赞/ 270 阅读

相关 Centos7.x 升级svn版本到指定版本

为什么要升级？在测试过程中为了进行代码diff，需要使用svn的一些命令来进行自动化操作，发现本地和服务器的版本不一致，且服务器svn client的版本过低，导致执行命令报

╰半夏微凉°/ 2022年09月12日 06:47/ 0 赞/ 214 阅读

相关微信踩坑总结

其实微信真的已经做了很久了，一直以为很快会结束，结果后面改需求，我自己调试，弄了很久了，如今是真的要结束了。。。刚开始做的时候弄了老半天，一直以为是自己订阅号的原因，结果发

ゝ一纸荒年。/ 2022年05月29日 01:12/ 0 赞/ 199 阅读

相关 Babel 7 项目升级实战

前言 Babel可以说是目前前端工程中必备的一款工具链（除非你还在用ES6以前的语法），主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼

àì夳堔傛蜴生んèń/ 2022年03月14日 13:46/ 0 赞/ 175 阅读

相关 Babel 踩坑总结(三) —— 7.X 版本升级

Babel 7 已于去年发布，作为 Babel 的使用者，是不能停止对它的新版本的学习和研究的，首先来看一下 Babel 7 作出了哪些重大的改变 1. 废除 stage-

刺骨的言语ヽ痛彻心扉/ 2022年02月22日 13:22/ 0 赞/ 215 阅读

相关 Babel 踩坑总结(二) —— babel-polyfill、babel-runtime 的选择

此篇来解决上篇提出的问题，官方给出`babel-polyfill` 和 `babel-runtime` 两种解决方案来解决这种全局对象或全局对象方法不足的问题 1. bab

古城微笑少年丶/ 2022年02月22日 12:56/ 0 赞/ 751 阅读

相关 Babel 踩坑总结(一) —— 6.X 版本配置及概念理解

今天闲来无事试着从头构建一个前端项目，光 babel 就遇到不少问题，尤其是在 babel 升级到 7.X 版本之后，许多之前的配置都要发生一些变化，在这里做一个踩坑总结

快来打我*/ 2022年02月22日 12:56/ 0 赞/ 349 阅读

相关个人总结-乱七八糟踩坑

错误集锦 tomcat tomcat无法启动：注释远程调试 `tomcat/bin/catalina.sh` 中的 `CATALINA_OPTS="-Xde

た入场券/ 2022年01月10日 08:05/ 0 赞/ 253 阅读