在Web前端开发中，我们需要考虑不同浏览器对于HTML、CSS和JavaScript的支持情况。为了方便开发者了解各种浏览器的支持情况，社区中出现了一些npm包，其中一个比较优秀的是available-browsers。
安装
在终端执行以下命令即可安装：
npm install available-browsers --save-dev
使用方法
一般来说，在项目初期我们需要确定我们要支持哪些浏览器。available-browsers 可以帮助我们生成一个浏览器配置文件，该文件包含当前最新浏览器和指定版本的浏览器列表。
首先创建一个 browserslist.config.js 文件并添加如下代码：
// browserslist.config.js
module.exports = require('available-browsers')({
pretty: true,
});然后，我们可以使用以下命令来生成浏览器列表：
npx browserslist
生成的结果如下：
-- -------------------- ---- ------- ------- -- ------ -- ------ ---- ------ ---- ------- -- ------ -- ------ -- ------ -- ---- -- ---- -- -------- -- ------- -- -- -- ------- -- ------- --------- ------- --------- ------- --------- ------- --------- ---
可以看到，它为我们列出了不同类型的浏览器及其版本。
指定要支持的浏览器
如果我们想指定要支持的浏览器，我们可以修改 browserslist.config.js 文件。例如，下面的示例中，我们只想支持最新版的 Chrome 和 Firefox 浏览器：
-- -------------------- ---- -------
-- ----------------------
-------------- - -
-------------- -
----- - ------ ---------
----- - ------- --------
--
------------- -
----- - ------ ---------
----- - ------- --------
-
-在 webpack 中使用
如果您正在使用Webpack构建应用程序，则可以使用 babel-loader 和 @babel/preset-env 来转换JavaScript代码以满足目标浏览器的需求。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-结论
使用 available-browsers 可以帮助开发者清晰地了解各种浏览器的支持情况，并能够生成适当的浏览器配置文件。在项目构建过程中，我们还可以使用 webpack 将 JavaScript 代码转换为浏览器可识别的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46850