[AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression
Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html
Now we need to think about functionExpression and ArrowFunction:
- function add(a, b) {
- console.log(a, b)
- return a + b
- }
- function subtract(a, b) {
- console.log(a, b)
- return a - b
- }
- const multiply = (a, b) => {
- console.log(a, b)
- return a * b;
- }
- const divide = function(a, b) {
- console.log(a, b)
- return a / b;
- }
- add(, )
- subtract(, )
- multiply(, )
- divide(, )
- console.log('sup dawg')
Transform code:
- export default function(babel) {
- const { types: t } = babel;
- function getFnName(path) {
- const expOrArwFn = path.findParent(t.isVariableDeclaration);
- const parentFn = path.findParent(t.isFunctionDeclaration);
- let faName = "";
- if (parentFn) {
- faName = `${parentFn.node.id.name} `;
- } else if (expOrArwFn) {
- faName = `${expOrArwFn.node.declarations[].id.name} `;
- } else {
- faName = "";
- }
- return faName;
- }
- return {
- name: "ast-transform", // not required
- visitor: {
- CallExpression(path) {
- if (
- !looksLike(path.node, {
- callee: {
- type: "MemberExpression",
- object: {
- name: "console"
- },
- property: {
- name: "log"
- }
- }
- })
- ) {
- return;
- }
- // insert string into console.log('instread here', a,b)
- const { line, column } = path.node.loc.start;
- const fnName = getFnName(path);
- const prefix = fnName + `${line}:${column}`;
- path.node.arguments.unshift(t.stringLiteral(prefix));
- }
- }
- };
- }
- function looksLike(a, b) {
- return (
- a &&
- b &&
- Object.keys(b).every(bKey => {
- const bVal = b[bKey];
- const aVal = a[bKey];
- if (typeof bVal === "function") {
- return bVal(aVal);
- }
- return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal);
- })
- );
- }
- function isPrimitive(val) {
- return val == null || /^[sbn]/.test(typeof val);
- }
Output:
- function add(a, b) {
- console.log("add 2:4", a, b)
- return a + b
- }
- function subtract(a, b) {
- console.log("subtract 7:4", a, b)
- return a - b
- }
- const multiply = (a, b) => {
- console.log("multiply 12:4", a, b)
- return a * b;
- }
- const divide = function(a, b) {
- console.log("divide 17:4", a, b)
- return a / b;
- }
- add(, )
- subtract(, )
- multiply(, )
- divide()
- console.log("25:0", 'sup dawg')
Other solutions;
- export default function(babel) {
- const {types: t} = babel
- return {
- name: 'captains-log',
- visitor: {
- CallExpression(path) {
- if (
- !looksLike(path, {
- node: {
- callee: {
- type: 'MemberExpression',
- object: {
- name: 'console',
- },
- },
- },
- })
- ) {
- return
- }
- let prefix = ''
- const functionName = getFunctionName(path)
- if (functionName) {
- prefix += functionName
- }
- const start = path.node.loc.start
- prefix += ` ${start.line}:${start.column}`
- path.node.arguments.unshift(t.stringLiteral(prefix.trim()))
- },
- },
- }
- function getFunctionName(path) {
- const parentFunction = path.findParent(parent => {
- return (
- t.isFunctionDeclaration(parent) ||
- t.isArrowFunctionExpression(parent) ||
- t.isFunctionExpression(parent)
- )
- })
- if (!parentFunction) {
- return null
- }
- if (looksLike(parentFunction, {node: {id: t.isIdentifier}})) {
- return parentFunction.node.id.name
- } else if (
- t.isVariableDeclarator(parentFunction.parent) ||
- t.isFunctionExpression(parentFunction.parent)
- ) {
- return parentFunction.parent.id.name
- }
- return null
- }
- }
- function looksLike(a, b) {
- return (
- a &&
- b &&
- Object.keys(b).every(bKey => {
- const bVal = b[bKey]
- const aVal = a[bKey]
- if (typeof bVal === 'function') {
- return bVal(aVal)
- }
- return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal)
- })
- )
- }
- function isPrimitive(val) {
- return val == null || /^[sbn]/.test(typeof val)
- }
[AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression的更多相关文章
- [AST Babel Plugin] Transform code, add line:column number for console log
For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...
- [Javascirpt AST] Babel Plugin -- create new CallExpression
The code we want to trasform: 2 ** 3; a ** b; a **b * c; a ** b ** c; (a+1) ** (b+1); transform to: ...
- [Javascript AST] 1. Continue: Write a simple Babel plugin
We want to write a Babel Plugin, which move 'const versionRegex = /(/d+)\.(/d+)\.(/d+)/gi' out of fu ...
- 简单 babel plugin 开发-使用lerna 工具
babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- babel plugin
a = () => {}, // Support for the experimental syntax 'classProperties' isn't currently enabled ya ...
- [AST Babel] Add function name into the console log 'path.findParent(t.isFunctionDeclaration)'
Continue with the previous post: https://www.cnblogs.com/Answer1215/p/12337243.html What we want to ...
- [Javascript AST] 0. Introduction: Write a simple BabelJS plugin
To write a simple Babel plugin, we can use http://astexplorer.net/ to help us. The plugin we want to ...
- 前端利器躬行记(2)——Babel
Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...
随机推荐
- Swift Playgrounds for mac基础知识介绍
Swift Playgrounds是一款适用于iPad和Mac的革命性应用程序,它使Swift学习变得互动而有趣.它不需要编码知识,因此非常适合刚开始的学生.使用Swift解决难题,以掌握基本知识.S ...
- P1089题解 津津的储蓄计划
来水一篇题解 #include <iostream> using namespace std; int main() { int month[12]; int mother=0,have= ...
- linux 异常 - setsebool: SELinux is disabled.
问题描述 运行命令:setsebool httpd_can_network_connect 1 或者 setsebool httpd_can_network_connect_db 1 报错:setse ...
- 怎么利用 ChromeDriver 和 Selenium对 CEF应用进行自动化测试-java实现
Overview ChromeDriver and Selenium are tools for automated testing of Chromium-based applications. T ...
- 关于学习java虚拟机的知识整理一:jvm内存区域
之前由于考研,对于虚拟机的认识疏忽了太多,现在重新整理回顾一下. 如上图所示,jvm的内存区域(运行时数据区)共分为5处:方法区(Method Area).虚拟机栈(vm Stack).本地方法栈(N ...
- 字符串积累ing
明天就要上网课拉拉啦啦! 数据库先在手机端登录然后转战客户端试之! 操作系统在客户端登录试一试! 马原用学习通试试啦! 首先,介绍一下strlen,strcpy,strcmp函数! 参考:https: ...
- Dubbo之服务消费
Dubbo的服务消费主要包括两个部分.第一大步是ReferenceConfig类的init方法调用Protocol的refer方法生成Invoker实例,这是服务消息的关键.第二大步是把Invoker ...
- Java 中多态的实现(下)
Java 中多态的另一个语法实现是重写.重载是通过静态分派实现的,重写则是通过动态分派实现的. 在学习动态分派之前,需要对虚拟机的知识有一个初步的了解. 虚拟机运行时数据区 运行 Java 程序时,虚 ...
- vjudge Lake Counting 搜索 水池 8方向
原题链接https://vjudge.net/contest/331118#problem/A 题目: 现在有一个M*N的方阵,每个格子里面是.或者W,点代表水,然后如果在这个点的周围,即8个方向内还 ...
- Keras 回归 拟合 收集
案例1 from keras.models import Sequential from keras.layers import Dense, LSTM, Activation from keras. ...