阅读 112

通过webpack解决浏览器兼容问题

前言

很多面试时都会问到关于浏览器兼容问题,正好最近在看webpack打包,那就在这里记录一下我们如何通过webpack来实现兼容。

需求

  1. 要知道我们到底需要兼容那些浏览器,在这里就需要用到browserlist来配置需要兼容的浏览器版本并告诉webpack中的其他插件去做对应的兼容。
  2. CSS的兼容:具体是给我们的CSS自动添加前缀实现,在这里就需要用到postcss包来实现
  3. JS的兼容:JS的兼容是通过babel来实现将ES6的语法向之前版本做转换以兼容浏览器,但是仅通过babel还不够,对于类似Promise这个高级语法我们还需要求助于polyfill

总体来说如下图:

image.png

实现

browserlist 安装与配置

浏览器占有查询:caniuse.com/usage-table

  1. 安装browserlist
    yarn add browserlist -D
复制代码
  1. 配置browserlist:有两种配置方法

方法一:添加配置文件.browserslistrc
(1) 在根目录下新建文件.browserslistrc (2) 编写需要配置的浏览器 如图:

image.png

解释一下:市场占有率 大于1% 或者 满足浏览器最新两个版本 或者 没有消死掉(当一个浏览器24个月没有官方更新就会认为死掉了) 满足上诉条件一个即可

方法二:在package.json中配置
如图:

image.png

这样配置后,后续做兼容时,其他loader就知道需要拉取那些代码来做浏览器兼容

CSS 兼容 (posttcss:转换样式的工具)

  1. 安装 postcss-loader
    yarn add postcss-loader
复制代码
  1. 配置postcss-loader

image.png

此时还不能达到自动添加前缀的效果,我们还需要引入 autoprefixer

  1. 安装autoprefixer
    yarn add autoprefixer -D
复制代码
  1. 在配置autoprefixer 为了方便 我们直接安装 postcss-preset-env (插件的集合)
    yarn add postcss-preset-env -D
复制代码
  1. 配置postcss-preset-env

新建postcss.config.js文件,然后编写配置:如图

image.png

此时,就会自动根据browserslistrc文件的配置,在给CSS样式添加兼容性了,实际运行效果如下
原本CSS:

image.png
实际打包后得到CSS

image.png

这样你的css就可以在各个浏览器做兼容啦!是不是soeasy~

JS兼容

  1. 安装babel-loder (先解决一部分兼容)
    yarn add babel-loader 
复制代码
  1. 在webpack.config.js中配置babel-loader

image.png 此时并不会开始js代码的转换,bebel-loader只能当做一个工具,他还需要插件的帮助,即@babel/preset-env 3. 下载@babel/preset-env插件

    yarn add @babel/preset-env -D
复制代码
  1. 在根目录下新建babel.config.js并配置@babel/preset-env -D,如下图

image.png 目前babel已经能够转换部分ES6语法了,如const,let,箭头函数,但是还不能转换Promise,async,await等,需要求助于polyfill 5. 安装polyfill 目前更新版本,polyfill官方建议我们在做JS转换时下载polyfill下的core-js和regenerator就够用了 image.png 下载:

    yarn add core-js regenerator-runtime -D
复制代码
  1. 配置polyfill:如下图

image.png

  1. 当我们在配置polyfill中useBuiltIns:'entry'时需要手动引入包

在(入口文件)index.js 下第一行引入:

    import "core-js/stable"
    import "regenerator-runtime/runtime"
复制代码

总结

浏览器控制包

  • browserlist
  • 配置文件:.browserslistrc

CSS 用到的包

  • postcss-loader
  • autoprefixer
  • postcss-preset-env
  • 配置文件:postcss.config.js

JS 用到的包

  • babel-loder
  • @babel/preset-env
  • core-js
  • regenerator-runtime
  • 配置文件:babel.config.js

webpack是一个很强大得到模块打包工具,在这里仅仅介绍了部分功能,后续有机会再继续更新~

文章分类
前端
文章标签