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

最新推荐文章于 2024-03-20 07:45:00 发布

易烊千鹤

最新推荐文章于 2024-03-20 07:45:00 发布

阅读量611

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 webpack html edge浏览器

本文链接：https://blog.csdn.net/weixin_46051988/article/details/128180157

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浏览器兼容

浏览器兼容性问题分为三大类： ①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

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";
        }]],
    },
}
```
有对应关系的上面我们已经配置了，有对应关系就是指ES5中有对应的概念，例如：箭头函数对应普通函数，let对应var，这个就叫做有对应关系；

没有对应关系就是E5中根本就没有对应的语法，例如Promise，includes等方法是ES678新增的，那么这时候需要增加一些额外的配置，让babel自己帮我们实现对应的语法,配置如上
```
npm install --save @babel/polyfill
```
5.直接在文件中导入polyfill模块的弊端
直接导入polyfill的方式只适用于一般项目开发, 但是如果是在编写一些第三方模块的时候这种方式会出现一些问题
因为这种方式是通过全局变量的方式来注入代码, 会污染全局环境. 所以我们再来看一下polyfill的第二种配置方式

5.1第二种配置方式

安装相关模块
```
npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
```
配置相关信息
```
plugins: [
    ["@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
        }
    ]
]
```
注意点:
“corejs”: false, 还是全局注入,还是会污染全局环境
“corejs”: 2, 则不会污染全局环境
还需安装：
```
npm install --save @babel/runtime-corejs2
```