摘要：版本截圖當(dāng)然，搜狗瀏覽器市場(chǎng)份額也不低，官方最新版本是，內(nèi)核版本是，為之一驚。上面代碼的和分別是什么含義呢如果是下面的配置有何不可呢首先來明確一個(gè)概念是一系列的集合。比如做移動(dòng)端開發(fā)不需要考慮之類的端產(chǎn)品線只考慮指定的瀏覽器等。

因babel的版本從5升級(jí)到6有很多改動(dòng)，比如babel本身不再提供任何transform的工作，都需要借助插件來完成，本文的所有討論都是建立在babel 6之上的。如果只想看結(jié)論，直接跳到文章最后。 ---寫在前面

ES6即ECMAScript 6，是前端開發(fā)的JS最新規(guī)范，現(xiàn)在大家的開發(fā)都在使用ES6，對(duì)此并不陌生了。只是瀏覽器對(duì)ES6的支持并不完整，想要更好讓ES6在各個(gè)平臺(tái)完美運(yùn)行還需一番折騰，特此一敘。下圖是ES6的瀏覽器兼容性一覽表（已ES6的Number為例）：

另外國內(nèi)瀏覽器都號(hào)稱是“雙核”，實(shí)際上瀏覽器的版本號(hào)較新，打包的Webkit內(nèi)核確很低，比如市場(chǎng)份額很高的360安全瀏覽器，最新版本是9.1，Webkit內(nèi)核版本才是55.0.2883，要知道Chrome官方最新版本已是62.0.3202，相差之遠(yuǎn)不甚理解。

版本截圖：

userAgent：
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 QIHU 360SE"

當(dāng)然，搜狗瀏覽器市場(chǎng)份額也不低，官方最新版本是7.1，內(nèi)核版本是49.0.2623，為之一驚。

版本截圖：

userAgent：
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.221 Safari/537.36 SE 2.X MetaSr 1.0"

因此，我們想要在所有的瀏覽器上平穩(wěn)、完美的運(yùn)行ES6代碼，必須要了解它的忠實(shí)伴侶 Babel。

大家可能對(duì)此也并不陌生，但是對(duì)babel的內(nèi)部機(jī)制、插件的作用、兼容的配置還缺乏一些認(rèn)識(shí)，本文就是特意嘗試來補(bǔ)全這些內(nèi)容。

使用babel無非要用到.babelrc文件或者在package.json增加babel字段。我們以.babelrc文件為例：

{
  "presets":["es2015","stage-0"],
  "plugins": ["transform-runtime"]
}

這是最常見的babel配置，然后結(jié)合webpack下的babel-loader完成對(duì)JS代碼的babel編譯。

上面代碼的presets和plugins分別是什么含義呢？如果是下面的配置有何不可呢？

{
  "presets":["es2015","stage-0"]
}

首先來明確一個(gè)概念: presets是一系列plugin的集合。比如上述配置中es2015表示babel-preset-es2015，它包含以下plugin:

check-es2015-constants

transform-es2015-arrow-functions

transform-es2015-block-scoped-functions

transform-es2015-block-scoping

transform-es2015-classes

transform-es2015-computed-properties

transform-es2015-destructuring

transform-es2015-duplicate-keys

transform-es2015-for-of

transform-es2015-function-name

transform-es2015-literals

transform-es2015-modules-commonjs

transform-es2015-object-super

transform-es2015-parameters

transform-es2015-shorthand-properties

transform-es2015-spread

transform-es2015-sticky-regex

transform-es2015-template-literals

transform-es2015-typeof-symbol

transform-es2015-unicode-regex

transform-regenerator

使用presets的好處就是不用再plugins配置里一個(gè)一個(gè)的寫了。

然后，我們通過對(duì)代碼的編譯來看下上面兩個(gè)配置的區(qū)別。源碼如下：

let a=1;
let b=(item)=>{return item+1};
let c="1".padStart(2,"0");
let d=Object.assign({k:2},{t:4});
let e=new Set();

我們使用第二種配置，得到的編譯結(jié)果如下：

"use strict";
var a = 1;
var b = function b(item) {
  return item + 1;
};
var c = "1".padStart(2, "0");
var d = Object.assign({ k: 2 }, { t: 4 });
var e = new Set();

從編譯結(jié)果來看，let、箭頭函數(shù)都被編譯了，然而padStart和Object.assign原樣輸出了。原因很簡(jiǎn)單，let被編譯是使用了es2015中的transform-es2015-block-scoping，箭頭函數(shù)編譯是使用了es2015的transform-es2015-arrow-functions。padStart、Object.assign和Set并未在es2015和state-0中找到對(duì)應(yīng)plugin。我們?cè)偈褂玫谝环N配置編譯，結(jié)果如下：

