plugin-proposal-optional-chaining源码分析

前言

书接上文，在前一篇文章中babel插件分析-编写你的第一个插件，对于babel的原理和如何写一个插件进行了大致的分析，这里我们将结合一个官方插件@babel/plugin-proposal-optional-chaining，对babel实现进行深入分析。当前的浏览器还不支持可选链式调用，也就是类似这样的写法：

let a = b?.c;
// or
let cc = a?.b();

即在.操作符前添加一个问号，表示如果?.操作符后的内容如果没法取到，将会直接返回undefined，在日常的开发过程中，这是一个容我们从链式调用地狱中解脱出来的神器，以前处于代码健壮性的考虑，我们常常写出类似这样的代码：

let value = a && a.b && a.b.c && a.b.c.d;

使用了@babel/plugin-proposal-optional-chaining插件后，我们只需这样：

let value = a?.b?.c?.d;

极大优化编程体验。源码是如何实现转化的呢？

源码分析

废话不多说，先上源码

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

function _helperPluginUtils() {
  const data = require("@babel/helper-plugin-utils");

  _helperPluginUtils = function () {
    return data;
  };

  return data;
}

function _pluginSyntaxOptionalChaining() {
  const data = _interopRequireDefault(require("@babel/plugin-syntax-optional-chaining"));

  _pluginSyntaxOptionalChaining = function () {
    return data;
  };

  return data;
}

function _core() {
  const data = require("@babel/core");

  _core = function () {
    return data;
  };

  return data;
}

function _