--- theme: hydrogen --- ## 项目地址 [wood3n/tvt: Extract and transform chinese charaters automatically. (github.com)](https://github.com/wood3n/tvt) ## 前言传统的 VUE 国际化解决方案一般基于`vue-i18n`这样的基础库来做`key`和多国语文案之间的映射转换，一般来说开发过程中需要维护`key`和文案之间的映射关系，这种方式虽然可以保证一定程度的准确率，但是开发效率低下，当项目需要维护的多国语文案越来越多时，手动配置也变得越来越麻烦；开发者还需要考虑重复`key`、重复文案等导致的各种问题。在掌握了 AST 大法以后，考虑利用解析和转换 AST 节点的方式来完成代码中的中文替换和多国语映射文件生成，提高开发效率同时降低多国语文案的维护难度。在介绍 AST 大法之前，先一起简单了解一下 AST 相关的基础知识。 ## 什么是 AST 在编译原理中，编译过程一般从词法分析（lexical analysis）开始，由编译器的`scanner`或者`tokenizer`按照语言的特殊标记符号，例如定义的关键词等，对源代码的字符串的每个字符进行分析并组合，最后形成一个个*单词*`token`，`token`就是 AST 的节点，它们之间相互关联形成 AST。 ## JS-AST 关于 AST 的知识这里简单描述一下，目前主流 JS 编译器例如`@babel/parser`定义的 AST 节点都是根据[estree/estree: The ESTree Spec (github.com)](https://github.com/estree/estree)规范来的，可以在[AST explorer](https://astexplorer.net/)在线演示。 ## babel 提供的工具库 `babel`提供了一系列操作 JS AST 的工具库，诸如以下几个 ### @babel/parser `@babel/parser`是 babel 的核心工具之一，原来叫 Babylon，babel6 以后迁移到了 babel 的 menorepo 架构里，作为单独的一个 package 维护。 `@babel/parser`提供两种解析代码的方法： - `babelParser.parse(code, [options])`：解析生成的代码含有完整的 AST 节点，包含`File`和`Program`层级。 - `babelParser.parseExpression(code, [options])`：解析单个 js 语句，这里需要注意的是`parseExpression`生成的 AST 不完整，所以使用`@babel/traverse`必须提供`scope`属性，限定 AST 节点遍历的范围。 ``` import parser from '@babel/parser'; const code = `function square(n) { return n * n; }`; parser.parse(code); ``` ### @babel/types `@babel/types`用于判断节点类型，生成 AST 节点等操作，例如生成一个函数调用表达式： ``` import * as t from '@babel/types'; t.callExpression(t.identifier('xxx'), ...arguments); ``` ### @babel/traverse `@babel/traverse`提供遍历 JS AST 节点的方法，用它来遍历指定类型的节点非常方便，主要是其提供的`Visitor`模式大大简化了递归的过程。所谓`Visitor`模式就是 babel 提供了一个`visitor`对象来访问指定类型的 AST 节点，例如下面的例子，定义一个`visitor`，其内部有一个`StringLiteral`的方法，那么意思就是`visit StringLiteral`，也就是访问所有字符串类型节点的时候都会触发调用这个定义的`StringLiteral`方法。 ``` import babelTraverse, { Visitor } from '@babel/traverse'; const MyVisitor: Visitor = { StringLiteral() { console.log('这是一个字符串'); }, }; babelTraverse(ast, MyVisitor); ``` 并且由于 babel 采用的深度优先遍历的算法，所以在每个类型的 AST 节点内部还具有两种访问方向 —— `enter`和`exit`，即进入和离开。 ``` const MyVisitor: Visitor = { Identifier: { enter() { console.log('Entered!'); }, exit() { console.log('Exited!'); }, }, }; ``` ![1638285683847.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ed56ff0c098476dbda9ecd0f016f84e~tplv-k3u1fbpfcp-watermark.image?) ### @babel/generator `@babel/generator`就负责将 AST 转换生成代码，同时支持定义生成的部分代码的风格，例如分号结尾、双引号和单引号的使用等。 ## template-AST 对于 VUE SFC 内部模板语法解析得到的 AST 和 JS 的 AST 区别很大，主要是没有像`babel/traverse`等处理工具，有的只是`@vue/compiler-sfc`或者`@vue/compiler-dom`这样的解析工具。在 VUE SFC 内部主要存在以下几张类型的 AST 节点： ![image-20211130224316277.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c4c2ee9fdf34e7998c4b788d8130401~tplv-k3u1fbpfcp-watermark.image?) ### template `template`也就是解析`