常识 共享 合作 bodog官网

    bodog官网专心于网页资料下载,供给博狗博彩、网页规划、ps资料、图片资料等,服务于【个人站长】【网页规划师】和【web开发从业者】的代码资料与规划资料网站。

    bodog官网供给网页资料下载、博狗博彩
    常识 共享 合作!

    reactjs+webpack的ie8兼容问题处理计划

    作者:佳明妈 来历:aliued 2017-11-16 人气:
    reactjs+webpack的ie8兼容问题处理计划,webpack 进行babel对ES6,7语法的转码。 webpack 引证es3ify-loader 处理es3语法兼容问题。 大局引证babel-polyfill,es5-shim/es5-sham,console-polyfill,JSON的polyfill等 不要

        reactjs+webpack的ie8兼容问题处理计划,原文来自 aliued,不过这篇文章原文根本是不能拜访了,你能够试试还能不能拜访:www.aliued.com/?p=3240

        首要说一下兼容ie8的通用计划,网上搜到一些办法,比方增加 transform-es3-property-literals,transform-es3-member-expression-literal , add-module-exports 插件等,不过它们可能是不同时期的不同处理计划,实践上是在处理同一类问题,即es3环境对es5语法的兼容。

        一、es3ify处理es3环境兼容

        关于这个问题,首要是处理es3的保留字在es3环境下的正确运用,default是露出最多的问题,由于咱们都在写export default xx。关于这个问题,现在比较方便的办法便是运用es3ify,在webpack中便是增加es3ify-loader,代码如下:

    module: {
                loaders: [{
                    test: /.jsx?$/,
                    loaders: ['es3ify-loader'],
                }
            ]
        }

        它首要做的工作便是关于一些保留字的运用做了es3兼容,以及一些额定的处理,比方去除数组尾部的剩余逗号:

    // babel转化前
    var a = {
        class: "haha"
    }
    a.class = "bb";
    var arr = [1,2,3,];
    
    //babel转化后
    var a = {
        "class": "haha"
    }
    a["class"] = "bb";
    var arr = [1,2,3];

        有了它,其它的一些插件transform-es3-property-literals,transform-es3-member-expression-literal,add-module-exports 就没有必要了,你会发现这些插件便是在处理部分问题:

        transform-es3-property-literals:确保在目标特点中的保留字正确

    // babel转化前
    var a = {
        class: "haha"  //改变处
    }
    a.class = "bb";
    
    //babel转化后
    var a = {
        "class": "haha"
    }
    a.class = "bb";    //改变处

        transform-es3-member-expression-literal:确保在目标特点拜访中的保留字正确

    // babel转化前
    var a = {
        class: "haha"   
    }
    a.class = "bb";   //改变处
    
    //babel转化后
    var a = {
        class: "haha"
    }
    a["class"] = "bb";//改变处

        所以也会把export.default转为export[“default”], 即处理了default不兼容问题。

        add-module-exports:只是处理default的问题

        二、babel-polyfill 处理缺失API问题

        先跨过Object.defineProperty问题,由于那里是重要的坑点。而关于上面的这三个问题,实践上归于同一类问题,即对一些ES6 API缺失的模仿。比方常见的Object.assign,Promise目标,fetch等等,这些能够经过一致引证“babel-polyfill”来处理,假如感觉“babel-polyfill”太重,也能够针对所需求的API自行引证对应的polyfill。polyfill的运用能够有两种办法:

    1.             npm包的办法,在编译进口文件经过require(“babel-polyfill”)引进履行。

    2.             也能够在页面上,事务js前引进babel的script标签。

            这儿终究一个问题:

            以及console目标的兼容问题就比较简单,也都能够经过对应polyfill处理,就不多做解说。

        三、最费事的Object.defineProperty

        这儿整个问题的阐明现已滞后,且有过错:

        首要,这儿说的 “Object.defineProperty 在IE8中不存在” 是错的,而是IE8中有自己完成的Object.defineProperty,它的行为和规范不同,且只能承受DOM目标,假如传入一般javascript目标会抛反常。详细阐明在这儿 Object.defineProperty 。

        其次,babel会把 export(非import) 编译成 Object.defineProperty的办法。信任增加这个问题的时分,babel的确存在这样的转化,详细的issues也有人提过 babel-export,而供给的处理计划—-引进es5-shim和es5-sham在这种状况下是也的确是可行的。不过现在的babel版别现已不会有这种转化(却还存另一个转化的坑),可是es5-shim和es5-sham的引证是必要的,由于它是处理通用性的es3环境下es5 API的缺失问题,就像babel-polyfill相同,Object.defineProperty是其间的一个API。

        以上是现有惯例的兼容计划,许多人运用也没有存在太多问题。

        遇到的问题和排查

        本认为依照这样的指引,进行了babel转化,引进es3ify,babel-polyfill,es5-shim/es5-sham,console-polifill就功德圆满了,惋惜ie8运转起来仍是崩了。先是过错定位到babel-polyfill中,去掉babel-polyfill又定位到es5-sham中,报的过错都是反常未捕获,且在IE8下调试很困难。后来依据es5-sham紧缩代码的抛反常方位,检查es5-sham的源码,结合es5-sham的文档阐明,根本定位为Object.defineProperty的问题。

            首要其抛反常的代码在这段:

        代码会在supportsAccessors为false且hasGetter或许hasSetter时抛反常,逻辑上讲便是假如当时js引擎不支撑拜访器特点,可是却在特点描述符中设置了get,set,那么就会抛出反常。supportsAccessors用于判别当时js引擎是否支撑拜访器特点,它的判别逻辑在这儿:

            实践便是用Object.prototype.hasOwnProperty(“ defineGetter “)做判别,“ defineGetter ”的兼容状况是只兼容IE11,详细检查 defineGetter 阐明 ,尽管ie9,ie10相同不支撑 defineGetter ,不过他们直接支撑 Object.defineProperty 办法和 get语法 ,无需sham,所以代码并不会走到反常这儿。实践上es5-sham官方文档也说到对Object.defineProperty的polyfill会存在约束和fail的状况:

            详细检查: es5-shim , 尽管其阐明和代码完成存在些差异,不过结论是清晰的:ie8下拜访器特点不支撑,会抛反常;

            根本清晰了是用Object.defineProperty()设置拜访器特点的问题,那么就向上查找到底是哪里运用了拜访器特点设置,在编译后的源代码里查找“ :get”查到了这段代码:

            依据上面关键字syncHistoryWithStore,routerReducer等初步判别是在react-router-redux中,node_modules检查react-router-redux源码,公然,其lib中index.js里有许多对export的拜访器特点设置。再检查对应src/index.js文件,两份代码如下:

    //src/index.js
    export syncHistoryWithStore from './sync'
    export { LOCATION_CHANGE, routerReducer } from './reducer'
    
    export {
        CALL_HISTORY_METHOD,
        push, replace, go, goBack, goForward,
        routerActions
    } from './actions'
    export routerMiddleware from './middleware'

        babel编译后部分代码:

    //lib/index.js
    'use strict';
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.routerMiddleware = exports.routerActions = exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = exports.CALL_HISTORY_METHOD = exports.routerReducer = exports.LOCATION_CHANGE = exports.syncHistoryWithStore = undefined;
    
    var _reducer = require('./reducer');
    
    Object.defineProperty(exports, 'LOCATION_CHANGE', {
      enumerable: true,
      get: function get() {
        return _reducer.LOCATION_CHANGE;
      }
    });
    Object.defineProperty(exports, 'routerReducer', {
      enumerable: true,
      get: function get() {
        return _reducer.routerReducer;
      }
    });

        所以确认了是babel编译问题,又回到了上面说到的,babel对直接的export会转码为Object.defineProperty,可是它们修正了这个问题,不过好死不死的,关于export 和 import结合的写法—-export xx from ‘xxx’ 仍是会转码为Object.defineProperty对exports进行特点设置,愈加严峻的是,之前的Object.defineProperty设置的是数据特点,直接指定的value,可是这次的Object.defineProperty 脑残般的设置了拜访器特点,如此一来es5-sham现已没有办法处理(上面现已阐明)。

        所以终究的排查成果便是首要3点:

    1.             ie8不支撑设置拜访器特点,即便是引了es5-shim;

    2.             Babel 会把export xxx from ‘xx’ 语法转码为拜访器特点设置的exports目标。

    3.             而react-router-react的index.js 偏偏用了export xxx from ‘xx’这样的语法。

        处理计划

        最直接的处理办法便是Babel修正这种转码办法,现在现已有人提过issue,可是没有处理: issue

        其次react-router-redux 不要用export xx from ‘xx’的办法,也有人提过issue: issue

        不过现在为了处理线上bug,必定没有办法等候它们的修正,且没有找到一种ie8下兼容拜访器特点设置的办法,所以终究此项意图处理计划是修正react-router-react的源码,把其间的export xx from ‘xx’的语法改成分隔的办法,比方:

    //修正前
    export syncHistoryWithStore from './sync'
    
    //修正后
    import syncHistoryWithStore from './sync';
    export {syncHistoryWithStore} ;

        然后一切引证react-router-react的当地改为对src/index.js的引证,在项目中自己从头编译,而不运用lib中编译好的版别。

        总结

        本来对webpack和babel了解的就不是许多,差不多用了一天的时刻来排查这个问题,感觉react的项目想要支撑ie8坑还会许多,其间包含babel,webpack,第三方库对ie8的兼容支撑问题并不杰出,且现在 [email protected] 版别现已抛弃ie8。所以现在实践的ie8兼容计划是:

    1.             webpack 进行babel对ES6,7语法的转码。

    2.             webpack 引证es3ify-loader 处理es3语法兼容问题。

    3.             大局引证babel-polyfill,es5-shim/es5-sham,console-polyfill,JSON的polyfill等

    4.             不要在代码顶用Object.defineProperty设置拜访器特点,若第三方包中有,找到,改之。

        各位还遇到哪些问题能够一同谈论,堆集经历,整个排查进程也对许多常识了解的深刻了一点。

    ↓ 检查全文

    reactjs+webpack的ie8兼容问题处理计划由bodog官网收集整理,您能够自在传达,请自动带上本文链接

    bodog官网便是免费共享,觉得有用就多来支撑一下,没有能帮到您,懒人也只能表示遗憾,期望有一天能帮到您。

    188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help

    reactjs+webpack的ie8兼容问题处理计划-最新谈论