Babel-preset-env：真正的跨版本轉碼器

使用 ES6/7 草案特性編寫代碼並不保證所有瀏覽器都能夠解釋。因此，我們需要使用轉碼器。Babel 是一個非常著名的 JavaScript 轉碼器，它可以將 ES6/ES7 代碼轉換為 ES5 代碼，從而保證代碼在所有瀏覽器中的兼容性。

一、Babel-preset-env是什麼

Babel-preset-env 是一個 Babel 官方提供的轉碼規則集合，它能根據當前環境以及配置的目標瀏覽器或運行環境，自動確定需要轉碼的插件和 polyfill，從而實現最小化的轉碼代碼。

舉個例子，如果你希望你的代碼可以在 IE11 上運行，你可以在 Babel 的配置中設置 target 屬性為 “ie11″，然後就可以使用 Babel-preset-env 轉碼為符合 IE11 標準的 JavaScript 代碼。

二、Babel-preset-env的亮點

1. 模塊化支持：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "chrome": 52
      }
    }],
    "stage-2"
  ]
}

將 modules 設為 false，Babel 轉換時不會將 ES6 模塊化語法轉換為 CommonJS 規範。這是因為現代的瀏覽器都已經支持 ES6 模塊化了，所以不需要再使用 CommonJS 規範。這樣可以保留 tree shaking 的能力，減少打包大小。

2. 按需載入：

{
  "presets": [
    ["env", {
      "useBuiltIns": "usage",
      "corejs": 2,
      "targets": {
        "chrome": 52
      }
    }],
    "stage-2"
  ]
}

useBuiltIns: “usage” 可以根據你的代碼中所使用到的特性，只引入相關的 polyfill。這樣可以減少代碼量，加快應用的響應速度。同時，”corejs”: 2 屬性指定了使用 core-js 2 版本的 polyfill 庫。

3. 支持瀏覽器列表：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "> 1%",
          "last 2 versions",
          "Firefox ESR"
        ]
      }
    }]
  ]
}

Babel-preset-env 支持各種瀏覽器列表。除了常用的 “> 0.5%”, “> 0.25%”, “> 1%”, “> 2%” 等等，還支持 last 2 versions（表示最近兩個版本的瀏覽器），Firefox ESR 等等。

三、正確使用 Babel-preset-env

1. 安裝 Babel-preset-env：

npm install --save-dev babel-preset-env

2. 配置 Babel：

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52
      }
    }],
    "stage-2"
  ]
}

3. 使用 Babel：

在 package.json 中添加 script 命令，然後通過 npm run 命令執行：

{
  "scripts": {
    "build": "babel src -d lib"
  }
}

上方的 babel 命令會將 src 目錄下的文件轉碼到 lib 目錄下面。

四、總結

Babel-preset-env 是一個非常好用的 Babel 插件，它考慮了轉碼的最效率以及最小化的代碼。

在具體使用時，需要根據自身項目實際情況配置 targets，實現按需載入 polyfill。

此外，配合其他 Babel 插件一起使用，可以極大地提高開發效率，讓我們可以儘可能地享受到 ES6/7 提供的新特性。