babel

juejin.cn/post/699213…

babel作用：babel给予了我们便捷查询和修改 AST的能力。

• 转译 esnext、typescript 等到目标环境支持的js: 从高版本语法和 api 转换成低版本的语法并自动 polyfill 缺少的 api。
• 代码转换： taro
• 代码分析：模块分析、tree-shaking 、 代码压缩、linter等

Babel怎么转译代码的？

• 对源码字符串进行 parse，生成 AST，把对代码的修改转为对 AST 的增删改，转换完 AST 之后再打印成目标代码字符串。
• babel转译的不同阶段使用了不同的api
• 1.parse 阶段使用@babel/parser，作用是把源码转成 AST
• transform 阶段使用 @babel/traverse，可以遍历 AST，并调用 visitor 函数修改 AST，修改 AST 涉及到 AST 的判断、创建、修改等，这时候就需要 @babel/types 了，当需要批量创建 AST 的时候可以使用 @babel/template 来简化 AST 创建逻辑。@babel/types 用于创建、判断 AST 节点，提供了 xxx、isXxx、assertXxx 的 api
• generate 阶段会把 AST 打印为目标代码字符串，同时生成 sourcemap，需要 @babel/generate包,中途遇到错误想打印代码位置的时候，使用@babel/code-frame包

babel 的 runtime 代码包括 2 部分:

• 一部分是 polyfill 用的，也就是 corejs 和 regenerator（实现 async await），这俩都是第三方的实现，babel 做了集成
• 另一部分就是转换代码的时候的 helper，比如实现继承、实现 class 的那些代码，这部分默认是注入到代码里的

babel 会按照如下顺序处理插件和 preset：

• 1. 先应用 plugin，再应用 preset
• 2. plugin 从前到后，preset 从后到前

babel plugin开发教程

• 安装依赖babel/core
• 配置babel.config.json
• 用内置的babel/cli编译文件
• 新建babel-plug/index.js
• 将babel-plug配置到babel.config