前端 TypeError 错误永久消失术

let a
a.b.c.d // Uncaught TypeError: Cannot read properties of undefined (reading 'b')
a?.b?.c?.d // undefined

// in
a.b.c.d
a['b']['c']['d']
a && a.b && a.b.c && a.b.c.d


// out
a?.b?.c?.d

import { declare } from '@babel/helper-plugin-utils';
import * as t from '@babel/types';


export default declare((api, options) => {
  // 仅支持 Babel7 
  api.assertVersion(7);


  return {
    // Babel 插件名称
    name: 'babel-plugin-auto-optional-chaining',
    visitor: {
      /**
       * 通过 Babel AST 解析语法后，仅针对以下数据类型做处理
       * - MemberExpression：a.b 或 a['b']
       * - CallExpression：a.b() 或 a['b']()
       * - OptionalMemberExpression：a?.b 或 a?.['b']
       * - OptionalCallExpression：a.b?.() 或 a.['b']?.()
       */
      'MemberExpression|CallExpression|OptionalMemberExpression|OptionalCallExpression'(path) {
        // 避免重复处理
        if (path.node.extra.hasAoc) return;


        // isValidPath：通过 Babel 配置参数决定是否处理该节点
        const isMeCe = path.isMemberExpression() || path.isCallExpression();
        if (isMeCe && !isValidPath(path, options)) return;
        
        
        // 属性获取
        // shortCircuitOptimized：&& 短路表达式优化后再做替换处理
        if (path.isMemberExpression() || path.isOptionalMemberExpression()) {
          const ome = t.OptionalMemberExpression(path.node.object, path.node.property, path.node.computed, true);
          if (!shortCircuitOptimized(path, ome)) {
            path.replaceWith(ome);
          };
        };


        // 方法掉用
        // shortCircuitOptimized：&& 短路表达式优化后再做替换处理
        if (path.isCallExpression() || path.isOptionalCallExpression()) {
          const oce = t.OptionalCallExpression(path.node.callee, path.node.arguments, false);
          if (!shortCircuitOptimized(path, oce)) {
            path.replaceWith(oce);
          };
        };
        
        // 添加已处理标记
        path.node.extra.hasAoc = true;
      }
    }
  };
});

// includes 列表，支持正则
const isIncludePath = (path, includes: []) => {
  return includes.some(item => {
    let op = path.hub.file.code.substring(path.node.start, path.node.end);
    return new RegExp(`^${item}$`).test(op);
  })
};


// excludes 列表，支持正则
const isExcludePath = (path, excludes: []) => {
  // 忽略：excludes 列表，支持正则
  return excludes.some(item => {
    let op = path.hub.file.code.substring(path.node.start, path.node.end);
    return new RegExp(`^${item}$`).test(op);
  })
};


// 校验配置参数
const isValidPath = (path, {includes, excludes}) => {
  // 如果配置了 includes，仅处理 includes 匹配的节点
  if (includes?.length) {
    return isIncludePath(path, includes);
  }


  // 如果配置了 excludes，则不处理 excludes 匹配的节点
  if (includes?.length) {
    return !isExcludePath(path, includes);
  }


  // 默认全部处理
  return true;
}

const shortCircuitOptimized = (path, replaceNode) => {
  // 支持添加参数 optimizer=false 关闭优化
  if (options.optimizer === false) return false;


  const pc = path.container;


  // 判断是否逻辑操作 && 
  if (pc.type !== 'LogicalExpression') return false;


  // 只处理 a && a.b 中的 a.b
  if (pc.type === 'LogicalExpression' && path.key === 'left') return false;


  // 递归寻找上一级是否逻辑表达式，即：a && a.b && a.b.c
  const pp = path.parentPath;
  if (pp.isLogicalExpression() && path.parent.operator === '&&'){
    let ln = pp.node.left;
    let rn = pp.node.right?.object ?? pp.node.right?.callee ?? {};


    const isTypeId = type => 'Identifier' === type;
    const isValidType = type => [
      'MemberExpression',
      'OptionalMemberExpression',
      'CallExpression',
      'OptionalCallExpression'
    ].includes(type);
    const isEqName = (a, b) => {
      if ((a?.name ?? b?.name) === undefined) return false;
      return a?.name === b?.name;
    };


    // 递归处理并替换
    // 如：a && a.b && a.b.c ==> a?.b && a.b.c ==> a?.b?.c
    const getObj = (n, r = '') => {
      const reObj = obj => {
          r = r ? `${obj.name}.${r}` : obj.name;
      };
      isTypeId(n.property?.type) && reObj(n.property);
      isTypeId(n.object?.type) && reObj(n.object);
      isTypeId(n.callee?.type) && reObj(n.callee);


      if (isValidType(n.object?.type)) {
        return getObj(n.object, r);
      };
      if (isValidType(n.callee?.type)) {
        return getObj(n.callee, r);
      };
      return r;
    };


    // eg：a && a.b
    if (isTypeId(ln.type) && isTypeId(rn.type)) {
      if (isEqName(ln, rn)) {
        return pp.replaceWith(replaceNode);
      }
    };


    // eg：a && a.b | a && a.b.c...
    if (isTypeId(ln.type) && isValidType(rn.type)) {
      const rnObj = getObj(rn);
      if (rnObj.startsWith(ln.name)) {
        return pp.replaceWith(replaceNode);
      }
    };


    // eg：a.b && a.b.c | a.b && a.b.c...
    // 注意：a.b.c && a.b.d 不会被转换
    if (isValidType(ln.type) && isValidType(rn.type)) {
      const lnObj = getObj(ln);
      const rnObj = getObj(rn);
      if (rnObj.startsWith(lnObj)) {
        return pp.replaceWith(replaceNode);
      }
    };
  };
  return false;
};

