babel 是一个 javascript 编译器，核心作用是将现代 js 语法（如箭头函数、class、解构赋值、可选链等）转译为向后兼容的旧版代码（如 es5），确保在老旧浏览器中正常运行；它只处理语法转换，不提供 promise、array.from 等 api 的 polyfill，需配合 core-js 和 regenerator-runtime 使用。
Babel 是一个 JavaScript 编译器，核心作用是把现代 JS 语法（ES2015+）转换成向后兼容的、能在旧版浏览器中安全运行的代码。它不解决运行时缺失的 API（如 Promise、Array.from），但能准确处理语法层面的兼容性问题——比如箭头函数、解构赋值、类、可选链、顶层 await 等。
明确 Babel 的能力边界
Babel 只做语法转译（syntax transformation），不是 polyfill 提供者：
- ✅ 能转：
const [a, b] = arr→var _arr = arr; var a = _arr[0]; var b = _arr[1]; - ✅ 能转：
class Foo { constructor() {} }→ 基于function和原型的手动模拟 - ❌ 不转：
arr.includes(x)或new Promise()—— 这些需要@babel/polyfill（已弃用）或更推荐的core-js+regenerator-runtime
配置 .babelrc 或 babel.config.json
推荐使用 babel.config.json（项目级配置，支持 monorepo），关键字段包括：
-
presets：预设组合，常用
@babel/preset-env，它会根据targets自动推导需转译的语法特性 -
plugins：按需启用插件，如
@babel/plugin-proposal-optional-chaining（可选链）、@babel/plugin-transform-runtime（复用 helper 函数，减小包体积） -
targets：指定目标环境，例如
{"chrome": "58", "ie": "11"}或使用browserslist配置统一维护
示例 babel.config.json：
{
"presets": [
["@babel/preset-env", {
"targets": { "ie": "11" },
"useBuiltIns": "usage",
"corejs": 3
}]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
正确引入运行时补丁（polyfill）
仅靠 Babel 转译无法让旧环境识别新 API。若代码中直接用了 Promise、Array.from、Object.assign 等，必须补充 polyfill：
- 推荐方式：在入口文件顶部添加
import 'core-js/stable'; import 'regenerator-runtime/runtime'; -
useBuiltIns: 'usage'会让 Babel 检测源码中实际使用的 API，并只注入对应 polyfill，避免全量加载 - 注意：不要在工具库（library）中全局导入 polyfill；应由使用方（app）负责，或通过
@babel/plugin-transform-runtime局部注入 helper 和 regenerator
与构建工具集成（以 Webpack 为例）
Babel 通常不单独运行，而是作为 loader 接入打包流程：
- 安装依赖：
npm install -D babel-loader @babel/core @babel/preset-env - Webpack 配置中添加 rule：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
}
确保 .babelrc 或 babel.config.json 存在于项目根目录，Babel 才能读取配置生效。
