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文件很方便,而且不用*

.

上一篇:黄聪:禁止wordpress版本自动升级的解决方案


下一篇:使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录