"use strict";
var _set = require("babel-runtime/core-js/set");
var _set2 = _interopRequireDefault(_set);
var _assign = require("babel-runtime/core-js/object/assign");
var _assign2 = _interopRequireDefault(_assign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var a = 1;
var b = function b(item) {
  return item + 1;
};
var c = "1".padStart(2, "0");
var d = (0, _assign2.default)({ k: 2 }, { t: 4 });
var e = new _set2.default();

從編譯結(jié)果看，let、箭頭函數(shù)、Object.assign、Set都被正確編譯，padStart仍巋然不動(dòng)。在這友情提醒一下，babel-plugin-transform-runtime是依賴babel-runtime的。那么如何讓padStart方法也能被成功編譯呢，這么大的開場(chǎng)白終于聊到了我們今天的主題：babel的polyfill方案。

官方推薦的方式是使用babel-polyfill。

This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.
This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

用最簡(jiǎn)單的方式概括官方的說法就是：只要引入了babel-polyfill你可以大膽的用ES6?；痉椒ㄈ缦拢?/p>

先安裝

npm install --save babel-polyfill

后使用

// 在代碼中顯示調(diào)用
require("babel-polyfill");
// or
import "babel-polyfill";

或者在webpack中配置

module.exports = {
  entry: ["babel-polyfill", "./index.js"]
};

那么問題來了，既然使用這么簡(jiǎn)單，有啥弊端沒？這個(gè)問題的答案也很簡(jiǎn)單：它無疑大大增加了代碼的體積，即使你只有1k的代碼，也會(huì)打包出幾百k出來。如果不在意這個(gè)代碼的體積，肆意大膽的去用吧。如果想做到代碼清爽、合理的利用babel的功能還請(qǐng)繼續(xù)閱讀。

使用babel-polyfill可以不使用presets和transform-runtime，但是不意味著presets和transform-runtime沒有用武之地。在此總結(jié)了幾個(gè)原則：

純業(yè)務(wù)開發(fā)

第一、先要考慮所有兼容的平臺(tái)和環(huán)境，選擇性的使用babel-polyfill和transform-runtime。
通常情況下業(yè)務(wù)代碼較重，再加上業(yè)務(wù)邏輯復(fù)雜的話，使用的ES6語法比較全面很頻繁，還要考慮到各個(gè)小伙伴的代碼兼容性，使用babel-polyfill結(jié)合webpack抽離出公共代碼庫，整體上還是能節(jié)省代碼體積的。如果想全盤使用babel-polyfill并且在此基礎(chǔ)上進(jìn)行優(yōu)化的話，請(qǐng)參考第二點(diǎn)。

第二、放棄使用preset-es2015、preset-state-0，請(qǐng)使用preset-env。
babel-polyfill的引入會(huì)自動(dòng)加入很多代碼，有時(shí)候我們并不完全需要。比如：做移動(dòng)端開發(fā)不需要考慮IE之類的、B端產(chǎn)品線只考慮指定的瀏覽器等。這個(gè)時(shí)候使用prest-env就可以了。配置如下：

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

browsers的可選值參考 browserslist；有幾個(gè)點(diǎn)要提醒一下：

上述的"last 2 versions"是主版本，這樣配置會(huì)引入很多代碼，建議針對(duì)性的配置。

雖然使用了preset-env會(huì)針對(duì)指定的平臺(tái)進(jìn)行編譯代碼，但是要注意，即使你的代碼都是ES5，打包出來的體積也不會(huì)小，因?yàn)樗皇歉鶕?jù)你的代碼來選擇性的編譯，而是根據(jù)平臺(tái)。如果想進(jìn)一步優(yōu)化，如根據(jù)平臺(tái)也要根據(jù)代碼來選擇性的polyfill，請(qǐng)參考 @babel/preset-env

類庫和工具開發(fā)

第一、盡量避免使用babel-polyfill而使用tranform-runtime

If you are looking for something that won"t modify globals to be used in a tool/library, checkout the transform-runtime plugin. This means you won"t be able to use the instance methods mentioned above like Array.prototype.includes.

官方這句話換個(gè)角度講就是類庫的開發(fā)建議使用transform-runtime，它的原則是不改變?cè)玩溕系姆椒?，但是通過babel-runtime或者core-js手動(dòng)引入，這樣不僅代碼優(yōu)雅編譯的包體積會(huì)小很多。

第二、選擇性的使用ES6語法

ES6雖然很強(qiáng)大，但是很多方法使用ES5仍可輕松實(shí)現(xiàn)。看下剛才提及的 Array.prototype.includes方法：

// ES6寫法
let a=[1,2,3];
if(a.includes(1)){
  console.log("1 is finded");
}

// ES5寫法
let a=[1,2,3];
if(a.some((item)=>{return item===1})){
  console.log("1 is finded");
}

這兩個(gè)寫法區(qū)別并不大，但是如果使用ES6的寫法再加上polyfill的引入，代碼要多不少。

兼容到IE8-

請(qǐng)老老實(shí)實(shí)使用babel-polyfill。