Bable的使用

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理