Babel 入门指南

​⚠️ 注意：

Babel 可以与很多构建工具（如 Browserify、Grunt、Gulp 等）进行集成。由于本教程选择 Webpack ，所以只讲解与 Webpack 的集成。想了解如何与其它工具集成，请参考：官方文档 - installation

简介

Babel 是一个通用的多用途 JavaScript 编译器。

Babel 能做什么？

• Babel 通过语法转换来支持最新版本的 JavaScript （ES6），而不用等待浏览器的支持。

• Babel 可以转换 React 的 JSX 语法和删除类型注释。

• Babel 是由插件构建的。因此，你可以根据自己的需要订制。

• 支持 source map ，所以您可以轻松调试您编译的代码。

Babel 不能做什么？

• Babel 只转换语法（如箭头函数），不支持新的全局变量。但是，您可以使用 babel-polyfill 来辅助支持。

安装 Babel

babel-cli

babel-cli 是 Babel 的命令行工具。

安装

# 本地安装

$ npm install --save-dev babel-cli

# 全局安装

$ npm install --global babel-cli

用法

# 将编译后的结果直接输出至终端

$ babel example.js

# 将结果写入到指定的文件

$ babel example.js --out-file compiled.js

$ babel example.js -o compiled.js

# 将一个目录整个编译成一个新的目录

$ babel src --out-dir lib

$ babel src -d lib

与 package.json 集成

​