相信現在很多人在使用react+webpack做專案，然後通過babel來解決ES6/7的相容性問題，對於ie8的相容也有一些經驗和方案。不過今天在解決匯金賬房的ie8相容過程中仍然遇到一個坑，同時發現現有資料的一些問題。

首先說一下相容ie8的通用方案，大家一般是按照 Make your React app work in IE8 中的方法去做，網上也會搜到一些方法，比如新增 transform-es3-property-literals，transform-es3-member-expression-literal , add-module-exports 外掛等，不過它們可能是不同時期的不同解決方案，實際上是在解決同一類問題，即es3環境對es5語法的相容。我們來分析一下 

一、es3ify解決es3環境相容

對於這個問題，主要是解決es3的保留字在es3環境下的正確使用，default是暴露最多的問題，因為大家都在寫export default xx。對於這個問題，目前比較快捷的方式就是使用es3ify，在webpack中就是新增es3ify-loader，程式碼如下：

    module: {
            loaders: [{
                test: /\.jsx?$/,
                loaders: ['es3ify-loader'
 
],
            }
        ]
    }

它主要做的事情就是對於一些保留字的使用做了es3相容,以及一些額外的處理，比如去除陣列尾部的多餘逗號：

// babel轉換前
var a = {
    class: "haha"
}
a.class = "bb";
var arr = [1,2,3,];

//babel轉換後
var a = {
    "class": "haha"
}
a["class"] = "bb";
var arr = [1,2,3];

有了它，其它的一些外掛transform-es3-property-literals，transform-es3-member-expression-literal,add-module-exports 就沒有必要了，你會發現這些外掛就是在解決部分問題：

transform-es3-property-literals：保證在物件屬性中的保留字正確

// babel轉換前
var a = {
    class: "haha"  //變動處
}
a.class = "bb";

//babel轉換後
var a = {
    "class": "haha"
}
a.class = "bb";    //變動處

transform-es3-member-expression-literal：保證在物件屬性訪問中的保留字正確

// babel轉換前
var a = {
    class: "haha"   
}
a.class = "bb";   //變動處

//babel轉換後
var a = {
    class: "haha"
}
a["class"] = "bb";//變動處

所以也會把export.default轉為export[“default”], 即解決了default不相容問題。

add-module-exports：僅僅解決default的問題

二、babel-polyfill 解決缺失API問題

先跨過Object.defineProperty問題，因為那裡是重要的坑點。而對於上面的這三個問題，實際上屬於同一類問題，即對一些ES6 API缺失的模擬。比如常見的Object.assign，Promise物件，fetch等等，這些可以通過統一引用“babel-polyfill”來解決，如果感覺“babel-polyfill”太重，也可以針對所需要的API自行引用對應的polyfill。polyfill的應用可以有兩種方式：

1. npm包的方式，在編譯入口檔案通過require(“babel-polyfill”)引入執行。
2. 也可以在頁面上，業務js前引入babel的script標籤。

這裡最後一個問題:

以及console物件的相容問題就比較簡單，也都可以通過對應polyfill解決，就不多做解釋。

三、最麻煩的Object.defineProperty

這裡整個問題的說明已經滯後，且有錯誤：

首先，這裡說的 “Object.defineProperty 在IE8中不存在” 是錯的，而是IE8中有自己實現的Object.defineProperty,它的行為和標準不同，且只能接受DOM物件，如果傳入普通javascript物件會拋異常。詳細說明在這裡 Object.defineProperty 。

其次，babel會把 export(非import) 編譯成 Object.defineProperty的方式。相信新增這個問題的時候，babel確實存在這樣的轉換，具體的issues也有人提過 babel-export，而提供的解決方案—-引入es5-shim和es5-sham在這種情況下是也確實是可行的。不過目前的babel版本已經不會有這種轉換（卻還存另一個轉換的坑），但是es5-shim和es5-sham的引用是必要的，因為它是解決通用性的es3環境下es5 API的缺失問題，就像babel-polyfill一樣，Object.defineProperty是其中的一個API。

以上是現有常規的相容方案，很多人使用也沒有存在太多問題。

遇到的問題和排查

本以為按照這樣的指引，進行了babel轉換，引入es3ify，babel-polyfill，es5-shim/es5-sham,console-polifill就大功告成了，可惜ie8執行起來還是崩了。先是錯誤定位到babel-polyfill中，去掉babel-polyfill又定位到es5-sham中，報的錯誤都是異常未捕獲，且在IE8下除錯很艱難。後來根據es5-sham壓縮程式碼的拋異常位置，檢視es5-sham的原始碼，結合es5-sham的文件說明,基本定位為Object.defineProperty的問題。

首先其拋異常的程式碼在這段:

