0成本上手AST，使用GoGoCode解决Vue2迁移到Vue3的问题
1为什么要迁移到Vue3.x？简而言之。..这不是我的错！首先，我们要写一个案例，找到一个可执行的方案。2方案选择参考Vue2到3的官方文档v3.cn.vuejs.org/guide/migra...面对自己项目的一百八十个文件，人为爆肝肯定不行，而且你想都不敢想！唯一的解决办法就是基于AST（抽象语法树）对代码进行解构，按照Vue官网给出的修改建议，批量修改输出文件，升级文档。仅有的。..AST操作有点复杂。考察了几个工具，在GitHub上找到了几个去除代码文件中console.log的例子：（这两个代码参考作为对比方案，可以略过）1.使用jscodeshift操作AST的例子删除console.log:exportdefault(fileInfo,api)=>{constj=api.jscodeshift;constroot=j(fileInfo.source)constcallExpressions=root.find(j.CallExpression,{callee:{type:'MemberExpression',object:(部分代码因篇幅省略，感兴趣的同学请访问github.com/mattphillip…)导出默认函数({types,}:typeofBabelCore):PluginObj{return{name:'console-transform',visitor:{CallExpression(path,{opts,file}){validateSchema(schema,opts);const{env,removeMethods,additionalStyleMethods}=opts;constcallee=path.get('callee');/*由于篇幅限制此处省略40多行代码*/},},};}复制代码以我为本实力，这两个方案真的是很有说服力的案例。正在为这个项目的重构发愁，发帖数急速下降。在社区寻找救助方案的时候，突然发现了GoGoCode这个工具。贴出官方介绍：GoGoCode是一款操作AST的工具，可以降低AST的使用门槛，帮助开发者从繁琐的AST操作中解放出来，更专注于代码解析和转换逻辑的开发。简单的替换甚至不需要学习AST，更复杂的分析和转换在初步学习AST节点结构后就可以完成（参考AST查看器）。GoGoCode的官方文档gogocode.io/zh/docs/spe...这不正是我想要的吗，遇见你，古语说，困了有人递枕头！而GoGoCode操作AST去除代码中的console.log，只需要一行代码！！$(`待转换的代码段`).find(`console.log($_$)`).remove()复制代码熟悉的$符号，熟悉的find、remove等API，扣题，说零成本运营AST不是头条党，太棒了！！！方案已选！！！3开始工作举个栗子：keymodifier迁移方案Vue2to3官方文档-keymodifiermigrationv3.cn.vuejs.org/guide/migra...下面简单总结一下改动：不兼容：使用ofnumbersisnolongersupported(i.e.keycode)Incompatibleasav-onmodifier:config.keyCodesisnotlongersupported写一个Demo根据文档进行转换Migration:keymodifier
迁移策略：1.Vue3不再支持使用数字（即键码）作为v-on修饰符2.不再支持config.keyCodes
空间：
空间：
space:
/template>复制代码任务，根据astexplorer.net的分析确定要转换的内容。查看工具astexplorer.net。我们可以用它来方便的查看某段代码的AST语法树结构。这里要做三件事：1）提取代码中自定义的keyCodes（上图蓝框Vue.config.keyCodes的内容部分），和系统keyCodes合并成一个map，然后在替换的时候使用模板;2）去掉Vue.config.keyCodes代码（不再支持Vue3）；3）遍历所有标签及其属性，使用合并后的keyCodes替换标签（上图中红框xx.32和xx.customSpace）在转换逻辑编写项目中运行并安装GoGoCodenpminstallgogocode复制代码初始化脚本的AST对象const$=require('gogocode');//脚本代码，使用$转换为AST节点letscriptAst=$(`importVuefrom'vue';Vue.config.keyCodes={customSpace:32,customDelete:46};exportdefault{name:'keymodifier',methods:{keys(key){alert('你按下的是'+key);},},};`)复制代码我们要在脚本中找到自定义的keyCodes（Vue.config.keyCodes的内容部分）使用GoGoCode的findAPI，添加匹配的通配符_，得到所有自定义的keyCodearray//匹配取出自定义keyCode，结果：NodearrayconstcustomKeyCodeList=scriptAst.find(`Vue.config.keyCodes={$_$}`).match[0]把代码复制到这里注意构造匹配的Vue.config.keyCodes={$_$}字符串需要符合可转换AST节点的规范。你可以在astexplorer.net工具中得到它来验证它。控制台显示customKeyCodeList，它是一个Node数组customKeyCodeList加上系统keyCode构造一个fullkeyCodeMap//fullkeyCode对照表，根据篇幅，这里只列出3个//https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCodeletkeyCodeMap={46:'delete',32:'space',112:'f1'}//添加自定义keyCode结构体，汇总所有keyCodeMap，需要用到稍后替换模板内容时//Result:{46:'delete',32:'space',112:'f1',customSpace:'space',customDelete:'delete'}for(leti=0;i
Migration:keymodifier
Migrationstrategy:1.Vue3不再支持使用数字（即键码）作为v-on修饰符2.不再支持config.keyCodes
space:
space:
space:
`,{parseOptions:{html:true}})复制代码使用find,each,attrAPI遍历所有标签及其属性，使用keyCodeMap，替换属性名//find+each遍历所有标签项templateAst.find(['<$_$>','<$_$/>']).each((node)=>{//如果节点contains属性，遍历它的属性if(Array.isArray(node.attr('content.attributes'))){node.attr('content.attributes').forEach((attr)=>{//使用上面构造的摘要keyCodeMap替换匹配的属性名如@keyup.32->@keyup。spacefor(letkeyIteminkeyCodeMap){if(attr.key.content.endsWith(`.${keyItem}`)){attr.key.content=attr.key.content.replace(`.${keyItem}`,`.${keyCodeMap[keyItem]}`)}}})}})复制代码这里使用的node.attr('content.attributes')是刚刚从astexplorer.net工具中找到的最终输出，你是大功告成，对比一下转换结果4小结这段代码中与AST相关的操作只有10行左右，剩下的都是核心的转换逻辑。GoGoCode可以操作AST，体验和使用Jquery操作DOM一样。简单易用，方便新手也有批量处理文件的demogithub.com/thx/gogocod...Github上提出的问题会尽快回复！github.com/thx/gogocod...真是一个代码转换的工具。如果文章中有任何问题，欢迎大家反馈。谢谢，祝你有美好的一天！
