Open brickspert opened 6 years ago
本着学习的目的,在react-family框架基础上,做了最小的修改,使框架兼容了IE8浏览器。
预览地址:https://brickspert.github.io/react-family-ie8/index.html 源码地址:react-family-ie8
这是一个痛苦的过程,不过看到结果还是非常开心的。
下面就让我们开始吧。
第一部分,我们先修改开发坏境及开发配置文件~
react降级
npm install react@0.x.x react-dom@0.x.x --save
webpack降级到v1
备注:网上也有很多人说,webpack v3也能兼容IE8,但是我试了很长时间也没搞好。被迫降版本了,这里应该是我的问题。
npm install webpack@1.x.x webpack-dev-server@1.x.x --save-dev
babel-loader降级
webpack 1.x 对应 babel-loader <= 6.x
npm install babel-loader@6.x.x --save-dev
修改webpack配置文件,至兼容v1的状态。在我们的项目中,主要修改 webpack.common.config.js和webpack.dev.config.js里面的module->rules,改回loaders。
webpack.common.config.js
webpack.dev.config.js
module->rules
loaders
删除react-hot-loader相关的代码
react-hot-loader
entry
webpack.merge
new webpack.HashedModuleIdsPlugin()删除。因为这不是webpack v1的。
new webpack.HashedModuleIdsPlugin()
现在就可以npm start启动了,IE8浏览器打开来,你发现是空白的。没关系,打开调试器,看什么错误。
npm start
这里注意下,我用虚拟机通过局域网IP访问的,直接打不开页面,报错Invalid Host header。
Invalid Host header
修改package.json->start命令,增加--public 192.168.x.x ,后面的IP为你的局域网IP就可以啦。
package.json->start
--public 192.168.x.x
接着说错误。现在我们看到的脚本错误应该是“缺少标识符”。
参考这里,我们使用es3ify。
es3ify
npm install --save es3ify-webpack-plugin
webpack.commn.config.js使用插件。
webpack.commn.config.js
再npm start,发现错误换了,“对象不支持此属性或方法”。
这次我们使用es5-shim。
es5-shim
npm install --save es5-shim
webpack.common.config.js修改入口entry->app
entry->app
app: [ "es5-shim", "es5-shim/es5-sham", "babel-polyfill", path.join(__dirname, 'src/index.js') ]
这里我有个问题,必须删除entry里面的vendor和plugins里面CommonsChunkPlugin相关的代码。
vendor
plugins
CommonsChunkPlugin
不删除IE8就一直报错,我开始猜是要把es5-shim/shame/babel-polyfill等提取出来,独立于app和vendor。但是提取了还是不行唉,学艺不精~只能先删除了。
es5-shim/shame/babel-polyfill
app
继续执行,又是错误“例外被抛出且未被接住”。
npm install export-from-ie8 --save
然后webpack.common.config.js使用
postLoaders: [ { test: /\.js$/, loaders: ['export-from-ie8/loader'] } ]
现在你再执行,发现IE8可以正常访问了。嘿嘿嘿。最好我们把BrowserRouter改成HashRouter,这样路由切换页面就不会刷新啦。
BrowserRouter
HashRouter
到目前为止,开发坏境已经OK了,下面就是修改生产坏境的配置文件了。
extract-text-webpack-plugin插件降级。
extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@1.0.1
然后按文档修改配置文件。
uglifyjs-webpack-plugin增加兼容IE8参数。
uglifyjs-webpack-plugin
做了这两项,你执行npm run bundle,发现生产坏境也OK了。
npm run bundle
虽然最终做出了兼容IE8的版本,但是还有很多地方搞不太懂的。后续会继续学习,改进,更新的。
做这个任务的时候,参考了很多很多的文章,我就不一一列举了,感谢!
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。
react-family框架兼容IE8的艰辛旅程
本着学习的目的,在react-family框架基础上,做了最小的修改,使框架兼容了IE8浏览器。
预览地址:https://brickspert.github.io/react-family-ie8/index.html 源码地址:react-family-ie8
这是一个痛苦的过程,不过看到结果还是非常开心的。
下面就让我们开始吧。
第一部分,我们先修改开发坏境及开发配置文件~
react降级
npm install react@0.x.x react-dom@0.x.x --save
webpack降级到v1
备注:网上也有很多人说,webpack v3也能兼容IE8,但是我试了很长时间也没搞好。被迫降版本了,这里应该是我的问题。
npm install webpack@1.x.x webpack-dev-server@1.x.x --save-dev
babel-loader降级
webpack 1.x 对应 babel-loader <= 6.x
npm install babel-loader@6.x.x --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 extract-text-webpack-plugin@1.0.1
然后按文档修改配置文件。
uglifyjs-webpack-plugin
增加兼容IE8参数。做了这两项,你执行
npm run bundle
,发现生产坏境也OK了。续
虽然最终做出了兼容IE8的版本,但是还有很多地方搞不太懂的。后续会继续学习,改进,更新的。
做这个任务的时候,参考了很多很多的文章,我就不一一列举了,感谢!
❤️感谢大家
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。