配置“可选链操作符”(babel插件)

7,668 阅读1分钟

可选链操作符 已纳入规范: developer.mozilla.org/zh-CN/docs/…

好处:方便书写和阅读

// 使用效果:
const obj = {a: {b: {c: 1} } } 
// 我们需要拿到c, 兼容的写法 a && a.b && a.b.c 或 (a || {}).(b || {}).c
// 使用可选链, 配合babel解析, 可以这么写: a?.b?.c
console.log(a?.b?.c) 

配置方法

// 在 package.json 内 , 安装依赖
{
  "devDependencies": {
    "@babel/core": "^7.12.9",(7.0以下的babel包需删除)
    "@babel/plugin-proposal-optional-chaining": "^7.12.7", (依赖babel 7.0以上)
    "babel-loader": "^8.2.2",
    ...
  }
  ...
}

// 新建文件 ".babelrc.js" (在package.json的同级目录下)
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}