针对Vue Parser的探索，以及babel解析器的插件探索。

说明

本文并非一篇教程或者解决方案的文章，而是对这方面探索过程的记录。

过程

在公司，我负责的一个项目需要进行国际化处理，因为这是一个已经上线的项目，所以国际化进程中最重要也是最繁琐的就是中文词条的提取。这个过程是一言难尽，手动提取加替换是真的让人心累。

在手动提取两天后还没有完成，此时我终于下定决心开始使用自动化提取。有了想法后就进开始网络搜索，最初搜索到方式是使用正则匹配，我找到了vue-i18n-generator项目，但是它的效果很差，几乎无法使用。

于是我再次进行搜索，没想到这个想法就是把我带进大坑的，接下来我发现了如何快速解决繁杂的国际化替换这篇文章，在阅读之后我发现了新大陆，原来可以使用babel-parser把代码转成AST，然后再通过babel-generator把AST还原成代码，只需要针对AST进行中文提取加替换，然后再转成代码即可。

想法总是美好的，此文主要针对react项目，我认为react和vue差别不大，在看了评论后决定自己为该项目加入vue的兼容，为了理解babel的工作，我甚至在babel官方的建议下阅读了the-super-tiny-compiler项目，大致了解了编译器的工作原理。

此时回刚才的问题要识别.vue，首先要对vue SFC进行解析,此时就需要相应的babel插件，在找遍网络后也没有找到vue sfc的babel plugin，我放弃了这篇文章。

不过此时的我对该方法的原理还是懵懵懂懂的，于是我又找到了5分钟前端国际化文章，该项目也是针对react的，又跑去研究，当然结果就是发现这俩的本质是相同的。

想了想要么是网上确实没有Babel plugin，要么就是我的搜索方式不正确，我是倾向于后者。

于是我仔细回忆项目中的.vue是怎么被识别的，我想到了vue-loader这个东西，可是这不是一个webpack的loader吗，和babel plugin也对不上关系呀。

在仔细看了vue-loader的说明后，发现它只是把vue sfc的各个部分提取出来交给其它loader处理的，例如把template部分交给vue自己的编译器处理，把script的部分交给babel-loader处理，把css部分交给scss等预处理器处理。

我的想法是使用vue-loader把vue sfc分离，然后再使用babel再提取中文处理不久好了。此时我也在vue-loader issue看见了类似的问题，这也加大了我成功的记录

在打开这个issue的老哥仓库中我想找寻到相关实现，最后找到了vue-compiler-options-bug-repro项目，clone后跑起来之后突然意识到一个问题。

这样中文提取没有问题，但是替换后怎么生成代码呢？ babel-generator转回代码时应该是不能转成vue sfc的，因为babel拿到的代码只是vue-loader给的script，其中也不包括template部分呀...空气突然安静，我好像又走错方向了，或者AST的这个方向本身就是行不通的。

接下来我又想起了Vetur居然可以进行代码格式化时，我又觉得此路可行，但是就在写本文时我又想到Vetur或许对template部分和Scipt的是分开处理，最后再进行合并。

此时我想到的办法就是找到一个可以针对vue sfc的parser库，它不光可以解析成AST，还得可以从AST还原vue sfc，如果能做到这一步那么提取中文就轻而易举了。

不过这已经耗费了我很多时间，毕竟研究这些对我来说是有难度的，或者以后我可能会找到解决方法。

但是由于时间问题现在我可能不得不回到最初使用正则的方式上面去。

总结

1. 学到了babel处理js的原理，以及如何开发简单babel插件，vue cli做的工作都有些什么。
2. webpack loader的使用

还未解决的问题

1. 本地开发node cli库，使用npm link链接到全局，在其它项目中使用它发现npm不会在原来项目中寻找依赖
2. babel-generator是如何把代码转回去的，在我的理解中AST中应该不包含template中的写法以及内容吧？连eslint、prettier等项目都是依赖babel，如果不能返回正确的代码，那么工具肯定是失败了。prettier可以针对非常多的语法。例如react hook，vue sfc ，pug等等