Babel 入门教程 - 阮一峰的网络日志

简介

《Babel 入门教程》是阮一峰在其网络日志（2016年1月25日）上发布的一篇技术文章，节选自其新书《ES6 标准入门（第二版）》第一章。Babel 是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码，从而在现有 JavaScript 环境执行。这意味着开发者可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。例如，箭头函数等尚未广泛支持的特性，经 Babel 转码为普通函数后就能正常运行。

主要功能

本文详细介绍了 Babel 生态中多个工具与模块的使用方法：

• 配置文件 .babelrc：Babel 的配置文件，存放于项目根目录，用于设置转码规则（presets）和插件（plugins）。官方提供 es2015、react、stage-0~3 等规则集供安装选用。
• 命令行转码 babel-cli：用于命令行转码，支持输出到标准输出、写入文件、整个目录转码及生成 source map。建议安装在项目内并通过 npm run build 调用，避免全局依赖。
• babel-node：随 babel-cli 安装的命令，提供支持 ES6 的 REPL 环境，可直接运行 ES6 脚本，也可在项目中替代 node 执行脚本。
• babel-register：改写 require 命令，为加载的 .js、.jsx、.es、.es6 文件自动先转码；只对 require 加载的文件生效，且因实时转码只适合开发环境。
• babel-core：供代码调用 Babel API 进行转码，支持字符串、文件（异步/同步）、AST 等多种转码方式。
• babel-polyfill：由于 Babel 默认只转换句法而不转换新 API（如 Promise、Set 等），该模块为当前环境提供垫片，需在脚本头部引入。
• 浏览器环境：Babel 6.0 起不直接提供浏览器版本，可用 5.x 版 babel-core 获取 browser.js，或使用 babel-standalone 插入网页；也可配合 Browserify 等工具打包。网页实时转码会影响性能，生产环境应加载已转码脚本。
• 在线转换：Babel 提供 REPL 在线编译器，可在线将 ES6 代码转为 ES5 代码并直接插入网页运行。
• 与其他工具配合：列举了 ESLint（通过 babel-eslint 做静态检查）和 Mocha（测试框架通过 babel-core/register 转码测试脚本）的集成方式。

适用场景

• 在现有不支持 ES6 的 JavaScript 环境中，使用 ES6 语法编写并运行程序。
• 前端或 Node.js 项目中进行 ES6 到 ES5 的构建转码、开发调试（REPL、require 钩子）。
• 浏览器端临时运行或学习 ES6 代码（通过在线编译器或 standalone 版本）。
• 将 Babel 作为前置转码工具接入 ESLint、Mocha 等开发测试流程。