[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 subtract(a, b) {
- console.log(a, b)
- return a - b
- }
- add(, )
- subtract(, )
- console.log('sup dawg')
We want to transform the code to:
- function add(a, b) {
- console.log("2:4", a, b)
- return a + b
- }
- function subtract(a, b) {
- console.log("7:4", a, b)
- return a - b
- }
- add(, )
- subtract(, )
- console.log("13:0", 'sup dawg')
Added line and colum number in front of console log arguements
Using the utilites functions:
- 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)
- }
Babel plugin code:
- export default function (babel) {
- const { types: t } = babel;
- return {
- name: "ast-transform", // not required
- visitor: {
- CallExpression(path) {
- if (!looksLike(path.node, {
- callee: {
- type: 'MemberExpression',
- object: {
- name: 'console'
- },
- property: {
- name: 'log'
- }
- }
- })) {
- return
- }
- console.log(path.node.loc)
- // insert string into console.log('instread here', a,b)
- const {line, column} = path.node.loc.start;
- path.node.arguments.unshift(t.stringLiteral(`${line}:${column}`))
- }
- }
- };
- }
[AST Babel Plugin] Transform code, add line:column number for console log的更多相关文章
- [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: ...
- [AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression
Continue with previous post: https://www.cnblogs.com/Answer1215/p/12342540.html Now we need to think ...
- [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] 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 ...
- Error Code: 1054. Unknown column 'age' in 'user'
1.错误描述 10:28:20 alter table user modify age int(3) after sex Error Code: 1054. Unknown column 'age' ...
- Mysql官方文档中争对安全添加列的处理方法。Mysql Add a Column to a table if not exists
Add a Column to a table if not exists MySQL allows you to create a table if it does not exist, but d ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
- Error Code: 1054. Unknown column '字段名' in 'field list'
问题描述: j博主在java开发过程中,通过读取excel中表名和字段名,动态创建insert的SQL语句,在mysql可视化工具中执行此SQL语句时,一直提示"Error Code: 10 ...
随机推荐
- Vs2013以管理员身份运行
VS快捷方式目录下的devenv.exe 右键->兼容性疑难解答->疑难解答程序->勾选该程序需要附加权限即可,以后每次打开VS时都会以管理员身份运行了!
- JavaScript DOM–节点操作
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...
- react 和 vue 的优缺点总结
React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就 ...
- Spring boot --- 自动配置
spring boot 自动配置 指的是针对很多spring 应用程序常见的应用功能,spring boot 能自动提供相关配置. spring boot 自动配置加载 Spring boot ...
- 转载:TDM协议
转自http://www.wangdali.net/i2s/ 1. PCM简介 PCM (Pulse Code Modulation) 是通过等时间隔(即采样率时钟周期)采样将模拟信号数字化的方法.图 ...
- [LOJ113] 最大异或和 - 线性基
虽然是SB模板但还真是第一次手工(然而居然又被运算符优先级调戏了) #include <bits/stdc++.h> using namespace std; #define int lo ...
- jsp中的javascript的$(document).ready( function() { $("#loginForm").validate()
转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...
- Oracle查询当前用户和当前用户下的所有表
转载自:http://blog.itpub.net/29485627/viewspace-1246317/ Oracle查询当前用户和当前用户下的所有表 (1)查询当前用户 SQL> show ...
- window环境下获取python安装的路径
1.cmd + win 打开命令行 2.where python
- iframe宽高自适应
iframe子页面结尾添加本script iframe子页面结尾添加本script <script type="text/javascript"> fu ...