三大浏览器兼容性问题总结

浏览器兼容

浏览器兼容性问题分为三大类： ①HTML兼容 ②CSS兼容 ③JavaScript兼容

浏览器兼容性问题也分为手动解决，和简单配置解决。

HTML兼容

html兼容问题涉及到的主要是不同的浏览器能识别的标签不同，有些高级的标签没办法在低级的浏览器中使用，但是我们的常规布局还是以div+css+input为主，这类问题很少会出现

css兼容问题

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。

具体配置可以参考官网或者https://juejin.cn/post/6844904017802297352

压缩 CSS 其他方法可以参考 Webpack 文档中这一段 。使用插件mini-css-extract-plugin

javaScript兼容

1. 使用bable处理浏览器es6兼容

npm install --save-dev babel-loader @babel/core  @babel/preset-env
1

• presets优化：

  实际项目开发中，默认情况下babel会将高于ES5版本的代码都转换为ES5代码

  但是有时候我们需要兼容的浏览器已经实现了更高版本的代码，那么我们这个时候我们就不需要转换了

  因为如果浏览器本身已经实现了，我们再去转换就会增加代码的体积，就会影响网页的性能

  所以我们通过配置presets的方式，来告诉webpack我们需要兼容哪些浏览器

  bable配置

  {
      test: /\.js$/,
      exclude: /node_modules/,  // 不做处理的目录
      loader: "babel-loader",
      options: {
          presets: [["@babel/preset-env",{
              targets: {
                  "chrome": "58",
                  "ie": "10"
              },
               useBuiltIns: "usage" //这样配置之后就不用在文件中导入import "@babel/polyfill";
          }]],
      },
  }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

  有对应关系的上面我们已经配置了，有对应关系就是指ES5中有对应的概念，例如：箭头函数对应普通函数，let对应var，这个就叫做有对应关系；

  没有对应关系就是E5中根本就没有对应的语法，例如Promise，includes等方法是ES678新增的，那么这时候需要增加一些额外的配置，让babel自己帮我们实现对应的语法,配置如上

  npm install --save @babel/polyfill
  1

  5.直接在文件中导入polyfill模块的弊端
  直接导入polyfill的方式只适用于一般项目开发, 但是如果是在编写一些第三方模块的时候这种方式会出现一些问题
  因为这种方式是通过全局变量的方式来注入代码, 会污染全局环境. 所以我们再来看一下polyfill的第二种配置方式

  5.1第二种配置方式

  安装相关模块

  npm install --save @babel/polyfill
  npm install --save-dev @babel/plugin-transform-runtime
  npm install --save @babel/runtime
  1
  2
  3

  配置相关信息

  plugins: [
      ["@babel/plugin-transform-runtime",
          {
              "absoluteRuntime": false,
              "corejs": 2,
              "helpers": true,
              "regenerator": true,
              "useESModules": false
          }
      ]
  ]
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  注意点:
  “corejs”: false, 还是全局注入,还是会污染全局环境
  “corejs”: 2, 则不会污染全局环境
  还需安装：

  npm install --save @babel/runtime-corejs2
  1

大致总结了这些，后续还会补充