ie8升级ie11离线安装包_于是，fre 决定承包 ie8 了……

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-ie​github.com

仓库地址在这里，等 fre2 的时候会升级 webpack5，顺便合并到主库维护

然后现在虽然兼容能跑了，但也有一些问题

1. 不支持 webpack-dev-server

原因是 ie8 不支持 websocket（webpack是eventSource），所以类似的通信插件全都没得用

2. 不支持 SVG

这部分可以填补，等 fre2 吧哈

p.s.

很多人觉得 ie8 没有必要了，但是真的，fre 的机制是完全可以做到兼容 ie8 的，搞一个兼容就是一个小时的事情，何乐而不为呢？

然后同样的，有很多同类框架也用了类似的机制（手动set），都可以兼容到 ie8，但还是前面那句话，重点不是框架的兼容性，而是 webpack 等工具链的兼容问题

反正我宣布，fre 要承包 ie8 啦！来日方长啊~~~