Babel 需配置目标环境与转换策略才能安全降级新语法，安装@babel/core、@babel/cli、@babel/preset-env，通过babel.config.json指定targets、useBuiltIns: "usage"和corejs: 3，并配合core-js与regenerator-runtime补全API。
Babel 不是开箱即用的“一键转换器”，它需要明确告诉它：目标环境是什么、哪些语法要转、哪些 API 要补。配置对了，才能把 const、async/await、?. 这些新特性安全落地到 IE11 或 Chrome 58 这类旧环境。
安装核心工具链
先装三个必需包：
-
@babel/core：Babel 的核心编译引擎，所有转换都靠它驱动 -
@babel/cli：命令行接口，支持直接用npx babel转换单个文件或整个目录 -
@babel/preset-env：智能预设，能根据目标浏览器自动决定转哪些语法、不转哪些（比如 Chrome 90+ 已原生支持??，就不用转）
执行命令安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
立即学习“Java免费学习笔记（深入）”；
配置目标环境与转换策略
在项目根目录新建 babel.config.json（推荐）或 .babelrc，写入如下内容：
{<br> "presets": [<br> ["@babel/preset-env", {<br> "targets": {<br> "ie": "11",<br> "chrome": "67",<br> "firefox": "60"<br> },<br> "useBuiltIns": "usage",<br> "corejs": 3<br> }]<br> ]<br>}
说明：
-
targets告诉 Babel 兼容哪些浏览器版本，它会查 caniuse.com 数据，只转那些环境不支持的语法 -
useBuiltIns: "usage"表示按需注入 polyfill：你代码里写了Promise.allSettled()，Babel 才引入对应 polyfill；没写就不会加，避免体积膨胀 -
corejs: 3指定使用 core-js v3 提供的 API 垫片，比 v2 更精准、更轻量
补充 API 兼容性（polyfill）
Babel 默认只处理语法（如 class → function），不处理全局 API（如 Array.from、Object.assign、Promise）。要补上这些，需两步：
- 安装依赖：
npm install --save core-js@3 regenerator-runtime - 在项目入口文件（如
index.js）顶部添加两行：
import 'core-js/stable';<br>import 'regenerator-runtime/runtime';
⚠️ 注意：如果用了 useBuiltIns: "usage"，就不需要全量引入 core-js/stable，只需确保每个用到新 API 的文件顶部有对应 import（Babel 会自动替换为最小模块），例如写了个 [1,2].flat()，Babel 会自动插入 import "core-js/modules/array.flat";
运行转换命令
假设源码在 src/ 目录，想输出到 lib/：
npx babel src --out-dir lib --source-maps
常用参数说明：
-
--out-dir：指定输出目录 -
--source-maps：生成 source map，方便调试原始 ES6 代码 -
--watch：监听文件变化，自动重编译（开发时用）
也可以封装成 npm script，在 package.json 的 scripts 中加一行：
"build": "babel src --out-dir lib --source-maps"，之后直接运行 npm run build 即可。
与构建工具集成（如 Webpack）
实际项目中，通常不单独调用 Babel CLI，而是通过 babel-loader 接入 Webpack：
- 安装：
npm install --save-dev babel-loader - 在
webpack.config.js的module.rules中添加：
{<br> test: /\.js$/,<br> exclude: /node_modules/,<br> use: {<br> loader: 'babel-loader',<br> options: { cacheDirectory: true } // 开启缓存，提升二次构建速度<br> }<br>}
此时 Webpack 会自动读取你已配置好的 babel.config.json，无需重复声明 preset。
