-
Notifications
You must be signed in to change notification settings - Fork 546
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react-family框架兼容IE8教程 #5
Comments
Open
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
react-family框架兼容IE8的艰辛旅程
本着学习的目的,在react-family框架基础上,做了最小的修改,使框架兼容了IE8浏览器。
预览地址:https://brickspert.github.io/react-family-ie8/index.html
源码地址:react-family-ie8
这是一个痛苦的过程,不过看到结果还是非常开心的。
下面就让我们开始吧。
第一部分,我们先修改开发坏境及开发配置文件~
react降级
npm install [email protected] [email protected] --save
webpack降级到v1
备注:网上也有很多人说,webpack v3也能兼容IE8,但是我试了很长时间也没搞好。被迫降版本了,这里应该是我的问题。
npm install [email protected] [email protected] --save-dev
babel-loader降级
webpack 1.x 对应 babel-loader <= 6.x
npm install [email protected] --save-dev
修改webpack配置文件,至兼容v1的状态。在我们的项目中,主要修改
webpack.common.config.js
和webpack.dev.config.js
里面的module->rules
,改回loaders
。删除
react-hot-loader
相关的代码webpack.dev.config.js
直接删除entry
,删除尾部的webpack.merge
的自定义函数。new webpack.HashedModuleIdsPlugin()
删除。因为这不是webpack v1的。现在就可以
npm start
启动了,IE8浏览器打开来,你发现是空白的。没关系,打开调试器,看什么错误。这里注意下,我用虚拟机通过局域网IP访问的,直接打不开页面,报错
Invalid Host header
。修改
package.json->start
命令,增加--public 192.168.x.x
,后面的IP为你的局域网IP就可以啦。接着说错误。现在我们看到的脚本错误应该是“缺少标识符”。
参考这里,我们使用
es3ify
。npm install --save es3ify-webpack-plugin
webpack.commn.config.js
使用插件。再
npm start
,发现错误换了,“对象不支持此属性或方法”。这次我们使用
es5-shim
。npm install --save es5-shim
webpack.common.config.js
修改入口entry->app
这里我有个问题,必须删除
entry
里面的vendor
和plugins
里面CommonsChunkPlugin
相关的代码。不删除IE8就一直报错,我开始猜是要把
es5-shim/shame/babel-polyfill
等提取出来,独立于app
和vendor
。但是提取了还是不行唉,学艺不精~只能先删除了。继续执行,又是错误“例外被抛出且未被接住”。
npm install export-from-ie8 --save
然后
webpack.common.config.js
使用现在你再执行,发现IE8可以正常访问了。嘿嘿嘿。最好我们把
BrowserRouter
改成HashRouter
,这样路由切换页面就不会刷新啦。到目前为止,开发坏境已经OK了,下面就是修改生产坏境的配置文件了。
extract-text-webpack-plugin
插件降级。npm install --save-dev [email protected]
然后按文档修改配置文件。
uglifyjs-webpack-plugin
增加兼容IE8参数。做了这两项,你执行
npm run bundle
,发现生产坏境也OK了。续
虽然最终做出了兼容IE8的版本,但是还有很多地方搞不太懂的。后续会继续学习,改进,更新的。
做这个任务的时候,参考了很多很多的文章,我就不一一列举了,感谢!
❤️感谢大家
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。
The text was updated successfully, but these errors were encountered: