如何通過babel配置使用可選鏈?.和雙問號??

什么是可選鏈

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
當(dāng)訪問多層對象屬性(如o.a.b)時，如果屬性a為空，則會報(bào)引用錯誤
為此我們不得不這么處理：

const c = o.a && o.a.b ? o.a.b : undefined

有了可選鏈，就可以對一個為null或者undefined屬性安全引用：

const o = {}

const tryA_B = o?.a?.b
console.log(tryA_B) // undefined

什么是雙問號

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

value1 ?? value2

??在value1和value2之間，只有當(dāng)value1為null或者 undefined時取value2，否則取value1（0,false,""被認(rèn)為是有意義的，所以還是取value1）

const o = {}
const c_or_d = o.c ?? 'd'
console.log(c_or_d) // 'd'
console.log(0 ?? 1) // 0
console.log("" ?? "foo") // ""

等價(jià)于

const c_or_d = (o.c === null || typeof o.c === "undefined") ? o.c : 'd'

如何使用

首先檢查你的項(xiàng)目依賴中的babel版本，如果你的babel版本<7，那么很遺憾，你得先解決babel版本升級的問題。
如果是babel7以上的版本，可以添加以下2個devDependencies依賴：

@babel/plugin-proposal-optional-chaining // 可選鏈
@babel/plugin-proposal-nullish-coalescing-operator // 雙問號

然后在.babelrc或者babel.config.js中這加入2個插件(plugins屬性放在JSON頂層)：

{
 "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

之后就可以愉快地使用了！

最簡實(shí)踐

為了檢驗(yàn)插件是否真的有用，這里提供一個最小實(shí)踐示例：
首先編寫示例代碼 index.js：

var foo = {
    a: 1,
    zero: 0,
}

var fooA = foo.a;
var fooB = foo?.b;
var fooNilValue = foo?.nil?.value;

var fooDefault = foo.default ?? 'default value';
var fooZeroDefault = foo.zero ?? 'zero value';

console.log(fooA); // 1
console.log(fooB); // undefined
console.log(fooNilValue); // undefined
console.log(fooDefault); // default value
console.log(fooZeroDefault); // 0

項(xiàng)目根目錄下初始化npm倉庫 npm init，然后安裝下列依賴(現(xiàn)在是2020年了，默認(rèn)都是7以上的版本)：

npm i --save-dev @babel/cli @babel/core @babel/preset-env

項(xiàng)目根目錄添加配置文件 babel.config.js ，不用加別的，可選鏈和雙問號插件會根據(jù)你的語法自動轉(zhuǎn)義：

module.exports = {
    presets: [
        "@babel/preset-env"
    ]
}

執(zhí)行編譯命令：

npx babel index.js -d dist

構(gòu)建完畢，在./dist/index.js 中看到生成的文件，說明編譯成功：

"use strict";

var _foo$nil, _foo$default, _foo$zero;

var foo = {
  a: 1,
  zero: 0
};
var fooA = foo.a;
var fooB = foo === null || foo === void 0 ? void 0 : foo.b;
var fooNilValue = foo === null || foo === void 0 ? void 0 : (_foo$nil = foo.nil) === null || _foo$nil === void 0 ? void 0 : _foo$nil.value;
var fooDefault = (_foo$default = foo["default"]) !== null && _foo$default !== void 0 ? _foo$default : 'default value';
var fooZeroDefault = (_foo$zero = foo.zero) !== null && _foo$zero !== void 0 ? _foo$zero : 'zero value';
console.log(fooA);
console.log(fooB);
console.log(fooNilValue);
console.log(fooDefault);
console.log(fooZeroDefault);