Bable的使用

迈不过友情╰ 2022-04-23 13:52 116阅读 0赞

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

[babel]: https://babel.docschina.org/docs/en/config-files#project-wide-configuration