+ // do some stuff
+ },
+ });
所有函数表达都会走到 FunctionExpression
中,然后我们可以在里面对其进行修改。其中参数 path
用于访问到当前的节点信息 path.node
,也可以像 DOM 树访问到父节点的方法 path.parent
。
修改当前节点的 AST
好了,接下来要做的是在 FunctionExpression
中去劫持函数的内部代码,然后将其放入 try 函数内,并且在 catch 内加入错误上报 sdk 的代码段。
获取函数体内部代码
上面定义的函数是
var fn = function() {
console.log(111)
}
那么函数内部的代码块就是 console.log(111)
,可以使用 path
拿到这段代码的 AST 信息,如下:
const parser = require(“@babel/parser”);
const traverse = require(“babel-traverse”).default;
// mock 待改造的源码
let source = `var fn = function(n) {
console.log(111)
}`;
// 1、解析
let ast = parser.parse(source, {
sourceType: “module”,
plugins: [“dynamicImport”]
});
// 2、遍历
traverse(ast, {
FunctionExpression(path, state) { // 函数表达式会进入当前方法
+ // 获取函数当前节点信息
+ var node = path.node,
+ params = node.params,
+ blockStatement = node.body,
+ isGenerator = node.generator,
+ isAsync = node.async;
+ // 可以尝试打印看看结果
+ console.log(node, params, blockStatement);
},
});
终端执行 node src/index.js
,可以打印看到当前函数的 AST 节点信息。
创建 try/catch 节点(两步骤)
创建一个新的节点可能会稍微陌(fu)生(za)一点,不过我已经为大家总结了我个人的经验(仅供参考)。首先需要知道当前新增代码段它的声明是什么,然后使用 @babel-types
去创建即可。
第一步:
那么我们如何知道它的表达声明type是什么呢?这里我们可以 使用 astexplorer 查找它在 AST 中 type 的表达。如上截图得知,try/catch 在 AST 中的 type 就是
TryStatement
!
第二步:
然后去 @babel-types 官方文档查找对应方法,根据 API 文档来创建即可。如文档所示,创建一个 try/catch 的方式使用
t.tryStatement(block, handler, finalizer)
。
创建新的ast节点一句话总结:使用 astexplorer 查找你要生成的代码的 type,再根据 type 在 @babel-types
文档查找对应的使用方法使用即可!
那么创建 try/catch 只需要使用 t.tryStatement(try代码块, catch代码块)
即可。
-
try代码块
表示 try 中的函数代码块,即原先函数 body 内的代码console.log(111)
,可以直接用path.node.body
获取; -
catch代码块
表示 catch 代码块,即我们想要去改造进行错误收集上报的 sdk 的代码ErrorCapture(error)
,可以使用 @babel/template 去生成。
代码如下所示:
const parser = require(“@babel/parser”);
const traverse = require(“babel-traverse”).default;
const t = require(“babel-types”);
const template = require(“@babel/template”);
// 0、定义一个待处理的函数(mock)
let source = `var fn = function() {
console.log(111)
}`;
// 1、解析
let ast = parser.parse(source, {
sourceType: “module”,
plugins: [“dynamicImport”]
});
// 2、遍历
traverse(ast, {
FunctionExpression(path, state) { // Function 节点
var node = path.node,
params = node.params,
blockStatement = node.body, // 函数function内部代码,将函数内部代码块放入 try 节点
isGenerator = node.generator,
isAsync = node.async;
+ // 创建 catch 节点中的代码
+ var catchStatement = template.statement(ErrorCapture(error)
)();
+ var catchClause = t.catchClause(t.identifier(‘error’),
+ t.blockStatement(
+ [catchStatement] // catchBody
+ )
+ );
+ // 创建 try/catch 的 ast
+ var tryStatement = t.tryStatement(blockStatement, catchClause);
}
});
创建新函数节点,并将上面定义好的 try/catch
塞入函数体:
const parser = require(“@babel/parser”);
const traverse = require(“babel-traverse”).default;
const t = require(“babel-types”);
const template = require(“@babel/template”);
// 0、定义一个待处理的函数(mock)
let source = `var fn = function() {
console.log(111)
}`;
// 1、解析
let ast = parser.parse(source, {
sourceType: “module”,
plugins: [“dynamicImport”]
});
// 2、遍历
traverse(ast, {
FunctionExpression(path, state) { // Function 节点
var node = path.node,
params = node.params,
blockStatement = node.body, // 函数function内部代码,将函数内部代码块放入 try 节点
isGenerator = node.generator,
isAsync = node.async;
// 创建 catch 节点中的代码
var catchStatement = template.statement(ErrorCapture(error)
)();
var catchClause = t.catchClause(t.identifier(‘error’),
t.blockStatement(
[catchStatement] // catchBody
)
);
// 创建 try/catch 的 ast
var tryStatement = t.tryStatement(blockStatement, catchClause);
+ // 创建新节点
+ var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);
+ // 打印看看是否成功
+ console.log(‘当前节点是:’, func);
+ console.log(‘当前节点下的自节点是:’, func.body);
}
});
此时将上述代码在终端执行 node src/index.js
:可以看到此时我们在一个函数表达式 body 中创建了一个 try 函数(TryStatement)。最后我们需要将原函数节点进行替换:
const parser = require(“@babel/parser”);
const traverse = require(“babel-traverse”).default;
const t = require(“babel-types”);
const template = require(“@babel/template”);
// 0、定义一个待处理的函数(mock)
let source = `var fn = function() {…
// 1、解析
let ast = parser.parse(source, {…
// 2、遍历
traverse(ast, {
FunctionExpression(path, state) { // Function 节点
var node = path.node,
params = node.params,
blockStatement = node.body, // 函数function内部代码,将函数内部代码块放入 try 节点
isGenerator = node.generator,
isAsync = node.async;
// 创建 catch 节点中的代码
var catchStatement = template.statement(ErrorCapture(error)
)();
var catchClause = t.catchClause(t.identifier(‘error’),…
// 创建 try/catch 的 ast
var tryStatement = t.tryStatement(blockStatement, catchClause);
// 创建新节点
var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);
+ // 替换原节点
+ path.replaceWith(func);
}
});
+ // 将新生成的 AST,转为 Source 源码:
+ return core.transformFromAstSync(ast, null, {
+ configFile: false // 屏蔽 babel.config.js,否则会注入 polyfill 使得调试变得困难
+ }).code;
“A loader is a node module exporting a function”,也就是说一个 loader 就是一个暴露出去的 node 模块,既然是一个node module,也就基本可以写成下面的样子:
module.exports = function() {
// …
};
再编辑 src/index.js 为如下截图:
边界条件处理
我们并不需要为所有的函数都增加 try/catch,所有我们还得处理一些边界条件。
-
1、如果有 try catch 包裹了
-
2、防止 circle loops
-
3、需要 try catch 的只能是语句,像 () => 0 这种的 body
-
4、如果函数内容小于多少行数
满足以上条件就 return 掉!代码如下:
if (blockStatement.body && t.isTryStatement(blockStatement.body[0])
|| !t.isBlockStatement(blockStatement) && !t.isExpressionStatement(blockStatement)
|| blockStatement.body && blockStatement.body.length <= LIMIT_LINE) {
return;
}
最后我们发布到 npm 平台 使用。由于篇幅过长不易阅读,本文特别的省略了本地调试过程,所以需要调试请移步 【利用AST自动为函数增加错误上报-续集】有关 npm 包的本地开发和调试。
如何使用
npm install babel-plugin-function-try-catch
webpack 配置
rules: [{
test: /.js$/,
exclude: /node_modules/,
use: [
+ “babel-plugin-function-try-catch”,
“babel-loader”,
]
}]
效果见如下图所示:
最后
–
有关 npm 包的本地调试见下篇: 有关 npm 包的本地开发和调试:https://juejin.im/post/6888493557716353032/
更多 AST 相关请关注后面分享,谢谢。
Reference:
完整代码地址请点击:https://github.com/allan2coder/babel-plugin-function-try-catch
Babel 插件手册点击:https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md
点个『在看』支持下
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;
习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!**
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-57WgCZtz-1711898115044)]
总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;