babel基礎配置

babel

標籤（空格分隔）： babel

---

babel

• Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。
• Babel 會在正在被轉錄的文件的當前目錄中查找一個 .babelrc 文件。 若是不存在，它會遍歷目錄樹，直到找到一個 .babelrc 文件，或一個 package.json 文件中有 "babel": {}
• babel6將babel全家桶拆分紅了許多不一樣的模塊(rc是run command的縮寫)

依賴

babel-loader：使用es6或加載模塊時，對es6代碼進行預處理，轉爲es5語法。
babel-core：容許咱們去調用babel的api，能夠將js代碼分析成ast（抽象語法樹），方便各個插件分析語法進行相應的處理.
babel-preset-env：推薦preset，好比es2015，es2016，es2017，latest，env（包含前面所有）
babel-polyfill：它效仿一個完整的ES2015+環境，使得咱們可以使用新的內置對象好比 Promise，好比 Array.prototype.includes 和生成器函數（提供給你使用 regenerator 插件）。爲了達到這一點， polyfill 添加到了全局範圍，就像原生類型好比 String 同樣。
babel-runtime babel-plugin-transform-runtime：這個插件能自動爲項目引入polyfill和helpers

presets

• babel5會默認轉譯ES6和jsx語法，babel6轉譯的語法都要在perset中配置，preset簡單說就是一系列plugin包的使用。
• 預設就是一系列插件的集合，把以前的參數保存爲一個預設，下次就能直接使用。
• 基礎配置以下：（設置轉碼規則和插件）

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

• presets字段設定轉碼規則，官方提供如下的規則集，按需安裝。
• 能夠看到提案在進入stage3階段時就已經在一些環境被實現，在stage2階段有babel的實現。

# ES2015轉碼規則
babel-preset-es2015
# react轉碼規則
babel-preset-react
# ES7不一樣階段語法提案的轉碼規則（共有4個階段）
babel-preset-stage-0
babel-preset-stage-1: draft - 必須包含2個實驗性的具體實現，其中一個能夠是用轉譯器實現的，例如Babel。
babel-preset-stage-2: candidate - 至少要有2個符合規範的具體實現。
babel-preset-stage-3

配置：

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

babel-preset-env

此段內容來自於babel到底該如何配置？

• 上面這些preset官方如今都已經不推薦了,官方惟一推薦preset：babel-preset-env
• 這款preset能靈活決定加載哪些插件和polyfill

// cnpm install -D babel-preset -env
{
    "presets": [
        ["env", {
            "targets": { //指定要轉譯到哪一個環境
                //瀏覽器環境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node環境
                "node": "6.10", //"current"  使用當前版本的node
                
            },
             //是否將ES6的模塊化語法轉譯成其餘類型
             //參數："amd" | "umd" | "systemjs" | "commonjs" | false，默認爲'commonjs'
            "modules": 'commonjs',
            //是否進行debug操做，會在控制檯打印出全部插件中的log，已經插件的版本
            "debug": false,
            //強制開啓某些模塊，默認爲[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模塊，默認爲[]
            "exclude": ["transform-es2015-for-of"],
            //是否自動引入polyfill，開啓此選項必須保證已經安裝了babel-polyfill
            //參數：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"
  ]
}

plugins

此段內容來自於babel到底該如何配置？

• babel中的插件，經過配置不一樣的插件才能告訴babel，咱們的代碼中有哪些是須要轉譯的。
• 插件官網

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

• transform-runtime,這個插件能自動爲項目引入polyfill和helpers
• polyfill做用是用已經存在的語法和api實現一些瀏覽器尚未實現的api，對瀏覽器的一些缺陷作一些修補。例如Array新增了includes方法，可是低版本的瀏覽器上沒有，就得作兼容處理
• transform-runtime這個插件依賴於babel-runtime

babel-runtime由三個部分組成：

core-js
core-js極其強悍，經過ES3實現了大部分的ES五、六、7的polyfill。
regenerator
regenerator來自facebook的一個庫，用於實現 generator functions。
helpers
babel的一些工具函數，這個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+的環境。babel官方建議只要不在乎babel-polyfill的體積，最好進行全局引入，由於這是最穩妥的方式。
通常的建議是開發一些框架或者庫的時候使用不會污染全局做用域的babel-runtime，而開發web應用的時候能夠全局引入babel-polyfill避免一些沒必要要的錯誤，並且大型web應用中全局引入babel-polyfill可能還會減小你打包後的文件體積（相比起各個模塊引入重複的polyfill來講）。

結合ESLint

• 許多工具須要Babel進行前置轉碼，如ESLint和Mocha
• 在項目根目錄下，新建一個配置文件.eslint，在其中加入parser字段。

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

• 在package.json之中，加入相應的scripts腳本

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

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