vue升级Babel支持可选链和合并空值运算符

一、babel
作用: (我偷懒了,直接用官网介绍) Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
据我所知, 无论是webpack项目还是vite项目都需要使用到babel来编译(.vue)文件。=> vite3支持jsx语法了也要用到babel
这里给个官网链接,大家去瞅瞅(babel中文文档)

二、可选链和合并控制运算符
这两个是es2020推出新特性 balabalabala 不多逼逼, 既然来看这篇文章了也说明你知道这两个咋用

三、使用
1、升级babel

npx babel-upgrade --write

//babel7以上才支持这两个操作符插件的安装与使用
//查看当前版本, 低了升级一下
2、安装两个操作符

npm install --save-dev @babel/plugin-proposal-optional-chaining //可选链
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator //合并操作符

3、在babel.config.js文件中引入
//有这文件就把下面plugins复制进去, 没有就新建一个, 将内容都复制进去

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
'@babel/plugin-proposal-optional-chaining' ,// 可选链
'@babel/plugin-proposal-nullish-coalescing-operator'//双问号
]
}

4、可以到代码里面尽情体验了

四、总结与注意点
1) 升级前看下babel版本低于babel7的安装了也没用
2) ?.不支持在template中使用(惊不惊喜, 意不意外呐)
五、优化
//更多时候我们使用?.肯定是要支持在template中使用的, 比如在页面中要展示一个变量,然后这个变量嵌套了很多层次,我们在vue数据初始化的时候肯定不能一级一级的写上去, 那就需要我们改造一下工具

//methods中定义方法也可以在混入组件中定义

const text_filter = function (string, tips = "暂无信息") {
string = string.replace(/\[/gi, ".").replace(/\]/gi, "");
let arr = string.split(".");
let currentItem = null;
let e = arr.every((item) => {
return (currentItem = currentItem ? currentItem?.[item] : this?.[item]);
});
return e ? currentItem : tips;
}

//template使用传入对应的取值地址: string

<van-row class="item_mindDesc">{{ text_filter("detail.childrens[0].mindDesc") }}</van-row>

其他可玩的ES新特性(实验阶段)
通过babel的官网, 我们可以看到babel支持的"ES新特性" 参考: babeljs.io/docs/en/plu…

挑几个有意思的说明下, 其他的大家可以自行看下官网说明:

@babel/plugin-proposal-nullish-coalescing-operator
"非undefined且非null"判断

var object1 = {}
var foo = object1.foo ?? "default"; // "default"

var nl = null;
var res = nl ?? 1 // 2

@babel/plugin-proposal-logical-assignment-operators
短路符判断后赋值的简写.

let a = false;
a ||= 1; // 1

编译后的代码是这样的:

var a = false;
a || (a = 1);

@babel/plugin-proposal-function-bind
用"::"符号来代替"bind", "call"语法.

obj::func
// 等价 func.bind(obj)

::obj.func
// 等价 obj.func.bind(obj)

obj::func(val)
// 等价 func.call(obj, val)

::obj.func(val)
// 等价 obj.func.call(obj, val)

$('.some-link').on('click', ::view.reset);
// 等价 $('.some-link').on('click', view.reset.bind(view));

复杂点的例子:

const { map, filter } = Array.prototype;

let sslUrls = document.querySelectorAll('a')
::map(node => node.href)
::filter(href => href.substring(0, 5) === 'https');

@babel/plugin-proposal-partial-application
函数科里化

function add(x, y) { return x + y; }
const addOne = add(1, ?); // 返回函数addOne
addOne(2); // 3

@babel/plugin-proposal-private-methods
私有属性关键词"#"

class Counter extends HTMLElement {
#xValue = 0;

get #x() { return this.#xValue; }
set #x(value) {
this.#xValue = value;
window.requestAnimationFrame(
this.#render.bind(this));
}

#clicked() {
this.#x++;
}
}

其他特性
其他特性可能在业务代码中不常用(大神们可能常用, 但是大神也不用看我写文章学这些)就不在此介绍了, 有兴趣大家可以看下bebal实验特性.