react 开发 PC 端项目（一）项目环境搭建 及 处理 IE8 兼容问题

步骤一：项目环境搭建

首先，你不应该使用 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文件很方便，而且不用翻墙

.