這幾天解決了react在ie8下兼容性，解決了我們網(wǎng)站在ie8上打開是空白頁(yè)的問題。親測(cè)完全可用，我們的網(wǎng)站 http://bp.microyan.com?？梢栽?code>ie8下看看。需要說明的是，我們網(wǎng)站開發(fā)的時(shí)候完全沒有考慮ie8，我們初衷只是兼容chrome。后來做兼容ie8，代碼上基本上沒做修改，主要是修改了配置文件(修改后的配置文件見下文)。
首先
github上這個(gè)教程react-ie8，我們照著先做一遍，其中對(duì)我們網(wǎng)站上的修改包括（重點(diǎn)是react降級(jí)到v0.14）。-
然后打開我們的
ie8瀏覽器，看看網(wǎng)站打不開的報(bào)錯(cuò)信息！如圖所示:<br />
<br />ie8錯(cuò)誤提示圖片
上面提到的github上，有一份表格，每個(gè)錯(cuò)誤對(duì)應(yīng)的解決方法，如下圖所示：<br />
<br />ie8錯(cuò)誤對(duì)應(yīng)圖
這次我們看下，我們ie8上面的每個(gè)錯(cuò)誤，在下圖中都能找到解決辦法！每個(gè)錯(cuò)誤都解決完，我們的網(wǎng)站就能打開了！ 請(qǐng)注意，請(qǐng)注意，請(qǐng)注意，重點(diǎn)來了!
當(dāng)我照著我上面的方式一個(gè)一個(gè)修改的時(shí)候，我發(fā)現(xiàn)很多錯(cuò)誤并不能解決！ie8還是打不開！這是為什么？聽我慢慢道來：我們的項(xiàng)目代碼分為兩部分（我們自己寫的代碼和node_modules里面引用的外部代碼），按照這個(gè)github上的教程，我們只能解決我們自己代碼中的兼容性，并不能解決node_modules中應(yīng)用的代碼的兼容性！
比如：Exception thrown and not caught這個(gè)問題，他給的解決方法是：把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方，并且在代碼中不要使用 export * from 'xxx'。
這樣使用其實(shí)可以解決我們代碼中的兼容性，但是node_modules里面應(yīng)用的外部庫(kù)的兼容并不能解決。那我們應(yīng)該怎么辦？
我們把這些編譯文件放到webpack配置文件中，讓webpack打包的時(shí)候，也去轉(zhuǎn)義node_modules里面的文件！
比如es5-shim這個(gè)庫(kù)，我們的引用方式如下面的配置文件，我們的es3ify就使用es3ify-webpack-plugin來代替，全部都集成到webpack配置文件中。
本文重要思想：不要僅僅考慮自己寫的代碼，也需要考慮package.json中引用的別的文件?。?！
其他的問題，我們可以自行搜索解決。對(duì)了我們當(dāng)時(shí)還刪除了webpack-hot-middleware,因?yàn)椴患嫒莺孟袷恰?/strong>
具體配置文件如下：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var es3ifyPlugin = require('es3ify-webpack-plugin');
module.exports = {
devtool: 'inline-source-map',
entry: [
"es5-shim", "es5-shim/es5-sham", 'babel-polyfill', './src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'http://localhost:3000/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify('development')
}
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, 'assets/index-template.html')
}),
new es3ifyPlugin()
],
resolve: {
extensions: [
'', ".js"
],
root: path.join(__dirname, 'src')
},
module: {
postLoaders: [
{
test: /\.js$/,
loaders: ['export-from-ie8/loader']
}
],
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js$/,
loaders: ['babel-loader?cacheDirectory'],
include: path.join(__dirname, 'src')
}, {
test: /\.styl$/,
loaders: ['style-loader', 'css-loader', 'stylus-loader']
}, {
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader?limit=1'
}, {
test: /\.(htc)$/,
loader: 'url-loader?limit=1'
}
]
}
};
