一文帶你瞭解babel-preset-env

相信不少人都和我同樣，剛接觸babel的時候都是使用 babel-preset-es2015 這個預設套餐的，可是顯然目前而言 babel-preset-env 會是一個更好的選擇，babel-preset-env 能夠根據配置的目標瀏覽器或者運行環境來自動將ES2015+的代碼轉換爲es5。

吸引人的地方在於咱們能夠經過 [.browserslistrc](https://github.com/browserslist/browserslist) 文件來指定特定的目標瀏覽器。固然也能夠經過targets選項的browsers選項指定。不過若是你的目標瀏覽器支持 es modules 特性，browsers 選項則會失效，以下：

{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "esmodules": true
            }
        ]
    ]
}
複製代碼

一樣也能夠指定Node.js的版本：

{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "node": "6.10"
            }
        ]
    ]
}
複製代碼

若是node的選項值爲 current 則說明是指定運行時的node.js版本。

{
    "presets": [
        ["@babel/preset-env"
            "targets": {
                "node": "current"
            }
        ]
    ]
}
複製代碼

咱們須要知道的是制定個targets的browsers時使用的是 browserslist ，咱們能夠在 .babelrc 文件、package.json文件、browserslist中指定瀏覽器版本選項，優先級規則是 .babelrc文件定義了則會忽略 browserslist、.babelrc 沒有定義則會搜索 browserslist 和 package.json 二者應該只定義一個，不然會報錯。

babel-preset-env 的主要參數選項有：

• targets

• targets.node

• targets.browsers

• spec : 啓用更符合規範的轉換，但速度會更慢，默認爲 false

• loose：是否使用 loose mode，默認爲 false

• modules：將 ES6 module 轉換爲其餘模塊規範，可選 "adm" | "umd" | "systemjs" | "commonjs" | "cjs" | false，默認爲 false

• debug：啓用debug，默認 false

• include：一個包含使用的 plugins 的數組

• exclude：一個包含不使用的 plugins 的數組

• useBuiltIns：爲 polyfills 應用 @babel/preset-env ，可選 "usage" | "entry" | false，默認爲 false

Refs:

README of babel-preset-env