Babel初认识

8 阅读1分钟

一、核心定义与流程

Babel是javascript编译器,其核心功能是将采用新语法/提案的代码,转换为旧版本javascript引擎(如旧版浏览器)可兼容运行的代码。

其工作流程是一个经典的编译器三段式:

  1. 解析:通过词法分析和语法分析将源代码字符串转换为抽象语法树AST;
  2. 转换:遍历AST,应用预设和插件对节点进行增删改,生成目标AST;
  3. 生成:将目标AST重新生成为代码字符串,并可选地生成Source Map。

二、生态构成与分工

现代Babel生态通过分工协作实现完整兼容:

  • @Babel/core:承担核心编译流程(解析、转换、生成),处理语法转换(如:箭头函数 => 普通函数)。
  • core-js:提供API polyfill,负责API具体实现(如实现Promise、Array.prototype.includes)
  • @Babel/preset-env:@Babel/preset-env负责根据目标浏览器环境决定转换哪些语法、引入哪些polyfill,实现按需引入,减少打包体积。