在前端开发中，我们常常需要考虑不同浏览器的兼容性问题。通过 Browserslist 工具，我们可以配置对哪些浏览器进行兼容处理，并且在构建前会根据此配置优化输出的代码。
Vue CLI 3 是一个建立在 Webpack 4 和 Babel 7 之上的工具，它提供了一个默认的配置文件 babel.config.js ，可以让我们轻松配置项目中的 Babel 编译选项。在这篇文章中，我们将探讨如何在 Vue CLI 3 和 Babel 中使用 Browserslist。
Browserslist 简介
Browserslist 是一个用于在不同的前端工具之间共享目标浏览器(或其他环境)的配置工具。根据配置，它可以自动处理 CSS 或 JavaScript 以及其他代码的相应处理方式，以达到兼容不同浏览器的目的。它在 Autoprefixer、babel-preset-env、postcss-preset-env、eslint-plugin-compat 等一系列工具中被广泛应用。
通过 Browserslist 我们可以配置目标浏览器的版本范围，例如 '> 1%, last 2 versions' 表示支持市场份额超过 1% 的浏览器以及最新的两个版本。
在 Babel 中使用 Browserslist
在 Vue CLI 3 中，Babel 默认使用的是 @vue/babel-preset-app ，它已经包含了 @babel/preset-env ，我们只需要在项目根目录创建一个名为 .browserslistrc 的文件，用于配置目标浏览器。
last 2 versions > 1%
默认情况下，@babel/preset-env 可以根据我们项目中的 ECMAScript 版本自动选择需要的插件和预设，但是如果我们需要对某个特定浏览器进行一些配置，可以通过 .browserslistrc 文件去实现。
Babel 运行前会读取这个文件，确保它使用了正确的插件和转换器。
在 Vue CLI 3 中使用 Browserslist
在 Vue CLI 3 中使用 Browserslist 跟上述方法类似，我们只需要在项目根目录创建一个名为 .browserslistrc 的文件，用于配置目标浏览器。
除此之外，在 package.json 文件中也需要配置 browserslist ，以便在 Browserslist 中包含 Vue CLI 配置的选项，例如 production 和 test 模式。
-- -------------------- ---- -------
--------------- -
------------- -
-- ----
----- - ----------
---- -- -- --
--
------- -
----- - ----------
---- -- -- --
-
-这样，我们在构建前就可以通过 Browserslist 自动优化输出的代码。
示例代码
在 vue.config.js 文件中，我们可以添加如下配置：
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
----- ------- - --------------------------
---------------------
-------
-------------------------
----------------------------
----------
--------- -------------
---
--
-- -------
----------------- -
-------- ------------
--
---- -
-------------- -
-------- -
-------- -
----------------------------------
---------- ---
-------- ---------------
--
-
-
-
-
-在根目录下新建 .browserslistrc 文件，并添加如下配置：
last 2 versions > 1%
然后在 main.js 文件中添加如下代码：
import "core-js/stable"; import "regenerator-runtime/runtime";
这些代码的作用是引入 Polyfill 以支持不同浏览器。当我们需要使用 async/await 或 Object.entries() 这样的 ES6+ 语法时，可以通过引入 core-js/stable 和 regenerator-runtime/runtime 来打补丁。
这样，我们就可以通过 Browserslist 配置实现浏览器兼容性处理，让我们的代码在不同平台下都能够顺利运行。
总结
在前端开发中，Browserslist 工具可以帮助我们在不同浏览器中实现代码的兼容性处理，Vue CLI 3 和 Babel 都已经集成了该工具，只需要简单配置即可在不同平台下实现代码兼容。希望本文能够对大家在实践中使用 Browserslist 带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d09a4cb5eee0b52578c16c