如何通過babel配置使用可選鏈?.和雙問號(hào)??
什么是可選鏈
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
當(dāng)訪問多層對(duì)象屬性(如o.a.b)時(shí)钝凶，如果屬性a為空娜庇，則會(huì)報(bào)引用錯(cuò)誤
為此我們不得不這么處理：
const c = o.a && o.a.b ? o.a.b : undefined
有了可選鏈炫贤，就可以對(duì)一個(gè)為null或者undefined屬性安全引用：
const o = {}
const tryA_B = o?.a?.b
console.log(tryA_B) // undefined
什么是雙問號(hào)
value1 ?? value2
??在value1和value2之間再登，只有當(dāng)value1為null或者 undefined時(shí)取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版本升級(jí)的問題沽损。
如果是babel7以上的版本灯节，可以添加以下2個(gè)devDependencies依賴：
@babel/plugin-proposal-optional-chaining // 可選鏈
@babel/plugin-proposal-nullish-coalescing-operator // 雙問號(hào)
然后在.babelrc或者babel.config.js中這加入2個(gè)插件(plugins屬性放在JSON頂層)：
{
"plugins": [
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining"
]
}
之后就可以愉快地使用了！
最簡(jiǎn)實(shí)踐
為了檢驗(yàn)插件是否真的有用缠俺，這里提供一個(gè)最小實(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 壹士，不用加別的，可選鏈和雙問號(hào)插件會(huì)根據(jù)你的語法自動(dòng)轉(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);
