JavaScript 中 Babel 怎么配置将 ES6+ 代码转换为 ES5-js教程-PHP中文网

babel 将 es6+ 转为 es5 的关键是选对预设、配好目标环境、补全运行时支持；需本地安装 @babel/core、@babel/cli、@babel/preset-env 及 core-js 与 regenerator-runtime，并在配置中指定 targets、usebuiltins: "usage" 和 corejs: 3，同时在入口文件顶部显式引入 'core-js/stable' 和 'regenerator-runtime/runtime'。

javascript 中 babel 怎么配置将 es6+ 代码转换为 es5

Babel 将 ES6+ 转为 ES5，核心是**选对预设、配好目标环境、补全运行时支持**。不是装上就能用，关键在配置是否匹配你的实际运行场景。

安装必要依赖

项目本地安装（不推荐全局）：

@babel/core：转译引擎，必装
@babel/cli：命令行工具，用于手动转译（开发调试或简单构建可用）
@babel/preset-env：智能预设，替代旧版 babel-preset-es2015，它会根据目标环境自动启用所需插件
core-js 和 regenerator-runtime：提供 Promise、Array.from、async/await 等 API 的 polyfill（语法转译 ≠ API 支持）

配置目标浏览器兼容范围

在 babel.config.js（推荐）或 .babelrc 中指定目标环境，这是决定“转多少、怎么转”的关键：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11",
        "chrome": "49",
        "firefox": "52",
        "safari": "10"
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

说明：

targets 明确列出最低支持版本，Babel 会只转译这些版本不支持的语法和 API
useBuiltIns: "usage" 表示按需引入 core-js 模块（比如你用了 Array.from()，Babel 才自动加 import 'core-js/stable/array/from'）
corejs: 3 指定使用 core-js v3，覆盖更全，且与现代 Babel 兼容

确保 polyfill 正确生效

仅靠 Babel 转译语法，无法让新 API 在老环境运行。必须显式引入 polyfill：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

如果入口文件是 JS（如 index.js），在最顶部加：

import 'core-js/stable';<br>import 'regenerator-runtime/runtime';

如果是纯 HTML + script 标签方式，需先加载：

<script src="node_modules/core-js/stable/index.js"></script><br><script src="node_modules/regenerator-runtime/runtime.js"></script>

注意：babel-polyfill 已废弃，不要用；也不要直接 import 'core-js'（v3 不再导出全局污染版）

常用转译命令示例

配合 package.json 的 scripts 使用更方便：

单文件：babel src/index.js -o dist/index.js
整个目录：babel src --out-dir dist
带 source map：babel src --out-dir dist --source-maps
监听修改自动转译（适合开发）：babel src --out-dir dist --watch

建议把命令写进 package.json：

"scripts": {
  "build": "babel src --out-dir dist --source-maps"
}

然后运行 npm run build 即可。

不复杂但容易忽略

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南