浏览器兼容问题处理

IE浏览器兼容问题处理

JS部分：

问题：
vue项目在ie11下一片空白

原因：

IE10浏览器解析不了es6的语法，需要我们使用babel（Babel是一种工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript）。但是Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。

解决1.：
1.在vue项目中安装babel-polyfill

​ polyfill指的是“用于实现浏览器不支持原生功能的代码”，比如，现代浏览器应该支持fetch函数，对于不支持的浏览器，网页中引入对应fetch的polyfill后，polyfill就给全局的window对象上增加一个fetch函数，让这个网页中的JavaScript可以直接使用fetch函数了，就好像浏览器本来就支持fetch一样。

npm install --save-dev babel-polyfill
2.在mian.js中引入babel-polyfill（要在引入vue，vuex，elementui 之前引入，直接写在第一句）

import ‘babel-polyfill’;

注意： vue不持之ie8 以及之前的版本

这里介绍的是babel-polyfill的完整导入，如果为了性能考虑，你还可以针对ie的报错信息进行局部导入，如promise之类。

解决2.：core-js

core-js是什么：

你可能听过’babel-polyfill’，babel-polyfill 融合了 core-js 和 regenerator-runtime,因此’babel-polyfill’ 本质就是’corejs’

core-js 是 babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范

core-js的使用：

1.安装：npm i --save core-js

 1.1'core-js' 安装'npm install core-js' 作用'定义全局的polyfill'

 1.2.'core-js-pure' 安装 'npm i core-js-pure' 作用'提供不污染全局环境的polyfill，等价于core-js@2/library'

 1.3.'core-js-compat'安装'npm i core-js-compat' 作用维护了按照'browserslist'规范的垫片需求数据，来帮助我
 们找到'符合目标环境'的 'polyfills' 需求集合

 1.4.'core-js-builder' 安装'npm i core-js-builder' 作用可以被 Node.js 服务使用，构建出不同场景的垫片包。

 1.5.'core-js-builder' 安装'npm i core-js-builder' 作用可以结合 'core-js-compact' 以及 'core-js'，并利用 'webpack '能力，
 根据需求打包出 core-js 代码

2.使用：在main.js入口文件中引入

2.'core-js' 导入几种形式：

// 导入所有新提案api
import "core-js";
// 唯一稳定的'core js'功能-es和web标准
import "core-js/stable";
// 仅支持稳定的ES功能
import "core-js/es";
// 只导入指定api
import "core-js/features/set";

import "core-js/stable/set";
import "core-js/es/set";

总结：简单使用，不太考虑优化： 1.npm i --save core-js 2.main.js入口文件中导入import “core-js”;

推荐使用：兼容性推荐使用core-js,因为core-js包含了babel-polyfill，且babel-polyfill已经逐步放弃使用了

CSS部分：

1.使用ormalize.css 抹平差异，同时可以定制自己的 reset.css，例如通过通配符选择器或者标签选择器（推荐），全局重置样式

2.使用特定的浏览器前缀

3.针对动画效果，进行渐进增强，优雅降级

4.上面能解决大部分的浏览器差异性，如果还有其他的问题，可以针对不同的点进行解决。我的意思就是自己百度

这里推荐一个网站，可以把你写的css转换成兼容的css：http://autoprefixer.github.io/

IE经典，报: SCRIPT1002:语法错误

原因是因为是babel跳过了node包的编译 导致的语法兼容性问题

尽管我知道了这个原因，也不行，为啥，因为我对很多包进行了externals，然后进行cdn引入的。看来，有时候优化也不是特别行啊。