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常用到以下几个模块:
- 核心模块@babel/core,提供核心功能,用户可以在javascript代码中使用babel。
- 命令行模块@babel/cli,在用户终端中通过命令使用babel
- preset-env,默认的preset,支持将ES6代码转换为支持的 javascript代码
- 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
等,使用时需要注意。