兼容性
语言补丁
- Array.isArray
- Object.assign
- JSON.stringify
- console-polyfill
- Object.keys
- Object.is
- Array.prototype.forEach
- Function.prototype.bind
或者直接使用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
当前内容版权归 rubylouvre 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 rubylouvre .