#Babel 的定位与核心功能

#1. 面试题

Q: 如果面试官问你 Babel 是干什么的？有哪些核心功能？

#2. 核心解答

Babel 是一个 JavaScript 语法转换器。它主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JS 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

#(1) 语法转换

• Syntactic Sugar: 转换高版本语法 (let/const, Arrow Functions =>, Classes, Destructuring) 为低版本语法 (var, function, prototype)。
• JSX: 转换 React JSX 语法为 React.createElement。
• TypeScript / Flow: 移除类型注解。

#(2) Polyfill (垫片)

• API Fill: 通过 @babel/polyfill 或 core-js，为目标环境添加缺失的原生 API (Promise, Set, Map, Symbol) 和实例方法 (Array.from)。

#(3) 源码转换

• Macro (宏): 如 babel-plugin-macros。允许在编译阶段运行代码，生成转换后的源码。如 codegen.macro 可以在构建时读取文件生成配置。
• Minification (压缩): babel-minify (虽然不如 Terser 常用)。
• Codemod: 自动重构工具，基于 AST 批量修改老旧代码。

#3. 面试加分项

#Q: Babel 只是把高版本转低版本吗？

不仅仅是。Babel 强大的 Plugin 系统 赋予了它无限的扩展能力。

• Tree Shaking: babel-plugin-transform-imports 可以按需引入模块。
• React Fast Refresh: 开发时保持状态的热更新。
• Vue Component: 将 Vue 单文件组件中的 <template> 编译为 render 函数。
• CSS-in-JS: styled-components 的 Babel 插件可以在编译时生成哈希类名。

#4. 总结

• Core: Syntax Transpile (ES6+ -> ES5).
• Polyfill: API Support (Promise).
• Extension: JSX, TS, Macros via Plugins.