一、bable 简介
babel 是一个工具链,用于将 ES6+ 语法转换为当前版本浏览器等环境兼容的 javascript 代码。babel 目前已经支持了最新版本的 javascript 语法,对于目前尚未被浏览器支持的语法,可以通过 babel 插件支持。
二、配置文件
Babel 有两种并行的配置文件的方式,可以一起使用,也可以单独使用。
项目范围的配置
文件相关配置
.babelrc(和.babelrc.js)文件
package.json 中 ”babel” 关键字的部分
1. 项目范围的配置
根目录创建 babel.config.js 文件。babel.config.js 的官方文档在这里 babel
2. 文件相关配置
1).babelrc(和.babelrc.js)文件
在 Babel 执行编译的过程中,会从项目的根目录下的 .babelrc 文件中读取配置。.babelrc 是一个 json 格式的文件。在.babelrc 配置文件中,主要是对预设 (presets) 和 插件 (plugins) 进行配置。.babelrc 配置文件一般为如下:
{
“plugins”: [
[
“transform-runtime”,
{
“polyfill”: false
}
]
],
“presets”: [
[
“env”,
{
“modules”: false
}
],
“stage-2”,
“react”
]
}
plugins 该属性是告诉 babel 要使用那些插件,这些插件可以控制如何转换代码。presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性,presets 是一组 Plugins 的集合。官方提供以下的规则集,你可以根据需要安装。
# ES2015 转码规则
$ npm install –save-dev babel-preset-es2015
# react 转码规则
$ npm install –save-dev babel-preset-react
# ES7 不同阶段语法提案的转码规则(共有 4 个阶段),选装一个
$ npm install –save-dev babel-preset-stage-0
$ npm install –save-dev babel-preset-stage-1
$ npm install –save-dev babel-preset-stage-2
$ npm install –save-dev babel-preset-stage-3