一、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