兼容 IE9 的 CMS 系统开发经验总结

项目背景

本文所述项目是一个内容管理系统（CMS），主要用于管理网站的内容，如文章、图片等。该项目使用 React 作为前端框架，MobX 作为状态管理工具。

项目面临的挑战

兼容 IE9

该项目需要兼容 IE9，这是一个非常老旧的浏览器，对前端开发带来了很多挑战。其中一些挑战包括：

• IE9 不支持 ES6 语法，因此项目需要使用 Babel 将 ES6 代码编译为 ES5 代码。
• IE9 不支持某些 CSS3 特性，因此项目需要使用 polyfill 来模拟这些特性。
• IE9 对 JavaScript 的性能要求很高，因此项目需要使用一些优化技巧来提高性能。

开发脚手架

由于项目没有使用成熟的脚手架，因此开发人员需要自己搭建脚手架。这包括配置webpack、babel、ESlint 等工具，以及编写一些辅助脚本。

项目中遇到的问题和解决方案

React 路由问题

在项目开发过程中，遇到了一些与 React 路由相关的问题。例如，在 IE9 中，使用 react-router 库时，会遇到一些兼容性问题。为了解决这个问题，项目使用了 react-router-ie8 库，该库专门用于解决 IE8 和 IE9 中的路由问题。

MobX 状态管理问题

在项目开发过程中，还遇到了一些与 MobX 状态管理相关的问题。例如，在 IE9 中，使用 MobX 时，会遇到一些性能问题。为了解决这个问题，项目使用了 mobx-react-lite 库，该库是一个轻量级的 MobX 库，专门用于解决 IE9 和 IE10 中的性能问题。

IE9 兼容性问题

在项目开发过程中，还遇到了一些与 IE9 兼容性相关的问题。例如，在 IE9 中，使用某些 CSS3 特性时，会遇到兼容性问题。为了解决这个问题，项目使用了 polyfill.io 库，该库提供了一系列 polyfill，可以模拟 IE9 不支持的 CSS3 特性。

性能优化问题

在项目开发过程中，还遇到了一些与性能优化相关的问题。例如，在 IE9 中，JavaScript 的性能要求很高，因此项目需要使用一些优化技巧来提高性能。为了解决这个问题，项目使用了 webpack-bundle-analyzer 库，该库可以分析 webpack 的输出，并生成一个可视化报告，帮助开发人员优化项目性能。

项目开源

经过此项目，项目团队将这个项目的脚手架开源，欢迎大家使用和提建议。项目地址为：https://github.com/project-name/scaffold

总结

通过这个项目，项目团队积累了一些在 IE9 中使用 React 和 MobX 开发的经验。这些经验包括：

• 使用 react-router-ie8 库来解决 React 路由在 IE9 中的兼容性问题。
• 使用 mobx-react-lite 库来解决 MobX 在 IE9 中的性能问题。
• 使用 polyfill.io 库来解决 IE9 中的 CSS3 兼容性问题。
• 使用 webpack-bundle-analyzer 库来优化项目性能。

希望这些经验能够帮助其他开发者在开发类似项目时少走弯路。