兼容性

优质

小牛编辑

138浏览

2023-12-01

语言补丁

或者直接使用https://polyfill.io/ 提供的动态补丁方案

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

更换核心库

核心库应该由dist/React.js改成dist/ReactIE.js

它只是在React.js上添加了一些特殊事件的兼容补丁与innerHTML的修复处理。

IE事件补丁是针对一些不冒泡事件的修复（input, change, submit, focus, blur），及一些特定事件属性的处理(鼠标事件的pageX, pageY, 键盘事件的which, 滚轮事件的wheelDetla)

http://www.cnblogs.com/rubylouvre/p/5080464.html

动画

如果用户用到react-transition-group这样的动画库，请注意引入requestAnimationFrame的补丁

https://github.com/darius/requestAnimationFrame

压缩

如果你用到压缩，就需要处理 uglify-js产生问题，因为IE6-8 ,对于map.delete("ddd"), modulex.default这样的写法会报语法错误因为关键字不能做属性名与方法名。我们可以用es3ify-webpack-plugin或es3ify-loader进行处理。

//npm install uglifyjs-webpack-plugin@1.0.0-beta.2  
//UglifyJs3
new UglifyJsPlugin({
    parallel: {
        cache: true,
        workers: 4,
    },
    uglifyOptions: {
        mangle: {
            eval: true,
            toplevel: true,
        },
        parse: {
            html5_comments: false,
        },
        output: {
            comments: false,
            ascii_only: true,
            beautify: false,
        },
        ecma: 5,
        ie8: false,
        compresqs: {
            properties: true,
            unsafe: true,
            unsafe_comps: true,
            unsafe_math: true,
            unsafe_proto: true,
            unsafe_regexp: true,
            unsafe_Func: true,
            dead_code: true,
            unused: true,
            conditionals: true,
            keep_fargs: false,
            drop_console: true,
            drop_debugger: true,
            reduce_vars: true,
            if_return: true,
            comparisons: true,
            evaluate: true,
            booleans: true,
            typeofs: false,
            loops: true,
            toplevel: true,
            top_retain: true,
            hoist_funs: true,
            hoist_vars: true,
            inline: true,
            join_vars: true,
            cascade: true,
            collapse_vars: true,
            reduce_vars: true,
            negate_iife: true,
            pure_getters: true,
            pure_funcs: true,
            // arrows: true,
            passes: 3,
            ecma: 5,
        },
    },
    sourceMap: false,
}),

React.createClass

React15使用createClass来创建类，如果需要这个API，可以在babel中引入 anujs/lib/createClass.js

https://github.com/magicapple/anujs-webpack4-ie7-8