这几天解决了react在ie8下兼容性,解决了我们网站在ie8上打开是空白页的问题。亲测完全可用,我们的网站 http://bp.microyan.com。可以在ie8下看看。需要说明的是,我们网站开发的时候完全没有考虑ie8,初衷只是兼容chrome。后来做兼容ie8,代码上基本上没做修改,主要是修改了配置文件(修改后的配置文件见webpack.dev.config.js)。
-
首先
github上这个教程react-ie8,我们照着先做一遍,其中对我们网站上的修改包括(重点是react降级到v0.14)。 -
然后打开我们的
ie8浏览器,看看网站打不开的报错信息!如图所示:
上面提到的github上,有一份表格,每个错误对应的解决方法,如下图所示:
这次我们看下,我们ie8上面的每个错误,在图中都能找到解决办法!每个错误都解决完,我们的网站就能打开了! -
请注意,请注意,请注意,重点来了! 当我照着我上面的方式一个一个修改的时候,我发现很多错误并不能解决!
ie8还是打不开!这是为什么? 听我慢慢道来:我们的项目代码分为两部分(我们自己写的代码和node_modules里面引用的外部代码),按照这个github上的教程,我们只能解决我们自己代码中的兼容性,并不能解决node_modules中应用的代码的兼容性!
比如:Exception thrown and not caught这个问题,他给的解决方法是:把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方,并且在代码中不要使用 export * from 'xxx'。
这样使用其实可以解决我们代码中的兼容性,但是node_modules里面应用的外部库的兼容并不能解决。那我们应该怎么办?
我们把这些编译文件放到webpack配置文件中,让webpack打包的时候,也去转义node_modules里面的文件!
比如es5-shim这个库,我们的引用方式如配置文件webpack.dev.config.js,我们的es3ify就使用es3ify-webpack-plugin来代替,全部都集成到webpack配置文件中。
其他的问题,我们可以自行搜索解决。对了我们当时还删除了webpack-hot-middleware,因为不兼容好像是~
具体配置文件如下见webpack.dev.config.js和webpack.config.js。

