Skip to content

hugh0524/webpack-react-react-router-ie8

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

webpack+react+react-router+es6兼容ie8

这几天解决了reactie8下兼容性,解决了我们网站在ie8上打开是空白页的问题。亲测完全可用,我们的网站 http://bp.microyan.com。可以在ie8下看看。需要说明的是,我们网站开发的时候完全没有考虑ie8,初衷只是兼容chrome。后来做兼容ie8,代码上基本上没做修改,主要是修改了配置文件(修改后的配置文件见webpack.dev.config.js)。

  1. 首先github上这个教程react-ie8,我们照着先做一遍,其中对我们网站上的修改包括(重点是react降级到v0.14)。

  2. 然后打开我们的ie8浏览器,看看网站打不开的报错信息!如图所示:
    ie8错误提示图片
    上面提到的github上,有一份表格,每个错误对应的解决方法,如下图所示:
    ie8错误对应图
    这次我们看下,我们ie8上面的每个错误,在图中都能找到解决办法!每个错误都解决完,我们的网站就能打开了!

  3. 请注意,请注意,请注意,重点来了! 当我照着我上面的方式一个一个修改的时候,我发现很多错误并不能解决!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配置文件中。

本文重要思想:不要仅仅考虑自己写的代码,也需要考虑package.json中引用的别的文件!!!

其他的问题,我们可以自行搜索解决。对了我们当时还删除了webpack-hot-middleware,因为不兼容好像是~

具体配置文件如下见webpack.dev.config.jswebpack.config.js

About

webpack+react+react-router+es6项目兼容ie8

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%