Bable的使用

1、bable簡介

babel是一個工具鏈，用於將ES6+語法轉換爲當前版本瀏覽器等環境兼容的javascript代碼。babel目前已經支持了最新版本的javascript語法，對於目前還沒有被瀏覽器支持的語法，能夠經過babel插件支持。

2、配置文件

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