module.exports = {
  plugins: [
    ['babel-plugin-auto-optional-chaining', {
      excludes: [
        'new .*',       // eg：new a.b() 不能转为 new a.b?.()
        'process.env.*' // 固定短语通过.链接，不做处理
      ],
      // includes: [],
      // optimizer: false
    }]
  ]
}

// 第1步：考虑健壮性，使用本文插件将代码自动转为可选链
a.b ===> a?.b


// 第2步：考虑兼容性，使用 @babel/plugin-transform-optional-chaining 再做反向降级
a?.b ==> a === null || a === void 0 ? void 0 : a.b;

// 常规操作
const x = a.b.c.d
const y = a['b']['c'].d
const z = a.b[c.d].e
if(a.b.c.d){}
switch (a.b.c.d){}
// 特殊操作
(a).b // 括号运算
const w = +a.b.c // 一元运算
// 方法调用
a.b.c.d()
a().b
a.b().c
a.b(c.d).e
fn(a.b.c.d)
fn(a.b, 1)
fn(...a)
fn.a(...b).c(...d)
// 短路表达式优化
// optional member
a && a.b
a && a.b && a.b.c
a.b && a.b.c && a.b.c.d
this.a && this.a.b
this.a.b && this.a.b.c && this.a.b.c.d
this['a'] && this['a'].b
this['a'] && this['a']['b'] && this['a']['b']['c']
this['a'] && this['a'].b && this['a'].b['c']
// optional method
a && a.b()
a && a.b().c
a.b && a.b.c()
a && a.b && a.b.c()
// assign expression
let a = a && a.b
let b = a && a.b && a.b.c && a.b.c.d
let c = a && a.b && a.b.c()
// self is optional chaining
a && a?.b
a && a.b && a?.b?.c
a && a?.b && a?.b?.c
a && a?.b() && a?.b()?.c
// function args
fn(a && a.b)
fn(a && a.b && a.b.c)
// only did option chaining
a.b && b.c
a.b && a.c.d
a.b && a.b.c && a.c.d
a.b.c && a.b.d
a.b.c && a.b
a.b.c.d && a.b.c.e
// not handle
a && b
a && b && c
a || b
a || b || true
// 忽略赋值操作
x.a = 1
x.a.c = 2
// 忽略算术运算
a.b++
++a.b
a.b--
--a.b
// 忽略指派赋值运算
a.b += 1
a.b -= 1
// 忽略 in/of
for (a in b.c.d);
for (bar of b.c.d);
// 忽略 new 操作符
new a.b()
new a.b.c()
new a.b.c.d()
new a().b
new a.b().c.d
// 配置忽略项
process.env.a
process.env.a.b.c
// 忽略 ?. 本身
a?.b
a?.b?.c?.d

// 常规操作
const x = a?.b?.c?.d;
const y = a?.["b"]?.["c"]?.d;
const z = a?.b?.[c?.d]?.e;
if (a?.b?.c?.d) {
}
switch (a?.b?.c?.d) {
}
// 特殊操作
a?.b; // 括号运算
const w = +a?.b?.c; // 一元运算
// 方法调用
a?.b?.c?.d();
a()?.b;
a?.b()?.c;
a?.b(c?.d)?.e;
fn(a?.b?.c?.d);
fn(a?.b, 1);
fn(...a);
fn?.a(...b)?.c(...d);
// 短路表达式优化
// optional member
a?.b;
a?.b?.c;
a?.b?.c?.d;
this.a?.b;
this.a?.b?.c?.d;
this["a"]?.b;
this["a"]?.["b"]?.["c"];
this["a"]?.b?.["c"];
// optional method
a?.b();
a?.b()?.c;
a?.b?.c();
a?.b?.c();
// assign expression
let a = a?.b;
let b = a?.b?.c?.d;
let c = a?.b?.c();
// self is optional chaining
a?.b;
a?.b?.c;
a?.b?.c;
a?.b()?.c;
// function args
fn(a?.b);
fn(a?.b?.c);
// only did option chaining
a?.b && b?.c;
a?.b && a?.c?.d;
a?.b?.c && a?.c?.d;
a?.b?.c && a?.b?.d;
a?.b?.c && a?.b;
a?.b?.c?.d && a?.b?.c?.e;
// not handle
a && b;
a && b && c;
a || b;
a || b || true;
// 忽略赋值操作
x.a = 1;
x.a.c = 2;
// 忽略算术运算
a.b++;
++a.b;
a.b--;
--a.b;
// 忽略指派赋值运算
a.b += 1;
a.b -= 1;
// 忽略 in/of
for (a in b.c.d);
for (bar of b.c.d);
// 忽略 new 操作符
new a.b();
new a.b.c();
new a.b.c.d();
new a().b;
new a.b().c.d;
// 配置忽略项
process.env.a;
process.env.a.b.c;
// 忽略 ?. 本身
a?.b;
a?.b?.c?.d;