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實驗特性.