ES6 转 ES5 完整教程:Babel 安装、配置与命令行使用

作者:慢半拍时间:2026-10-26 09:25:00浏览:544

本文详细讲解如何利用 Babel 将 ES6 代码转换为兼容老版本浏览器的 ES5 代码。内容涵盖 Node.js 环境下的本地安装、.babelrc 配置文件规则设置(如 preset-env),以及使用 @babel/cli 进行命令行转码的具体命令和参数说明,帮助开发者在不支持 ES6 的环境中顺利运行现代 JavaScript 代码。

所需软件环境

Node.js 与 Babel

Babel 是一款主流的 ES6 转码工具,负责将 ES6 语法编写的代码转换为 ES5 标准,从而确保在旧版浏览器中能够正常执行。这使得开发者可以安心使用 ES6 的新特性,无需顾虑运行环境的支持情况。以下是一个简单的转换示例。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

正式进入操作环节,首先需安装 Babel(在此之前请确认已正确安装 Node.js)

推荐在项目目录下局部安装 Babel,而非全局安装;请选择或创建项目目录,例如 E:/wwwroot/babel_test。

所需软件环境

执行以下安装命令:

npm install --save-dev @babel/core

Babel 的配置文件名为 .babelrc,必须放置于项目根目录中。使用 Babel 的首要步骤是创建并配置该文件。该文件用于定义转码规则和插件,其基本结构如下所示。

{
  "presets": [],
  "plugins": []
}

presets 字段用于指定转码规则,官方提供了多种规则集,用户可根据实际需求进行安装。

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# react 转码规则
$ npm install --save-dev @babel/preset-react

随后,将所需的规则添加到 .babelrc 文件中。

 {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

请注意,后续所有 Babel 相关工具和模块的使用,都必须在预先写好 .babelrc 文件的前提下进行。

命令行转码操作

Babel 提供了命令行工具 @babel/cli,专门用于在命令行环境中执行代码转码任务。

其安装命令如下所示。

npm install --save-dev @babel/cli

基本使用方法如下。

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
 npx babel example.js --out-file compiled.js
# 或者
 npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
 npx babel 源目录 --out-dir 转后目录
# 或者
 npx babel 源目录 -d 转后目录

# -s 参数生成source map文件
 npx babel 源目录 -d 转后目录 -s

若觉得本地配置较为繁琐,也可通过在线转换工具 1 或在线转换工具 2 进行快速处理。

至此,关于 ES6 代码转 ES5 的教程(含 Babel 安装与使用)介绍完毕。如需了解更多 ES6 转 ES5 相关内容,请搜索本站往期文章或继续阅读后续相关文章,感谢大家的支持!

作者最新文章