babel学习总结

70 阅读1分钟

Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。

静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 (执行代码的同时进行代码分析即是动态分析)。 静态分析的目的是多种多样的, 它可用于语法检查,编译,代码高亮,代码转换,优化,压缩等等场景。

Babel 编译流程

image.png

  1. 解析阶段:Babel 默认使用 @babel/parser 将代码转换为 AST。解析一般分为两个阶段:词法分析和语法分析。
  2. 转换阶段:Babel 使用 @babel/traverse 提供的方法对 AST 进行深度优先遍历,调用插件对关注节点的处理函数,按需对 AST 节点进行增删改操作。
  3. 生成阶段:Babel 默认使用 @babel/generator 将上一阶段处理后的 AST 转换为代码字符串。
  • babel/cli 允许我们从终端运行Babel
  • envpreset 只包含我们使用的功能的转换,实现我们的目标浏览器中缺少的功能
  • @babel/polyfill实现所有新的JS功能, 为目标浏览器引入缺少的环境(但是Babel7.4.0以上不推荐使用),推荐使用core-js