babel和eslint都是基于AST的，一个是代码转换，一个是查错修复。babel插件和eslint插件都可以对代码进行分析和转换，那么它们有什么区别呢？在本文中，我们将探讨babel插件和eslint插件之间的区别。babel插件babel的编译过程分为解析、转换、生成三个步骤。可以指定插件，遍历AST时会调用visitor。比如我们写一个插件，在console.xx的参数中插入文件名+行列号：查看函数调用节点（CallExpression）的callee属性，如果是console.xx的API，在argumentsLiteral节点中插入一个StringLiteral字符串，值为文件名+行列号。consttargetCalleeName=['log','info','error','debug'].map(item=>`console.${item}`);constparametersInsertPlugin=({types},options)=>{return{visitor:{CallExpression(path,state){constcalleeName=path.get('callee').toString()if(targetCalleeName.includes(calleeName)){const{line,column}=path.node.loc.start;路径。node.arguments.unshift(types.stringLiteral(`${options.file.filename}:(${line},${column})`))}}}}}module.exports=parametersInsertPlugin;然后使用babelcore的api执行代码编写，并调用插件：const{transformFileSync}=require('@babel/core');constinsertParametersPlugin=require('./plugin/parameters-insert-plugin');constpath=require('path');constinputFilePath=path.join(__dirname,'./sourceCode.js');const{code}=transformFileSync(inputFilePath,{plugins:[insertParametersPlugin],parserOpts:{sourceType:'unambiguous',plugins:['jsx']}});console.log(code);当源码为下面的代码时：console.log(1);functionfunc(){console.info(2);}exportdefaultclassClazz{say(){console.debug(3);}render(){返回<div>{console.error(4)}
