摘要：基礎(chǔ)配置如下設(shè)置轉(zhuǎn)碼規(guī)則和插件字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，按需安裝。結(jié)合許多工具需要進行前置轉(zhuǎn)碼，如和在項目根目錄下，新建一個配置文件，在其中加入字段。在之中，加入相應(yīng)的腳本部分參考到底該如何配置

標簽（空格分隔）： babel

Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

Babel 會在正在被轉(zhuǎn)錄的文件的當前目錄中查找一個 .babelrc 文件。 如果不存在，它會遍歷目錄樹，直到找到一個 .babelrc 文件，或一個 package.json 文件中有 "babel": {}

babel6將babel全家桶拆分成了許多不同的模塊(rc是run command的縮寫)

babel-loader：使用es6或加載模塊時，對es6代碼進行預(yù)處理，轉(zhuǎn)為es5語法。
babel-core：允許我們?nèi)フ{(diào)用babel的api，可以將js代碼分析成ast（抽象語法樹），方便各個插件分析語法進行相應(yīng)的處理.
babel-preset-env：推薦preset，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一個完整的ES2015+環(huán)境，使得我們能夠使用新的內(nèi)置對象比如 Promise，比如 Array.prototype.includes 和生成器函數(shù)（提供給你使用 regenerator 插件）。為了達到這一點， polyfill 添加到了全局范圍，就像原生類型比如 String 一樣。
babel-runtime babel-plugin-transform-runtime：這個插件能自動為項目引入polyfill和helpers

babel5會默認轉(zhuǎn)譯ES6和jsx語法，babel6轉(zhuǎn)譯的語法都要在perset中配置，preset簡單說就是一系列plugin包的使用。

預(yù)設(shè)就是一系列插件的集合，把之前的參數(shù)保存為一個預(yù)設(shè)，下次就能直接使用。

基礎(chǔ)配置如下：（設(shè)置轉(zhuǎn)碼規(guī)則和插件）

{
  "presets": [],
  "plugins": []
}

presets字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，按需安裝。

可以看到提案在進入stage3階段時就已經(jīng)在一些環(huán)境被實現(xiàn)，在stage2階段有babel的實現(xiàn)。

# ES2015轉(zhuǎn)碼規(guī)則
babel-preset-es2015
# react轉(zhuǎn)碼規(guī)則
babel-preset-react
# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有4個階段）
babel-preset-stage-0
babel-preset-stage-1: draft - 必須包含2個實驗性的具體實現(xiàn)，其中一個可以是用轉(zhuǎn)譯器實現(xiàn)的，例如Babel。
babel-preset-stage-2: candidate - 至少要有2個符合規(guī)范的具體實現(xiàn)。
babel-preset-stage-3

配置：

{
    "presets": [
      "es2015",
      "stage-2"
    ],
    "plugins": []
  }

babel-preset-env

此段內(nèi)容來自于babel到底該如何配置？

上面這些preset官方現(xiàn)在都已經(jīng)不推薦了,官方唯一推薦preset：babel-preset-env

這款preset能靈活決定加載哪些插件和polyfill

// cnpm install -D babel-preset -env
{
    "presets": [
        ["env", {
            "targets": { //指定要轉(zhuǎn)譯到哪個環(huán)境
                //瀏覽器環(huán)境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node環(huán)境
                "node": "6.10", //"current"  使用當前版本的node
                
            },
             //是否將ES6的模塊化語法轉(zhuǎn)譯成其他類型
             //參數(shù)："amd" | "umd" | "systemjs" | "commonjs" | false，默認為"commonjs"
            "modules": "commonjs",
            //是否進行debug操作，會在控制臺打印出所有插件中的log，已經(jīng)插件的版本
            "debug": false,
            //強制開啟某些模塊，默認為[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模塊，默認為[]
            "exclude": ["transform-es2015-for-of"],
            //是否自動引入polyfill，開啟此選項必須保證已經(jīng)安裝了babel-polyfill
            //參數(shù)：Boolean，默認為false.
            "useBuiltIns": false
        }]
    ]
}

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    "syntax-dynamic-import",
    "transform-es2015-modules-commonjs"
  ]
}

此段內(nèi)容來自于babel到底該如何配置？

babel中的插件，通過配置不同的插件才能告訴babel，我們的代碼中有哪些是需要轉(zhuǎn)譯的。

插件官網(wǎng)

{
    "plugins": [
        ["transform-es2015-arrow-functions", { "spec": true }]
    ]
}

transform-runtime,這個插件能自動為項目引入polyfill和helpers

polyfill作用是用已經(jīng)存在的語法和api實現(xiàn)一些瀏覽器還沒有實現(xiàn)的api，對瀏覽器的一些缺陷做一些修補。例如Array新增了includes方法，但是低版本的瀏覽器上沒有，就得做兼容處理

transform-runtime這個插件依賴于babel-runtime

babel-runtime由三個部分組成：

core-js
core-js極其強悍，通過ES3實現(xiàn)了大部分的ES5、6、7的polyfill。
regenerator
regenerator來自facebook的一個庫，用于實現(xiàn) generator functions。
helpers
babel的一些工具函數(shù)，這個helpers和使用babel-external-helpers生成的helpers是同一個東西

配置transform-runtime

{
    "plugins": [
        ["transform-runtime", {
            "helpers": false, //自動引入helpers
            "polyfill": false, //自動引入polyfill（core-js提供的polyfill）
            "regenerator": true, //自動引入regenerator
        }]
    ]
}

比較transform-runtime與babel-polyfill引入墊片的差異：

使用runtime是按需引入，需要用到哪些polyfill，runtime就自動幫你引入哪些，不需要再手動一個個的去配置plugins，只是引入的polyfill不是全局性的，有些局限性。而且runtime引入的polyfill不會改寫一些實例方法，比如Object和Array原型鏈上的方法，像前面提到的Array.protype.includes。
babel-polyfill就能解決runtime的那些問題，它的墊片是全局的，而且全能，基本上ES6中要用到的polyfill在babel-polyfill中都有，它提供了一個完整的ES6+的環(huán)境。babel官方建議只要不在意babel-polyfill的體積，最好進行全局引入，因為這是最穩(wěn)妥的方式。
一般的建議是開發(fā)一些框架或者庫的時候使用不會污染全局作用域的babel-runtime，而開發(fā)web應(yīng)用的時候可以全局引入babel-polyfill避免一些不必要的錯誤，而且大型web應(yīng)用中全局引入babel-polyfill可能還會減少你打包后的文件體積（相比起各個模塊引入重復的polyfill來說）。

許多工具需要Babel進行前置轉(zhuǎn)碼，如ESLint和Mocha

在項目根目錄下，新建一個配置文件.eslint，在其中加入parser字段。

{
  "parser": "babel-eslint",
  "rules": {
    ...
  }
}

在package.json之中，加入相應(yīng)的scripts腳本

"scripts": {
  "lint": "eslint --ext .js,.vue src",
},

部分參考：
babel到底該如何配置？