[TOC]
* * * * *
### **一、babel 介紹**
`Babel `是一個 `JavaScript `編譯器，它可以將` es6`中的代碼編譯成目前大多數瀏覽器識別的`es5`代碼。
例如它將以ES6代碼下：
```JavaScript
let test = a =>console.log(a)
```
編譯成ES5 代碼：
```JavaScript
"use strict";
var test = function (a){
return a
}
```
并且 babel 還支持 react的 JSX 語法
[babel中文網](https://www.babeljs.cn/)
### **二、babel 的使用方式**
#### **1. 瀏覽器中**
在頁面中引入
```JavaScript
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```
然后在 `.babelrc.` 配置文件中進行配置
#### **2. 命令使用**
首先先安裝 `babel-cli`
```JavaScript
npm install babel-cli --save-dev // 局部安裝的
```
然后可以執行下面命令
**需要注意的是**：執行以下命令前也需要先在 `.babelrc. `配置文件中進行配置, 不然不會編譯文件
- 在命令版中輸出編譯的test.js 文件
```JavaScript
npx babel test.js
```
- 將編譯文件輸出指定的文件
```JavaScript
$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js
```
- 編譯整個文件夾中的文件
```JavaScript
$ babel src --out-dir lib
# 或
$ babel src -d lib
```
另外還有一些其他的使用方法，常見的比如在webpack中使用，更多使用場景見 [官網](https://www.babeljs.cn/docs/setup/)
### **三、`.babelrc.` 配置文件**
在babel 編譯es6之前需要知道該以哪種規則或條件去編譯，而這些條件和編譯方式我們寫在`.babelrc.` 配置文件 中,也可在通過 `package.json` 來配置`.babelrc.` ，`Babel `會在正在被轉錄的文件的當前目錄中查找一個` .babelrc` 文件。 如果不存在，它會遍歷目錄樹，直到找到一個 `.babelrc` 文件，或一個 `package.json` 文件中有` "babel": {} `。另外我們還要下載一些相應的編譯插件。
中文官網：[.babelrc 的使用方法](https://www.babeljs.cn/docs/usage/babelrc/)
```JavaScript
{
"presets": [],
"plugins": []
}
```
#### **1. 編譯插件**
> 官方預設(preset), 有兩種，一個是按年份(babel-preset-2017)，一個是按階段(babel-preset-stage-X)。 這主要是根據TC39 委員會ECMASCRPIT 發布流程來制定的。TC39 委員會決定，從2016年開始，每年都會發布一個版本，它包括每年期限內完成的所有功能，同時ECMAScript的版本號也按年份編制，就有了ES2016, ES2017。所以也就有了babel-present-2016, babel-preset-2017， 對每一年新增的語法進行轉化。babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。
以下是4 個不同階段的（打包的）預設：
- babel-preset-stage-0
- babel-preset-stage-1
- babel-preset-stage-2
- babel-preset-stage-3
`babel-preset-latest` 編譯插件是一個特殊的presets，包括了 `es2015`，`es2016`，`es2017`的插件（目前為止，以后有es2018也會包括進去）。即總是包含最新的編譯插件。
由于現在瀏覽器對ES6 的支持度越來越高，如果我們使用`babel-preset-latest` 編譯插件則會將一些本不需要的編譯（大多數瀏覽器都支持的ES6 語法）編譯成臃腫的es5語法。為此我們可以使用 `babel-preset-env`編譯插件
#### **2. `.babelrc.` 的配置**
安裝 `babel-preset-env`編譯插件
```JavaScript
npm install -D babel-preset-env
```
在`.babelrc.` 配置文件中進行配置，沒有選項的默認行為會運行所有轉換（行為與babel-preset-latest相同）
```JavaScript
{
"presets": [
"env",
{
"targets":{
"browsers": ["last 2 versions", "ie >=8 "] // 指定支持主流瀏覽器最新的兩個版本以及IE 7+:
},
"plugins":["transform-vue-jsx"], // 使用編譯擴展插件，這里使用的vue擴展插件
"node": true, // 針對當前node版本進行編譯
"modules": "amd" // 啟用將ES6模塊語法轉換為另一種模塊類型
}
]
}
```
當然我們還可以設置固定版本的瀏覽器：
```JavaScript
"targets": {
"chrome": 60
}
```
支持超過市場份額5%的瀏覽器:
```JavaScript
"targets": {
"browsers": "> 5%"
}
```
babel 的更多配置 [http://babeljs.io/docs/en/babel-preset-env/](http://babeljs.io/docs/en/babel-preset-env/)
[參考文章](https://segmentfault.com/a/1190000008159877#articleHeader6)
