浏览器兼容处理细节

pufy
160 阅读3分钟
  • 本文主要讲述的是 browserslist 工具 结合webpack、 babel-loader
  • 本文全部以作者的理解方向进行出发，欢迎评论探讨

1. 浏览器兼容概述

  • 要知道，跑在浏览器上面的所有代码，无非就是三大类 （以生物举例）

    • HTML： 定义网页架构 （骨架）
    • CSS： 美化网页 （皮肉、衣服）
    • JAVASCRIPT： 网页行为（动态、奔跑、跳高）

  • 随着技术的不断更新，浏览器的不断迭代，每个版本的浏览器都会或多或少的增加一些API，增加更丰富的功能，处理更复杂的问题

  • 这就出现了一个问题，浏览器最新的版本是没办法去普及到所有的客户端上面，这就造成了，如果某个浏览器最新版本出现的API，在旧的版本中根本不能使用，这就产生了兼容性问题

  • 而在市场上面的浏览器又分很多种，Chrome、Firefox、Safari、IE....

  • 最早的浏览器市场中，IE浏览器和 Netspace相互争锋，打的不可开交。。两种浏览器分别提供不同的API支持，这就让开发者不得不面对一个非常复杂的问题，就是如何让写的代码同时支持跑在这两种浏览器上面

  • 最后出现了ECMA组织对浏览器进行API规范，才逐步解决了这些问题

  • 但如今开发者还会面临一个问题，就是即使出现了ECMA的规范，代码跑在不同的浏览器版本中依然需要考虑兼容性问题

  • 现如今，整个前端都步入工程化时代，webpack等打包工具的出现让开发人员头疼的问题逐渐消失

  • 那么，webpack 又是怎么做到这一点的呢？ 这就不得不了解webpack的强大之处（这里不多讨论，想打我的评论一下，我统计人数）

2. browserslist

  • 我们通常会在 vue、react 脚手架里面见到过 .browserslistrc 文件
>1%
last 2 version
not dead
  • 这是一个配置文件，是为了告诉 browserslist这个工具，需要去查询的浏览器版本范围
  • browserslist 工具会借助 caniuse-lite 工具，去 caniuse.com 上面去查找对应范围的浏览器
  • 也为后续讲解的babel、postcss 提供了查询支持

3.babel-loader

  • babel 其实就是一个编译器，简单的编译过程：

    • 词法分析、语法分析 生成tokens数组
    • 将tokens 数组 生成 AST树
    • 根据配置转换transform生成新的AST树
    • 生成generator新的代码

  • babel 在编译的过程中，可以借住一些插件对转换的过程进行配置限制，比如将ES6的代码转换成ES5的代码需要用到的插件：

    • @babel/plugin-transform-arrow-functions 将箭头函数转换成普通函数
    • @babel/plugin-transform-block-scoping 将let/const 转换成var

  • 那么，如果代码里面使用了 类似Array.prototype.includes 方法，而这个方法是ES7 的版本才出现的，上面的两个插件只能转换两个东西，对这个却无能为力，怎么办？

  • 这就需要借助babel 的另一个强大的功能--polyfill

  • babel 实现polyfill 需要借助两个库

    • corejs
    • regenerator-runtime

  • 这两个库主要帮助我们对代码进行补丁操作，babel在编译的过程中，会使用browserslist 工具，对需要适配的浏览器及浏览器版本进行查询，再对我们编写的代码中不适配的API通过上面两个库去集成进来

  • 上配置babel.config.js：

module.exports = {
    presets: [
        ["@babel/preset-env", {
            corejs: '3', // 这里指定安装的 corejs的版本
            useBuiltins: 'useage', // 这里会对 需要集成进来的代码进行操作
        }]
    ]
}

这里就介绍这么多，笔者笔记分享，over

avatar
文章
阅读
粉丝