react+mobx实现兼容IE9的CMS系统过程中的经验总结

因为想要尝试用 mobx 并且也想自己试着搭建脚手架，所以在开发此项目时并没有使用比较成熟的脚手架比如：ant-design-pro，所以在开发过程中遇到了很多问题，在此记录，希望能帮助到其它开发者。

框架

技术选型

• create-react-app@2.1.1
• react@16.6.0
• mobx@4.5.2（5.x版本不支持IE9）
• mobx-react@5.3.6
• react-router-dom@4.3.1
• antd由@2.x到@3.18.1

遇到的问题

浏览器兼容性

• IE9 不支持 flex 布局
• create-react-app 提供的 react-app-polyfill 只是对某些 ES6 的 API 做了兼容，所以用 @babel/polyfill 替代了 react-app-polyfill
• dev 环境不支持 IE9：在 IE9 上打开 dev 环境发现了很多问题，不仅有 webpack-dev-server 存在的兼容性问题，还有一些其它第三方库存在的兼容性问题，主要有以下问题（因为问题太多所以最后我放弃了IE9下的dev环境）：
  • 首先是 bundle.js 文件里报 const map 未定义是因为 webpack-dev-server 从 2.7.1 后不支持 IE9
  • 如果是 vendor.js 文件里报 setPrototypeOf 未定义是因为 create-react-app 引入的 react-dev-utils/webpackHotDevClient 文件里面有一个 chalk 的包使用了这个 ES6 的方法，而 @babel/polyfill 的编译是基于__proto__，而 IE9 并不支持__proto__，所 以@babel/polyfill 无效
• 调试的时候保证是ie9的标准模式
• 线上的项目无法在 IE9 上打开的原因：IE9 默认采用的文档模式是 IE7。解决方案：加入 <meta http-equiv="X-UA-Compatible" content="IE=edge"> ，注意顺序：

  The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
  

• IE9 Spin 元素包裹的内容无法点击 原因：Spin 设置的 css 属性 pointer-events 不兼容IE9。解决方案：升级 antd
• IE9 设置img height为百分比并不能像chrome浏览器里一样按比例缩放，只能设置width
• IE9 上 css 样式没有浏览器前缀导致样式错误，原因 autoprefixer 对应的 browserslist 没写对没能将 IE9 包含进去
• 默认使用 webkit 内核： <meta name="renderer" content="webkit" />

mobx

• mobx-react observer 对传入的props做了浅比较，所以传递相同的值会有问题
• 为了在生产环境不把mock文件打包进来，我是这么做的

  "start:no-mock": "cross-env REACT_APP_MOCK=none npm start"
  

  if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_MOCK !== 'none') {
    import('../mock')
  }
  复制代码

• HMR 导致修改之后 mobx 的数据都变成初始数据了：react-hot-loader 遇到更新的时候会 rerender 组件，之前的 hot 挂载在 App 上，App 里面用了 provider 去传递数据，每次 rerender 都会重新传数据，所以数据就变成初始的了，hot 方法包裹的组件应该不包括它