步骤一:项目环境搭建
首先,你不应该使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可。
技术选型:
1.react@0.14
2.bootstrap3
3.jquery@1.X.X (使用react.js一般不需要使用jquery了)
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
(1)全局安装 create-react-app
npm install -g create-react-app
(2)创建项目my-app
create-react-app my-app
(3)进入项目
cd my-app
(4)启动项目
npm start
(5)查看效果
在浏览器中打开 http://localhost:3000
步骤二:处理 IE8 兼容问题
兼容方案方向是用shim/polyfill库
来对低级浏览器各个缺失的API、对象做补全。
1)ieBetter
优点:小而精的polyfill库
缺点:console、Object.defineProperty都没做处理。
地址:https://github.com/zhangxinxu/ieBetter.js
2)es5-shim/es5-sham
优点:多而全、可靠的shim库
缺点:console/addEventListener没做容错兼容,Object.defineProperty在某些特殊版本有可能会有问题,但是基本可用。
这作者还有做es6的shim,有兴趣的同学可以了解一下
地址:https://github.com/es-shims/es5-shim
3)console-polyfill
简单的console兼容库~
地址:https://github.com/paulmillr/console-polyfill
4)json3
简单的json兼容库~
地址:http://bestiejs.github.io/json3/
5)html5Shiv
html5shiv主要解决HTML5提出的新的元素(section,header,footer)不被IE6-9识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。html5shiv就是为了解决这个问题存在的。
地址:https://github.com/aFarkas/html5shiv
6)addEventListener-polyfill.js
简单的addEventListener兼容库~
地址:https://gist.github.com/eirikbacker/2864711点击预览
7)ie8
一个IE8的shim库
地址:https://github.com/WebReflection/ie8
8)dom4
让IE8获得dom level4的能力
地址:https://github.com/WebReflection/dom4
注:经过各种测试<踩坑>
/搭配/组合,得出下面这套比较可靠的方案:
//es5-shim + es5-sham + console-polyfill + json3 + html5Shiv + addEventListener-polyfill.js <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://gist.githubusercontent.com/eirikbacker/2864711/raw/dcc32b15ea79f8f364ca1707f81ec74a15fa25db/addEventListener-polyfill.js"></script> //最后一个addEventListener-polyfill.js是直接github Raw下来的,建议自己保存
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
安利:https://cdnjs.com/ 是个好东西,搜github一些dist文件很方便,而且不用翻墙
.