babel-preset-env

1、做用

根據你支持的環境自動決定適合你的Babel插件

2、歷史版本（已被棄用）

一、babel-preset-latest

1.1 特色

包含了全部年度預設（ babel-preset-es201五、babel-preset-es201六、babel-preset-es2017），無需用戶單獨指定某個預設。

1.2 缺點

部分轉碼多餘 ：若是使用默認設置，babel會將全部ES6與ES6+的新特性轉成複雜的es5的代碼。可是大部分如今瀏覽器已經支持ES6的部分特性。

二、babel-preset-es201五、babel-preset-es201六、babel-preset-es2017

2.1 特色

分別支持不一樣版本的ECMA規範，es2015將es6轉成es5，es2016只將比es6新增長的特性轉成es5。es2017也是隻將比es6新增長的特性轉成es5

2.2 缺點

若是同時要使用這三個插件，配置項書寫麻煩

3、 配置

一、在沒有任何配置選項的狀況下

babel-preset-env 與 babel-preset-latest的行爲相同

//默認設置
{
  "presets": ["env"]
}

二、stage-x（實驗階段presets）

默認不會包含stage-x插件,須要手動配置支持

//設置 stage-2的插件
{
  "presets": [
    ["env"],
    "stage-2"
  ]
}

三、能夠設置的選項

如下僅爲部分經常使用選項，其餘請看官網

3.1 target 設置支持的運行環境

{ [string]: number | string }, 默認爲 {}。

3.2 modules 將ES6模塊語法轉換爲另外一種模塊類型

"amd" | "umd" | "systemjs" | "commonjs" | false， 默認爲 "commonjs".

將其設置爲 false 就不會轉換模塊。

3.3 debug console.log輸出插件等信息

boolean， 默認爲 false。

將使用的目標瀏覽器/插件和在 數據插件版本 中指定的版本用 console.log 輸出。

3.4 useBuiltIns

boolean，默認爲 false。

將polyfill應用於 babel-preset-env 中。

babel爲新特性提供了polyfill，（例如爲內置對象，靜態方法，實例方法，生成器函數等提供了支持。 babel-preset-env能夠基於特定環境引入須要的polyfill。

兩種使用方法:

• 方法一 core.js， 根據須要引入ES6，ES6+標準方法的實現。

//安裝 polyfill
 npm install core-js --save
      
 //使用polyfill
 import "core-js"

• 方法二 babel-polyfill，包含了core-js 和regenerate-runtime (提供 async 語法編譯後的運行時環境)。

//安裝 polyfill
 npm install babel-polyfill --save
    
 //使用polyfill
 import "babel-polyfill";

兩種方法最終都會根據環境轉譯成特定的polyfill。 好比:

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
import "core-js/modules/web.timers";
import "core-js/modules/web.immediate";
import "core-js/modules/web.dom.iterable";

在整個應用裏只能引入一次polyfill，能夠在 「main」 模塊裏一次引入。屢次 imports 或 requires babel-polyfill 會引發報錯，由於它可能致使全局衝突和其餘難以追蹤的問題。

例如

{
  "presets": [
    [ "env", {
      "targets": {
        "safari": 10 //目標運行平臺爲safari10
      },
      "modules": false,//不轉換模塊
      "useBuiltIns": true,//使用polyfill
      "debug": true 
    }]
  ]
}

4、運行原理

下載 babel-preset-env源碼 ：https://github.com/babel/babe...

一、生成babel插件與平臺的對應關係

按期執行 scripts/build-data.js用來生成最新的 build-ins.json 與 plugins.json

npm run build-data

1.1 使用 ECMA標準兼容性列表compat-table 肯定平臺（瀏覽器…）不一樣版本對js新特性的支持狀況。

1.2 使用 data/build-in-features.js 、 data/plugin-features.js 肯定babel插件與js新特性的映射關係，以下圖

1.3 使用 ECMA標準兼容性列表 compat-table 與 data/build-in-features.js 、plugin-features.js 相匹配，來獲得 babel的插件與各個平臺版本的對應關係，以下build-ins.json中的部分代碼

二、配置與解析tagets

使用browserslist 支持的有效的查詢格式來書寫配置中的targets， 在源碼內部也會使用 browserslist 來解析這些信息

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

三、肯定在 preset 的插件中支持的最低瀏覽器版本。

若是你的項目須要支持 IE8 和 Chrome 55 。它必須包括IE8所支持的全部插件。

四、支持 "node": "current" 用來編譯當前項目的node版本。

例如，若是你基於Node 6構建項目，箭頭函數將不會被轉換。但項目基於Node 0.12的時候，它們將會被轉換