用途:Babel 是 JavaScript 转译器,用于把现代 ESNext、JSX 和 TypeScript 编译为向后兼容的 JavaScript,也用于编写自定义 AST 代码转换插件,以及通过 core-js 注入 polyfill。它比 SWC、esbuild 慢,但可扩展性最强、插件生态最大。
主要能力:通过 @babel/preset-env 按目标浏览器矩阵转译并自动注入 polyfill;@babel/preset-react 支持 JSX(含 automatic runtime);@babel/preset-typescript 处理 TypeScript;可编写 visitor 插件实现代码插桩、剥离或宏生成。
使用方式:在 babel.config.json 中配置 presets 与 plugins,例如 preset-env 设置 targets、useBuiltIns: "usage"、corejs: 3,preset-react 设置 runtime: "automatic"。命令行可用 npx babel src --out-dir dist --extensions ".ts,.tsx,.js" --source-maps inline。自定义插件通过导出函数接收 { types: t } 并定义 visitor,如用 CallExpression 匹配并移除 console.log。
适用场景:现代 TypeScript/React 项目按浏览器目标转译;构建期剥离调试语句或注入遥测;维护依赖 Babel 的 React 与 Webpack 工具链。
限制与注意:不要用 Babel 做类型检查,应配合 tsc --noEmit;若打包器支持原生 ES 模块,不要设 modules: "commonjs";除非第三方包发布未转译的现代 ES 特性,否则不要转译 node_modules;用 @babel/plugin-transform-runtime 避免重复 helper。常见问题包括实验语法未启用需加对应插件、缺少 @babel/core 需安装、输出重复 helper 需引入 runtime 插件。官方文档见 Babel Documentation。