babel6使用ES2020最新js语法

最新推荐文章于 2025-06-26 08:41:13 发布

原创

最新推荐文章于 2025-06-26 08:41:13 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

#javascript #babel #es2020

本文介绍了如何在Babel6环境中使用ES2020语法，包括升级Babel到7、安装特定插件的方法，以及常用的ES2020新增语法如可选链操作符和空位合并运算符的配置。

在这里插入图片描述

babel6使用ES2020最新js语法

Babel 6 原本是不支持 ES2020 语法，因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法，您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可选链操作符,就要配置使用 @babel/plugin-proposal-optional-chaining。

ES2020新增语法

这里只列出我们最常用,也最好用的语法

1. 可选链操作符

const obj = {
   
   };

// 老语法
let second = obj && obj.first && obj.first.second;

//es2020可选链语法
let second = obj?.first?.second;

2. 空位合并运算符

// 老语法
//这两种方式有个明显的弊端，它都会覆盖所有的假值，如(0, '', false)，这些值可能是在某些情况下有效的输入
let c = a ? a : b // 方式1
let c = a || b // 方式2

//es2020
// ??的左侧运算符求值为 undefined 或 null，才返回其右侧默认值
let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;

方式一: 升级babel7(推荐)

1. 使用Babel升级工具

不要手动升级,因为不同babel版本依赖不同的node和webpack版本,借助工具可以自动匹配对应版本.比如我项目中使用的是webpack4和node12,工具就会自动安装babel-loader8版本,不会安装最新的v9.

# 不安装，直接使用npx来执行
npx babel-upgrade --write

# 或是安裝 babel-upgrade 在 global 並執行
npm i -g babel-upgrade
babel-upgrade --write

执行命令后, package.json 中移除了旧版本的依赖，自动新增了新版依赖，

+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-jsx"