js:Browserslist用特定语句查询浏览器列表的工具与Babel和Postcss配置使用

目录

Browserslist

Browserslist 是一个用特定语句查询浏览器列表的工具

文档

安装

bash 复制代码
pnpm install --save-dev browserslist

使用示例

bash 复制代码
$ npx browserslist "last 2 Chrome versions" 

chrome 119
chrome 118

Babel 和 Browserslist

文档

有如下代码,需要通过babel转译为兼容浏览器的代码

src/index.js

js 复制代码
const say = (msg) => {
  console.log(msg);
};
say("hello");

安装 babel依赖

bash 复制代码
pnpm install --save-dev @babel/core @babel/cli @babel/preset-env

在 package.json 中配置babel

json 复制代码
{
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}

运行

bash 复制代码
$ npx babel ./src/index.js --out-dir dist

输出

js 复制代码
"use strict";

var say = function say(msg) {
  console.log(msg);
};
say("hello");

在 package.json 中增加browserslist 配置

json 复制代码
{
    "babel": {
        "presets": [
          "@babel/preset-env"
        ]
    },
    "browserslist": [
        "chrome 119"
    ]
}

运行

bash 复制代码
$ npx babel ./src/index.js --out-dir dist

输出

js 复制代码
"use strict";

const say = msg => {
  console.log(msg);
};
say("hello");

比对两次输出,将浏览器兼容范围减小后,代码直接就是箭头函数

Postcss 和 Browserslist

使用postcss自动添加css的浏览器前缀

文档

安装

bash 复制代码
$ pnpm i -D postcss postcss-cli autoprefixer

在 package.json 中 配置 postcss

json 复制代码
{
  "postcss": {
    "map": false,
    "plugins": {
      "autoprefixer": {}
    }
  }
}

src/style.css

css 复制代码
.box {
  box-sizing: border-box;
}

不配置browserslist的情况下

运行命令

bash 复制代码
$ npx postcss ./src/style.css -o dist/style.css

生成

css 复制代码
.box {
  box-sizing: border-box;
}

package.json 配置browserslist

json 复制代码
{
    "browserslist": [
        "cover 99.5%"
    ],
}

运行命令

bash 复制代码
$ npx postcss ./src/style.css -o dist/style.css

输出

css 复制代码
.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

推荐配置

Browserslist 将依赖BROWSERSLIST_ENV 或者 NODE_ENV

json 复制代码
{
  "browserslist": {
    "production": [
      "> 1%",
      "last 2 version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  }
}
  • > 1% 全球市场占有率大于 1% 的浏览器
  • last 2 version 所有浏览器的最后 2 个版本
  • last 1 chrome version 查找 Chrome 浏览器的最后 1 个版本

完整配置 package.json

json 复制代码
{
  "type": "module",
  "dependencies": {},
  "devDependencies": {
    "browserslist": "^4.22.1",
    "@babel/cli": "^7.23.0",
    "@babel/core": "^7.23.2",
    "@babel/preset-env": "^7.23.2",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "postcss-cli": "^10.1.0",
    "postcss-preset-env": "^9.3.0"
  },
  "browserslist": {
    "production": [
      "> 1%",
      "last 2 version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "postcss": {
    "map": false,
    "plugins": {
      "autoprefixer": {}
    }
  }
}

参考文章

相关推荐
军训猫猫头5 分钟前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
爱分享的程序员10 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘15 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的17 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
真的想上岸啊19 分钟前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
南屿im24 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
明天好,会的26 分钟前
跨平台ZeroMQ:在Rust中使用zmq库的完整指南
开发语言·后端·rust
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 小时前
vue中添加原生右键菜单
javascript·vue.js
丁劲犇1 小时前
用 Turbo Vision 2 为 Qt 6 控制台应用创建 TUI 字符 MainFrame
开发语言·c++·qt·tui·字符界面·curse