前端 TypeError 错误永久消失术
作者：来自 vivo 互联网大前端团队- Sun Maobin通过开发 Babel 插件，打包时自动为代码添加 可选链运算符(?.)，从而有效避免 TypeError 的发生。
一、背景介绍
在 JS 中当获取引用对象为空值的属性时，程序会立即终止运行并报错：TypeError: Cannot read properties of ...
在 ECMAScript 2020 新增的 **可选链运算符(?.)**，当属性值不存在时返回 undefined，从而可有效避免该错误的发生。
let a
a.b.c.d // Uncaught TypeError: Cannot read properties of undefined (reading 'b')
a?.b?.c?.d // undefined本文将分享如何借助这一特性开发 Babel 插件，自动为代码添加 ?.，从而根治系统中的 TypeError 错误。
二、项目痛点
[*]维护中的代码可能存在 TypeError 隐患，数量大维护成本高，比如：存在大量直接取值操作：a.b.c.d
[*]在新代码中使用 ?. 书写起来太繁琐，同时也导致源码不易阅读，比如：a?.b?.c?.d
因此，如果我们只要在打包环节自动为代码添加 ?.，就可以很好解决这些问题。
三、解决思路
开发 Babel 插件 在打包时进行代码转换：
[*]将存在隐患的操作符 . 或 [] 转换为 ?.
[*]将臃肿的短路表达式 && 转换为 ?.
// in
a.b.c.d
a['b']['c']['d']
a && a.b && a.b.c && a.b.c.d
// out
a?.b?.c?.d四、目标价值
通用于任何基于 Babel 的 JS 项目，在源码 0 改动的情况下，彻底消灭 TypeError 错误。
五、功能实现
5.1 Babel 插件核心
[*]识别代码中可能存在 TypeError 的风险操作：属性获取 和 方法调用
[*]支持自定义 Babel 参数配置，includes 或 excludes 代码转换规则
[*]短路表达式 && 自动优化
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;
}
}
};
});5.2 Babel 参数配置
支持 includes 和 excludes 两个参数，决定自动处理的代码 ?. 的策略。
[*]includes - 仅处理指定代码片段
[*]excludes - 排除指定代码片段不做处理
// 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;
}5.3 短路表达式优化
支持添加参数 optimizer=false 关闭优化
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;
};六、插件应用
配置 babel.config.js 文件。
支持3个配置项：
[*]includes - 仅处理指定代码片段（优先级高于 excludes）
[*]excludes - 排除指定代码片段不做处理
[*]optimizer - 如果设置为 false 则关闭优化短路表达式 &&
module.exports = {
plugins: [
['babel-plugin-auto-optional-chaining', {
excludes: [
'new .*', // eg：new a.b() 不能转为 new a.b?.()
'process.env.*' // 固定短语通过.链接，不做处理
],
// includes: [],
// optimizer: false
}]
]
}七、不足之处
自动为代码添加 ?. 可能会导致打包后文件体积略微增加，从而影响页面访问速度。
八、相关插件
对于不支持 可选链运算符 (?.) 的浏览器或者版本（如：Chrome a?.b// 第2步：考虑兼容性，使用 @babel/plugin-transform-optional-chaining 再做反向降级a?.b ==> a === null || a === void 0 ? void 0 : a.b;九、插件测试
以下是一些测试用例仅供参考，使用 babel-plugin-tester 进行测试。
Input 输入用例：
// 第1步：考虑健壮性，使用本文插件将代码自动转为可选链
a.b ===> a?.b
// 第2步：考虑兼容性，使用 @babel/plugin-transform-optional-chaining 再做反向降级
a?.b ==> a === null || a === void 0 ? void 0 : a.b;Out 结果输出：
// 常规操作
const x = a.b.c.d
const y = a['b']['c'].d
const z = a.b.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十、写在最后
本文通过介绍如何开发一个 Babel 插件，在打包时自动为代码添加 **可选链运算符(?.)**，从而有效避免 JS 项目 TypeError 的发生。
希望这个思路能够有效的提升大家项目的健壮性和稳定性。
十一、参考资料
[*]tc39/proposal-optional-chaining
[*]可选链运算符（?.）
[*]Babel插件手册
[*]Babel's optional chaining AST spec
[*]ESTree
[*]eslint/no-unsafe-optional-chaining
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]