关于现代前端开发工程化提前下的浏览器兼容

首先浏览器兼容分为了手机端和PC端兼容这个主要使用了媒体查询以及相应rem,vw,wh方案。这里谈到的不是这种兼容。接下来要谈的是JS语法以及CSS语法相关兼容。

1.JS语法兼容

目前JS兼容主要使用babel编译器,它可以作为一个单独的工具来使用。但是大多数情况是整合到Vue或者React项目中在webpack中作为loader使用。但是babel-loader本身只是一个loader,它只会根据配置的不同规则将.vue, . jsx, .ts等相应文件打包到最终的代码中。不会对代码做进一步的处理。需要处理的话,还需要安装相应的插件plugins或者presets(预设,最常用的方案)来做进一步的处理。

preset常用预设分为@babel/preset-env, @babel/preset-react, @babel/preset-typescript

配置方式有两种。一种是 通过npm安装成功后,在webpack.config.js文件下配置rules。常见配置如下:

另一种是在babel.config.js文件下配置。早期名字可能是.babelrc文件。目前babel官方提倡前一种命名方式。常见配置如下:

presets是什么呢 ?

preset是一种预先设定好的语法处理方案,如果想要单独配置自己兼容方案,还需要安装browserlist工具。通过npm安装成功后,在项目中添加 .browserslistrc文件来配置规则。常见配置如下:

以上的preset相关的配置只能处理像是const let 以及箭头函数相关的语法兼容,稍微复杂一些的promise和includes一些高级语法还是无法处理的。

这个时候就需要polyfill方案。早期使用的是babel-polyfill,目前这个插件已经废弃。最新使用是core-js和regenerator-runtime两个工具,通过npm安装完成之后可以在presets页面进行配置。常见配置如下:

2.CSS语法兼容

css语法兼容目前常用是postcss-loader这个工具,这个工具跟babel-loader类似本身只提供识别css文件能力,对css文件进行处理需要安装其他插件,autoprefixer就是常用一种。常见配置如下:

但是更加好用和常用插件则是postcss-preset-env插件 。他可以配置在上面文件中,但是更多是单独配置在postcss.config.js文件当中。常见配置如下:

3.其他相关

.browserslistrc文件下的配置不仅JS的preset能够读取CSS的preset也能够进行读取。所以browserlist是对presets统一配置兼容规则的方式。也是项目中最常用的一种。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

helloReact

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值