Babel介绍

babel对外宣传是“The Compiler for next generation javascript”，即下一代javascript的编译器。简单地说babel是一个工具链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。babel目前已经支持了最新版本的javascript语法，对于目前尚未被浏览器支持的语法，可以通过babel插件支持。

1. 概念介绍

插件：babel的转换功能都是通过插件来实现，babel本身也是构建在插件基础上的。
preset： 预定义的一系列插件的组合，用于将特定的语法转换为当前环境使用的语法（避免了自己一个个挑选插件）。
polyfill：“填充工具”，抹平不同浏览器之间的差异，模拟一个完整的ES2015+环境。

2. 安装

根据需要，我们可以安装babel的核心模块和插件：

npm install --save-dev @babel/core @babel/cli @babel/preset-env 
npm install --save @babel/polyfill

从babel 7开始，所有的babel模块被拆分到不同模块中，所有模块都在@babel空间下。babel常用到以下几个模块：

1. 核心模块@babel/core，提供核心功能，用户可以在javascript代码中使用babel。
2. 命令行模块@babel/cli，在用户终端中通过命令使用babel
3. preset-env，默认的preset，支持将ES6代码转换为支持的 javascript代码
4. polyfill，模拟完整的ES2015+，支持Promise、Array.from、Object.assign等语法，如果不需要全部支持，可以只选择一部分插件。

如果需要使用其他的特性，例如@babel/preset-flow、@babel/preset-react、@babel/typescript，可以自己选择安装。

3. 配置

babel有两种配置方式，一种是.babelrc（.babelrc.js）独立文件方式，一种是package.json中的babel字段方式。

.babelrc方式：

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

Package.json方式：

{ "name": "my-package", "version": "1.0.0", "babel": { "presets": [ ... ], "plugins": [ ... ], } }

4. 编译

命令行编译：
将编译结果输出到命令行： npx babel a.js
将编译结果输出到文件： npx babel a.js --out-file a.out.js
监听文件变化，编译输出到文件： npx babel a.js --watch --out-file a.out.js
编译输出source map文件： npx babel a.js --out-file a.out.js --source-maps
编译一个目录： npx babel src/ --out-dir lib/
将一个目录编译到一个文件中： npx babel src/ --out-file all.js
忽略文件： npx babel src/ --out-dir lib/ --ignore a.js,b.js
使用插件和preset： npx babel src/ --out-dir lib/ --plugins=xxx --presets=xxx

5. 注意

Babel 7中，有些插件已经改名，如@babel/preset-env改成@babel/env，@babel/preset-react改成@babel/react等，使用时需要注意。