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

    .

  • 相关阅读:
    关于Java常见的误解
    Java程序设计概述
    是结束,更是开始!
    从零开始单排学设计模式「简单工厂设计模式」黑铁 III
    某神秘公司 RESTful、共用接口、前后端分离、接口约定的实践
    这40张图送给单身程序员,情人节请一笑而过!
    科技圈晒开工福利!2019一起定个小目标!
    IDEA一定要懂的32条快捷键
    假期结束了,我相信未来会更好!
    有一种痛,叫 “今年没有年终奖”!!!
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8277328.html
Copyright © 2020-2023  润新知