babel6使用ES2020最新js语法

在这里插入图片描述

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": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-loader": "^8.0.0",
-    "babel-preset-env": "^1.6.1",

2. 删除node_modules,重新安装依赖

# 删除node_module
rm -rf node_modules
# 重新安装
npm i

3. 修改配置文件`.babelrc`

// 原.babelrc文件
{"presets": [["env", {"loose": true,"debug": false,"useBuiltIns": true,"targets": {"browsers": [ "ie > 8", "last 2 version", "safari >= 9" ]},"production": {"plugins": ["transform-remove-console"]}}]],"plugins": [[ "transform-runtime", {"helpers": false,"polyfill": false,"regenerator": true } ],[ "transform-class-properties", { "spec": true } ],[ "transform-object-rest-spread", { "useBuiltIns": true } ],[ "transform-vue-jsx" ],[ "syntax-dynamic-import" ]],"comments": false}// 修改后.babelrc文件(其他所有配置都不需要了)
//@babel/preset-env 预设，能根据目标环境自动决定要使用的插件和转换规则，而无需手动安装和配置单个插件
{"presets": [["@babel/preset-env"]]
}

4. 修改webpack配置文件

module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {hotReload: !isProduction},},{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: [{loader: 'babel-loader',options: {cacheDirectory: true,cacheIdentifier: 'babel-loader',//修改这个位置,原来值为'true'修改为'babel-loader'},},],}],},

方式二: 安装指定语法plugin

1. 可选链操作符

1.安装

npm i -D @babel/plugin-proposal-optional-chaining

2.配置.babelrc

{"presets": [["env"]],"plugins": [[ "transform-runtime"],[ "transform-class-properties"],[ "@babel/plugin-proposal-optional-chaining"],//配置[ "transform-object-rest-spread"],[ "transform-vue-jsx" ],[ "syntax-dynamic-import" ]],"comments": false}

2. 空位合并运算符

1.安装

npm i -D @babel/plugin-proposal-nullish-coalescing-operator

2.配置.babelrc

{"presets": [["env"]],"plugins": [[ "transform-runtime"],[ "transform-class-properties"],[ "@babel/plugin-proposal-nullish-coalescing-operator"],//配置[ "@babel/plugin-proposal-optional-chaining"],[ "transform-object-rest-spread"],[ "transform-vue-jsx" ],[ "syntax-dynamic-import" ]],"comments": false}