程式碼會在supportsAccessors為false且hasGetter或者hasSetter時拋異常，邏輯上講就是如果當前js引擎不支援訪問器屬性，但是卻在屬性描述符中設定了get，set,那麼就會丟擲異常。supportsAccessors用於判斷當前js引擎是否支援訪問器屬性，它的判斷邏輯在這裡：

實際就是用Object.prototype.hasOwnProperty(“ defineGetter “)做判斷，“ defineGetter ”的相容情況是隻相容IE11,具體檢視 defineGetter 說明 ，雖然ie9,ie10同樣不支援 defineGetter ,不過他們直接支援 Object.defineProperty 方法和 get語法 ，無需sham，所以程式碼並不會走到異常這裡。實際上es5-sham官方文件也提到對Object.defineProperty的polyfill會存在限制和fail的情況：

具體檢視: es5-shim , 雖然其說明和程式碼實現存在些差異，不過結論是明確的：ie8下訪問器屬性不支援，會拋異常;

基本明確了是用Object.defineProperty()設定訪問器屬性的問題，那麼就向上查詢到底是哪裡使用了訪問器屬性設定，在編譯後的原始碼裡搜尋“ :get”查到了這段程式碼：

根據上面關鍵字syncHistoryWithStore,routerReducer等初步判斷是在react-router-redux中，node_modules檢視react-router-redux原始碼，果然，其lib中index.js裡有很多對export的訪問器屬性設定。再檢視對應src/index.js檔案，兩份程式碼如下：

//src/index.js
export syncHistoryWithStore from './sync'
export { LOCATION_CHANGE, routerReducer } from './reducer'

export {
    CALL_HISTORY_METHOD,
    push, replace, go, goBack, goForward,
    routerActions
} from './actions'
export routerMiddleware from './middleware'

babel編譯後部分程式碼：

//lib/index.js
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.routerMiddleware = exports.routerActions = exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = exports.CALL_HISTORY_METHOD = exports.routerReducer = exports.LOCATION_CHANGE = exports.syncHistoryWithStore = undefined;

var _reducer = require('./reducer');

Object.defineProperty(exports, 'LOCATION_CHANGE', {
  enumerable: true,
  get: functionget() {
    return _reducer.LOCATION_CHANGE;
  }
});
Object.defineProperty(exports, 'routerReducer', {
  enumerable: true,
  get: functionget() {
    return _reducer.routerReducer;
  }
});

所以確定了是babel編譯問題，又回到了上面提到的，babel對直接的export會轉碼為Object.defineProperty,但是它們修復了這個問題，不過好死不死的，對於export 和 import結合的寫法—-export xx from ‘xxx’ 還是會轉碼為Object.defineProperty對exports進行屬性設定，更加嚴重的是，之前的Object.defineProperty設定的是資料屬性，直接指定的value,但是這次的Object.defineProperty 腦殘般的設定了訪問器屬性，如此一來es5-sham已經沒有辦法解決（上面已經說明）。

所以最終的排查結果就是主要3點：

1. ie8不支援設定訪問器屬性，即便是引了es5-shim;
2. Babel 會把export xxx from ‘xx’ 語法轉碼為訪問器屬性設定的exports物件。
3. 而react-router-react的index.js 偏偏用了export xxx from ‘xx’這樣的語法。

解決方案

最直接的解決辦法就是Babel修復這種轉碼方式，目前已經有人提過issue,但是尚未解決： issue

其次react-router-redux 不要用export xx from ‘xx’的方式，也有人提過issue： issue

不過目前為了解決線上bug，肯定沒有辦法等待它們的修復，且尚未找到一種ie8下相容訪問器屬性設定的方法，所以最終此專案的解決方案是修改react-router-react的原始碼，把其中的export xx from ‘xx’的語法改成分開的方式，比如：

//修改前
export syncHistoryWithStore from './sync'

//修改後
import syncHistoryWithStore from './sync';
export {syncHistoryWithStore} ;

然後所有引用react-router-react的地方改為對src/index.js的引用，在專案中自己重新編譯，而不使用lib中編譯好的版本。

總結

原本對webpack和babel瞭解的就不是很多，差不多用了一天的時間來排查這個問題，感覺react的專案想要支援ie8坑還會很多，其中包括babel，webpack,第三方庫對ie8的相容支援問題並不良好，且現在 [email protected] 版本已經放棄ie8。所以目前實踐的ie8相容方案是：

1. webpack 進行babel對ES6，7語法的轉碼。
2. webpack 引用es3ify-loader 解決es3語法相容問題。
3. 全域性引用babel-polyfill,es5-shim/es5-sham,console-polyfill,JSON的polyfill等
4. 不要在程式碼中用Object.defineProperty設定訪問器屬性，若第三方包中有，找到，改之。

各位還遇到哪些問題可以一起討論，積累經驗，整個排查過程也對很多知識理解的深刻了一點。