react umi.js echars.js ie9兼容性问题

---

前言

最近有个项目需要兼容ie9，并且使用了antd和echars，经过两天的努力终于成功了。

---

一、umi配置

官方文档给出了一种解决方案:

但是我们在.umirc.ts文件中配置targets: { ie: 9 }发现没有生效，看了下报错，依然有不兼容的错误提示。

二、引入插件

1.引入库

代码如下（示例）：
在document.ejs文件里引入一下js文件：

<script src="https://npmcdn.com/es5-shim@4.5.8/es5-shim.min.js"></script>

<script src="https://npmcdn.com/es5-shim@4.5.8/es5-sham.min.js"></script>

<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>

这样打包后我们的代码已经可以在ie9下正常运行了。但是我们打开有echars的页面依然白屏，echars不兼容。

2.兼容echars

我发现官网中有兼容版本：

翻到最下面

选择好我们需要用的的图形后，在下方勾选兼容ie8的按钮，下载

在document.ejs文件里引入一下刚刚下载的echars.js文件：
**

注意：一定要在body里面引入而不是在head里面

**
在head里面引入，在ie9环境下页面会报错显示echars未定义，我们在body里面引入就可以了，echars正常显示。

但是在开发过程中发现IE9下如果页面存在多个echars图表有时会报错：

“requestAnimationFrame” 未定义  或者 “cancelAnimationFrame ”未定义

这时我们在项目中添加以下代码：

(function () {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
          window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (callback, element) {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = window.setTimeout(function () { callback(currTime + timeToCall); },
              timeToCall);
          lastTime = currTime + timeToCall;
          return id;
      };
  }

  if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function (id) {
          clearTimeout(id);
      };
  }
}());

会发现报错没有了，可以正常显示了

---

总结

到这一步js的兼容性问题就解决了，但是我用了antd，发现很多样式已经不兼容了。