序
前段时间项目涉及出海业务，有了国际化的需求，对于我算是一个比较新的领域，以前的业务没有此类需求。研究了一段时间。正好想起来就写作记录一下。
前期准备
底层组件库国际化
由于以前没有此类业务，所以一些自有到底层组件，工具没有实践过，多语言方面的问题，但是还好，设计之初都要考虑过，所有没有花太多时间。
相对来说组件库的多语言支持还是挺简单的，毕竟用到的文案不像业务组件一样。如果用的是开源的一些组件库，他们都有很好的多语言支持。
业务文案的国际化需求
对于业务上的需求，简单梳理了以下几个需要考虑的点。
- 中文文案怎么提取
- 长文案加变量的翻译问题、语序变化
- 时间格式
- 处理标点符号
- 处理英文换行
- 动态切换语言 （在切换语言的时候，局部刷新问题：1、局部刷新 2、全局刷新 ）
- 中文表意明确空间占用少，其他语言占用多 （如菜单，是否需要加大展示宽度）
- 阅读顺序 （大部分拉丁语言是从左到右书写，阿拉伯语是从右到左书写，在中文等一些东亚语言中，还存在从上到下的书写方式。）
- 货币单位
- 货币汇率
局部刷新需要记录当前页面的刷新接口调用问题，节约时间就选择了最粗暴的全局刷新😄，以上问题可以对照关注一下。
文案多语言翻译
多语言翻译，最好有一个效果最好的目标语言，保证目标语言效果最优就可以了，真要挣钱，可能还是本地化比较合适。文化习惯不一致，单纯的国际化效果其实并不怎么好。
我们只关注了英文，和其他几个通用语言。
代码检查
一个老系统文案成千上万，国际化难度可想而知。难度很大。如果单纯靠人工提取文案。这个工作估计就得一个月起步。所以我弄了一个cli工具辅助提取文案，提升了几十倍的效率。不过人工review的阶段⬆️少不了的。
UI页面检查、调整
替换了文案后就是最后的UI检查了，这个阶段最无聊，也最浪费时间。有测试配合起来才感觉好一些。不然真的想吐了🤮。
技术方案
接下来才进入我们今天的主题《基于AST的前端国际化解决方案》，提取文案在国际化的过程中是一个⚙️无聊且繁琐的时间，眼花缭乱，如果让你一个一个文件找，你可能得疯了。
代码编译 +工具辅助+ 人工核验
基于AST或正则表达式的前端自动国际化方案、处理代码编译逻辑、辅助语言字典提取与代码修改
具体实现
完成项目文案提取工具，尽可能的减少手动改代码。
效果
目前这个小工具已经运用上了，基本上不需要改什么代码。就可以一字不落的提取的中文文案。项目上说用vue3 与 js 暂是优先实现的 vue3与js文件的转化
- 支持include exclude 配置按需替换
- 支持@i18n-ignore 忽略文案
- vue 自动引入 vue-i18n
- vue 自动声明t函数
const {t} = useI18n() - vue 自动转化vue语法
- vue 支持setup 语法糖
- js 自动引入国际化相关函数
- js 自定义调用方式
- js 自动转化js语法
考虑到二次开发使用的问题作了一些定制化的配置，现在新功能开发，也可以直接扫描即可。当然已经完全满足我的需求了。
实现
讲一些是怎么实现的吧。现在我们的目标是转化提取vue 与js 文件中的中文文案
Code TO AST
所以第一步就是将它们转为AST、这里有两个重要网站帮助我们分析AST:
Vue
关于vue 这里我们直接使用 @vue/compiler-sfc 来处理SFC 文件 将其转化为AST
Javascript
关于js文件 我们使用 @babel/parser 来处理JS 将其转化为AST
它们都导出了parse 方法
分析AST，改造AST
我们通过上面的两个站点分析，找出中文节点并改造替换即可。
既然要改造，遍历工作就少不了 '@babel/traverse 帮助我们遍历AST节点。
遍历的我们就需要替换，那我们就需要生成对应的AST节点 @babel/template 提供了很多生成AST节点的工具函数当然不同的语言需要不同的方法去处理节点。
AST TO Code
对于Javascript我们可以用 @babel/generator 生成指定code。
对于Vue 我们可以把script部分当作Javascript，template 当作html来处理。只需要注意一些特殊语法就可以了。我自己找了一些资料，参考了vue一些源码的实现实现了AST 转SFC的部分。
最后
国际化的整体结构就差不多这些，难点在提取文案的工作上，其余都是工程化的问题，翻译与兼用型就是靠资源与细心。
上面讲到的工具 i18n-ast-auto 感兴趣的可以自己看看，如果有用，感谢star🙏