react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题
2018-01-15 22:20
691 查看
步骤一:项目环境搭建
首先,你不应该使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可。
技术选型:
1.react@0.14
2.bootstrap3
3.jquery@1.X.X (使用react.js一般不需要使用jquery了)
create-react-app 自动创建的项目是基于 Webpack + ES6 。
(1)全局安装 create-react-app
(2)创建项目my-app
(3)进入项目
(4)启动项目
(5)查看效果
首先,你不应该使用 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[/code]
步骤二:处理 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文件很方便,而且不用FQ
.
相关文章推荐
- Android开发 React Native项目创建及环境搭建
- VC2010 + C++ + OpenCV 项目开发环境搭建 —— OpenCV 无法打开包括文件 找不到头文件问题
- React-Native开发环境搭建以及遇到的相关问题1
- ★Android开发笔记(1) 总记 开发环境搭建+常见问题+项目结构
- 在Windows下搭建React Native Android开发环境常见问题
- vmare Ubuntu 下Hadoop 开发环境搭建eclipse win10 远程连接 安装与问题处理
- React-Native开发环境搭建以及遇到的相关问题2
- 新项目开发环境搭建遇到的问题排查(cannot assign requested address)
- QT学习——QT命令行开发环境搭建的几个问题以及处理
- 【Hibernate框架开发之一】搭建Hibernate环境并成功运行第一个项目HelloHibernate并解决3个常出现的运行问题;
- 64位WIN7下Android 开发环境搭建(SDK Manager闪退,无法更新sdk,建立新项目时无法正常自动生成Activity的问题解决)
- Windows7系统下Netbeans+PHPUnit搭建PHP单元测试开发环境及PHPUnit-Code-Coverage问题处理
- vue-cli 搭建的项目处理不同环境下请求不同域名的问题
- maven(多个模块)项目 部署 开发环境 问题处理历程【异常Name jdbc is not bound in this Context 异常java.lang.NoSuchMethodE】
- 【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法
- 项目进度1:开发环境搭建
- Android 开发环境搭建中--- “An SDK Target must be specified.” 问题解决
- Ophone2.0开发环境搭建配置及模拟器显示不全问题的解决