转译和编译_简单的前端转译基础

一转眼，又是三个月没写文章了。因为最近又换了家公司，一开始业务稍微忙碌了一些。凑巧刚好在做一些语言转译相关的东西，之前没做过，感觉也挺有意思（至少比单纯业务有趣些<_<），所以写个文章记录一下，避免后面又忘了之前踩过的一些坑。

SSR的坑就先放着，等后面能封装成一个完整的框架再接着填。

首先要明确编译和转译的区别：

编译，一般指将一种语言转换为另一种语法和抽象程度等都不同的语言，常见的比如gcc编译器。

转译，一般指将一种语言转换为不同版本或者抽象程度相同的语言，比如babel把es6转译为es5。

前端对于Babel应该都耳熟能详，所以我们就以Babel为例（当然ts的transformer也可以，而且写这个的时候有类型提示能有很大的帮助）。

前提：假如你和我一样是第一次接触这个，强烈建议先阅读以下文档--Babel Handbook，并学会使用ast explorer这个网站，后面很有用。

Babel Handbook​github.com AST Explorer​astexplorer.net

对了，我们做之前还是该强调一下Why。这个转译除了常见的ES版本转换之外，也可以用于解决一些业务问题。例如：

1. SSR项目中有一些模块需要懒加载，通常会使用webpack dynamic import来解决，但是假如同时需要支持服务端呢？而且服务端由于代码在本地存储，读取速度可以忽略不计，直接require就好了。所以我们可以在转译器完成import -> require的转换。
2. 对于一些低代码的项目，我们可以借助转译器将表达能力更弱的一些模板语法转为换更灵活的jsx语法。

开始

用到的库：

@babel/generator -- 将AST转换为source code
@babel/parser -- 将source code转换为AST
@babel/template -- 将source code转换为AST，并且支持模板变量替换
@babel/traverse -- 遍历AST节点库 ！！！
@babel/types -- 创建AST节点和相关utils的工具库

了解 ba