关于javascript:前端页面浏览器兼容问题的解决

react 呈现的兼容性问题。

react 兼容所有支流浏览器，然而对于 IE9 和 IE10 须要退出 polyfill 代码。然而须要在业务代码中显示引入，不太敌对，所以摸索了一下。

preset-env。

为高版本 javascript 提供兼容低版本浏览器的代码。
罕用选项：

1. browsers，指定须要兼容哪些浏览器的那些版本，浏览器列表，兼容性查问工具。注：就 Babel 的兼容性查问而言 caniuse 不牢靠，这里是依据。
2. include，如果应用 useBuildIns 位 usage 模式可能会在这里碰到坑，原本文档写的是能够强制引入没有检测到然而咱们须要的 polyfill 代码，然而 usage 模式的引入早于 include 而且文档没有更新，看如下论断：
   

3. useBuildIns，蕴含三个值 entry、usage、false。

   1. entry，在入口文件引入全副的 polyfill。长处是彻底解决兼容问题，毛病是导致最终代码体积比拟大。
   2. usage，依据代码的应用状况引入 polyfill。长处是按需引入代码体积减小很多，毛病是 node_modules 中的高版本 javascript 检测不进去，引入不了 polyfill。
   3. false，不增加 polyfill 也不解决兼容问题。

   能够看到三个值都有一些毛病，须要一种既能按需引入又能解决 node_modules 中兼容问题的计划。

4. preset-env 的无奈对依赖包中的代码 polyfill。

   1. 在 webpack 的 babel-loader 中配置 include 蕴含 node_modules，然而导致打包工夫超长（node_modules 中的代码太多了），而且引入 polyfill 的时候不是引入到入口文件中导致引入反复的问题。
   2. 在 babel 的 GitHub 的 issue 中发现的一种计划，本人写插件，强制把须要的 core-js 模块引入到入口文件。
5. polyfill.io 与动静引入 polyfill。
   计划：在我的项目中插入脚本，把浏览器的 UA 信息附着到申请中，而后在服务端剖析 UA 对应的浏览器，而后返回对应的 polyfill。
   polyfill.io 是更优良的计划，能解决浏览器兼容问题，而且对资源体积也不会节约，毛病是对须要兼容的浏览器会引入所有 polyfill。