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實現了大部分的ES5、6、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",
},