halo,大家好,我是 132,这篇文章就是宣布一下,fre 支持 ie8 啦
不要说我闲着没事干,毕竟我就是闲着没事干,而且真的有人在用 ie 啊,要知道,国产浏览器很多都自带兼容模式的,什么 360 安全浏览器啊,2345 啊……
兼容 ie8 这玩意,单纯从框架层面,其实 fre/react/anu 这类框架的 setState 机制,理论上是可以兼容到 ie6 的
但是很不幸,真正兼容不了的是 webpack,webpack4 自身就用了 Object.defineProperty
这种高级 API ,更别说 webpack5 ,全特么是 es6 的新语法
这货直接放弃了 ie11- 的支持了……所以导致 react 这种框架,也永远无法兼容 ie11- 了
好在 webpack4 还能打补丁,万幸万幸
兼容 webpack4
其实就是给高级 API 打补丁,为了方便,我写了个 plugin
yarn add webpack-ie8-plugin -D
注意,webpack 这层只能打 server 的补丁,想 window,document 啥的都不行
所以我会单独维护这个插件,等 webpack5 发布后,我也会继续跟进
babel7 处理代码
由于已经没有那啥 es3 的预设了,我这里用 `preset-env`
['@babel/preset-env', { loose: true }]
万幸,fre 只有 function,没有 class,所以只需要 env
fre 兼容
fre 的兼容也是给 API 打 polyfill,可以在业务入口楚直接引入
import 'fre/ie'
这部分是给 fre 用的一些高级 API 打补丁的
处理 text 节点
由于 ie8 没有 createTextNode,也不支持 nodeValue 的设置,所以要处理掉
if (!document.createTextNode) {
document.createTextNode = function (data) {
const text = document.createElement('x-text')
text.innerText = data
return text
}
}
模拟事件处理
也没有 addEventListener,需要模拟,这部分有一点点长
!window.addEventListener &&
(function (WP, DP, EP, a, r, d, rest) {
WP[a] = DP[a] = EP[a] = function (type, listener) {
var target = this
rest.unshift([
target,
type,
listener,
function (event) {
event.currentTarget = target
event.preventDefault = function () {
event.returnValue = false
}
event.stopPropagation = function () {
event.cancelBubble = true
}
event.target = event.srcElement || target
listener.call(target, event)
},
])
this.attachEvent('on' + type, rest[0][3])
}
WP[r] = DP[r] = EP[r] = function (
type,
listener
) {
for (var index = 0, register; (register = rest[index]); ++index) {
if (register[0] == this && register[1] == type && register[2] == listener) {
return this.detachEvent('on' + type, rest.splice(index, 1)[0][3])
}
}
}
WP[d] = DP[d] = EP[d] = function (eventObject) {
return this.fireEvent('on' + eventObject.type, eventObject)
}
})(Window.prototype, HTMLDocument.prototype, Element.prototype, 'addEventListener', 'removeListener', 'dispatchEvent', [])
收工总结
https://github.com/frejs/fre-iegithub.com仓库地址在这里,等 fre2 的时候会升级 webpack5,顺便合并到主库维护
然后现在虽然兼容能跑了,但也有一些问题
- 不支持 webpack-dev-server
原因是 ie8 不支持 websocket(webpack是eventSource),所以类似的通信插件全都没得用
2. 不支持 SVG
这部分可以填补,等 fre2 吧哈
p.s.
很多人觉得 ie8 没有必要了,但是真的,fre 的机制是完全可以做到兼容 ie8 的,搞一个兼容就是一个小时的事情,何乐而不为呢?
然后同样的,有很多同类框架也用了类似的机制(手动set),都可以兼容到 ie8,但还是前面那句话,重点不是框架的兼容性,而是 webpack 等工具链的兼容问题
反正我宣布,fre 要承包 ie8 啦!来日方长啊~~~