阿里妈妈开发的新工具解除了批量修改项目代码的痛苦

作为一名程序员，当然总是期望自己的代码能够“一次编写，到处运行”，但真正的体验往往是“修改一次，到处跑”。到处填坑”，依赖落后好几个版本想升级，老代码已经看着很不爽想重构，需要下定决心，毕竟任何疏漏或失误都可能酿成大祸，我们平时是怎么做的呢？如果放弃不做，痛苦立马就减轻了。。。但是如果你坚持做，请往下看！局部方法的真实性和局限性对于一些简单的需求，比如最近在掘金上看到的一个例子，去掉项目中的console.log(xxx)代码，相信大家遇到这种需求的第一个想法就是直接选择编辑器将批处理文本替换为anemptystring:使用正则表达式，我们还是可以处理很多需求的，但这真的能覆盖所有情况吗？有的同事很喜欢回车console.log('aaa')复制代码这样的话，如果我们面对更多复杂的需求或者严苛的场景，我们要么需要写更复杂的正则表达式，要么就要进行硬AST操作。AST有点复杂。在网上搜索了一下，找到了一个使用jscodeshift操作AST并去掉console.log的例子：exportdefault(fileInfo,api)=>{constj=api.jscodeshift;constroot=j(fileInfo.source)constcallExpressions=root.find(j.CallExpression,{callee:{type:'MemberExpression',object:{type:'Identifier',name:'console'},},})复制代码;调用表达式。消除（）;返回根。toSource();};复制代码需要大家熟悉AST结构。写的时候需要面对解析出来的节点结构慢慢写出来。过段时间再看，不会比回绕复杂更容易理解AST的规律——大家平时接触AST太少了。尝试结合它。有一次，我正在为一个项目的API大重构发愁，快要爆肝时，旁边的小姐姐看不下去了——她的项目重构比我早。不仅没爆，还做了个工具GoGoCode。这个工具借鉴了jQuery的两大思想：选择器和链式调用。使用这个工具去掉console.log(xxx)，其实就是一句话的东西：const$=require('gogocode')/**故意乱码**/constinput=`console.log(`a,b,c`);`//关键代码constoutput=$(input).replace('console.log()','').generate()console.log(output)copycode它的创新在于解析console.log()你输入的是一个AST节点，和源码中创建的节点树相匹配，所以代码格式自然没有问题。你输入的代码相当于jQuery中的选择器，只不过这次选择的是代码节点。更多例子清理console.log这个操作还是太简单了，再举个例子吧！我们经常使用这样的枚举列表：constlist=[{text:"Astrategy",value:1,tips:"Atip",},{text:"Bstrategy",value:2,tips:"Btip",},{text:"Cstrategy",value:3,tips:"Ctip",},];复制代码突然有一天，为了统一代码中的各种枚举，我们需要将text属性重命名为name，将value属性重命名为id，很难用正则表达式准确匹配，容易误伤。操作AST树还是有点麻烦。你只需要用GoGoCode替换它：const$=require('gogocode')constinput=`constlist=[{text:"StrategyA",value:1,tips:"Atip",},{text:"StrategyB",value:2,tips:"Btip",},{text:"StrategyC",value:3,tips:"Ctip",},];//ts类型标记，这种正则替换会被错误替换，在gogocode中不会有consttext:string=''//这一段因为没有value不会被选择器匹配，也不会被错误替换constcfg={text:''}`constoutput=$(input2).replace('{text:$_$1,value:$_$2,$$$}','{name:$_$1,id:$_$2,$$$}'）。产生（）;复制代码其中$_$1和$_$2相当于正则表达式中的通配符，但是这里只会匹配代码中有效的AST节点，$$$可以匹配剩下的节点，有点像es6中的...，这个code匹配text和value，对应的value填入name和id，其余原封不动放回去。后半部分，我特意加了一些“干扰码”。以前我都是用字符串替换text:为name:的本地方法，会误伤，而GoGoCode不会。让我们看一下上一段中社区中的一个例子。巧合的是，在上一段看到了掘金的一篇文章。像jQuery一样玩AST，里面介绍了一个使用jscodeshift进行Reactjsx代码转换的例子：我打算修改这样一段代码：将import从@alifd/next改成antdbeforetranslation，改成aftertranslation。Button中类型参数转换：normal->default,medium->middleButtonwithtextparameterchangedtotype="link"Buttoninwarningparameterchangedtodangerimport*asReactfrom'react';importstylesfrom'./index.module.scss';import{Button}from"@alifd/next";constBtn=()=>{return(

);};exportd默认按钮；文案代码大概是这样的：这种需求其实挺常见的。原文提供了一个基于jscodeshift的实现，深入到AST中去操作，但是如果使用GoGoCode会直观很多：//Omitdependenciesandinputconstoutput=$(input).replace(`import{$$$}from"@alifd/next"`,`import{$$$}from"antd"`).replace(`

beforetranslation

`,`

Translated

`).replace(``,``).replace(``,``).replace(``,``).replace(``,``).generate();复制代码，相信不用解释也能知道这段代码是干什么的~开源了，希望得到大家的反馈。我认为这个项目非常有趣。可以说是我专门为代码做了一个替换程序。小姐姐说我看得太明显了。事实上，这个项目不仅仅是替换的技巧。这个项目支持我们几万行前端项目的架构升级计划，即使需求再复杂。还有一个方法可以搞定，大家可以关注我们的账号或者专栏，稍后作者会出一篇更专业更全面的介绍文章小姐姐是我们阿里妈妈MUX团队的叶曦。我们团队之前有iconfont、Rap、MockJS等项目受到社区的欢迎。本次我们也将GoGoCode开源到Github：github.com/thx/gogocod...，希望对同样有大量代码修改需求的朋友有所帮助。我们希望知道您会经常遇到什么样的转换问题。如果您不方便解决或使用当前的GoGoCode有错误，希望您能给我们带来（issue：https://github.com/thx/gogocodeQQ群：735216094）。最后：新项目求明星支持！Github：https://github.com/thx/gogocode官网：gogocode.io作者：阿里妈妈前端快爆链接：https://juejin.cn/post/693860...来源：掘金版权属于作者。商业转载请联系作者授权，非商业转载请注明出处。