js:Browserslist用特定语句查询浏览器列表的工具与Babel和Postcss配置使用
目录
- Browserslist
- Babel 和 Browserslist
- Postcss 和 Browserslist
- 推荐配置
- 参考文章
Browserslist
Browserslist 是一个用特定语句查询浏览器列表的工具
文档
- https://www.npmjs.com/package/browserslist
- https://github.com/browserslist/browserslist#full-list
安装
pnpm install --save-dev browserslist
使用示例
$ npx browserslist "last 2 Chrome versions" chrome 119
chrome 118
Babel 和 Browserslist
文档
- https://babeljs.io/
有如下代码,需要通过babel转译为兼容浏览器的代码
src/index.js
const say = (msg) => {console.log(msg);
};
say("hello");
安装 babel依赖
pnpm install --save-dev @babel/core @babel/cli @babel/preset-env
在 package.json 中配置babel
{"babel": {"presets": ["@babel/preset-env"]}
}
运行
$ npx babel ./src/index.js --out-dir dist
输出
"use strict";var say = function say(msg) {console.log(msg);
};
say("hello");
在 package.json 中增加browserslist 配置
{"babel": {"presets": ["@babel/preset-env"]},"browserslist": ["chrome 119"]
}
运行
$ npx babel ./src/index.js --out-dir dist
输出
"use strict";const say = msg => {console.log(msg);
};
say("hello");
比对两次输出,将浏览器兼容范围减小后,代码直接就是箭头函数
Postcss 和 Browserslist
使用postcss自动添加css的浏览器前缀
文档
- https://github.com/postcss/postcss-load-config
- https://github.com/postcss/postcss-cli
安装
$ pnpm i -D postcss postcss-cli autoprefixer
在 package.json 中 配置 postcss
{"postcss": {"map": false,"plugins": {"autoprefixer": {}}}
}
src/style.css
.box {box-sizing: border-box;
}
不配置browserslist的情况下
运行命令
$ npx postcss ./src/style.css -o dist/style.css
生成
.box {box-sizing: border-box;
}
package.json 配置browserslist
{"browserslist": ["cover 99.5%"],
}
运行命令
$ npx postcss ./src/style.css -o dist/style.css
输出
.box {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
推荐配置
Browserslist 将依赖BROWSERSLIST_ENV 或者 NODE_ENV
{"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
{"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": {}}}
}
参考文章
- browserslist 是什么?看这篇就够了
- 前端工程基础知识点–Browserslist (基于官方文档翻译)
相关文章:
js:Browserslist用特定语句查询浏览器列表的工具与Babel和Postcss配置使用
目录 BrowserslistBabel 和 BrowserslistPostcss 和 Browserslist推荐配置参考文章 Browserslist Browserslist 是一个用特定语句查询浏览器列表的工具 文档 https://www.npmjs.com/package/browserslisthttps://github.com/browserslist/browserslist#full-list 安装 pnp…...
odoo16前端框架源码阅读——boot.js
odoo16前端框架源码阅读——boot.js 从名字就能看出来,这个文件是一个启动文件。 odoo前端将所有的js打包成了两个文件,一个是common.js,另一个是backend.js, 而common.js 是最先加载的 在common.js打包的js文件中最先加载的是下面的文件,看…...
使用MybatisPlus时出现的java.lang.NullPointerException异常~
错误描述如下所示: 错误原因:Junit的导包错误 单元测试的包有如下所示两个 我们应该根据springboot的版本进行选择, 在Spring Boot 2.2.X以后使用import org.junit.jupiter.api.Test Junit5 在Spring Boot 2.2.x之前使用import org.junit.T…...
27 微服务配置拉取
1)引入nacos-config依赖 首先,在user-service服务中,引入nacos-config的客户端依赖: <!--nacos配置管理依赖--> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-sta…...
hutool ExcelUtil导出excel二级表头
简介:Hutool是一款十分好用的开发工具集,里面包含了大部分日常开发常用的工具,使用简单方便,可以大大提升日常开发效率,十分推荐大家使用。这里简单总结一下基于Hutool的Excel使用。 一、Hutool依赖 <!-- Excel导出…...
《开箱元宇宙》:认识香港麦当劳通过 The Sandbox McNuggets Land 的 Web3 成功经验
McNuggets Land 是 The Sandbox 于 2023 年发布的最受欢迎的体验之一。在本期的《开箱元宇宙》系列中,我们采访了香港麦当劳数位顾客体验暨合作伙伴资深总监 Kai Tsang,来了解这一成功案例背后的策略。 在不断发展的市场营销和品牌推广领域,不…...
基于python+TensorFlow+Django卷积网络算法+深度学习模型+蔬菜识别系统
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 介绍了TensorFlow在图像识别分类中的应用,并通过相关代码进行了讲解。通过TensorFlow提供的工具和库&am…...
Python异常处理:三种不同方法的探索与最佳实践
Python异常处理:三种不同方法的探索与最佳实践 前言 本文旨在探讨Python中三种不同的异常处理方法。通过深入理解各种异常处理策略,我们可以更好地应对不同的编程场景,选择最适合自己需求的方法。 异常处理在编程中扮演着至关重要的角色。合…...
一文图解爬虫(spider)
—引导语 互联网(Internet)进化到今天,已然成为爬虫(Spider)编制的天下。从个体升级为组合、从组合联结为网络。因为有爬虫,我们可以更迅速地触达新鲜“网事”。 那么爬虫究竟如何工作的呢?允许…...
腾讯云3年期轻量应用服务器优惠(薅羊毛教程)
腾讯云轻量应用服务器特价是有新用户限制的,所以阿腾云建议大家选择3年期轻量应用服务器,一劳永逸,免去续费困扰。腾讯云轻量应用服务器3年优惠可以选择2核2G4M和2核4G5M带宽,3年轻量2核2G4M服务器540元,2核4G5M轻量应…...
多个div横向排列的几种方法
以下面这组 div 为例,group的高度由内容撑开 <div id"group"><div id"div1">div1</div><div id"div2">div2</div><div id"div3">div3</div> </div>显示结果如下为上下排…...
【编程语言发展史】Go语言的发展历史
目录 Go的起源 Go语言发展时间轴 logo Go的起源 Go 语言起源 2007 年,并于 2009 年正式对外发布。它从 2009 年 9 月 21 日开始作为谷歌公司 20% 兼职项目,即相关员工利用 20% 的空余时间来参与 Go 语言的研发工作。该项目的三位领导者均是著名的 …...
深入理解JVM虚拟机第二十三篇:详解JVM当中的栈顶缓存技术
大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。 孙哥链接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员 本专栏简介:话不多说,让我们一起干翻JVM 本文章简介:话不多说,让我们讲清楚JVM当中与操作数栈相关的字节码指令…...
通过easyexcel导出数据到表格
这篇文章简单介绍一下怎么通过easyexcel做数据的导出,使用之前easyui构建的歌曲列表crud应用,添加一个导出按钮,点击的时候直接连接后端接口地址,在后端的接口完成数据的导出功能。 前端页面完整代码 let editingId; let request…...
C++入门学习(4)引用 (讲解拿指针比较)
上期回顾 在学习完函数重载之后,我们可以使用多个重名函数进行操作,会发现C真的是弥补了好多C语言的不足之处,真的不禁感概一下,时代的进步是需要人去做出改变的,而不是一味的使用啊!所以我们今天继续学一下…...
温度采集DS18B20
/******************************************************************** * 描述 : 该文件实现了用温度传感器件DS18B20对温度的采集,并在数码管上显示出来。 ***********************************************************************/ #include<reg52.h&…...
同城跑腿服务预约小程序的作用如何
无论是互联网服务化加快还是前几年疫情冲击,在同城生活服务场景中出现了很多商机,如外卖跑腿、校园跑腿、代买代送等,无论公司还是个人都借势不断提升自己品牌的影响力,并且依赖朋友圈不断提升生意营收。 同城跑腿品牌不少&#…...
前后端开发迭代
要创建一个具有登录和注册功能的前端网页,并使用Go语言编写后端来支持它,你需要分两部分来进行:前端开发和后端开发。下面我将提供一个基本的指导方案。 前端开发 前端部分主要涉及HTML、CSS和JavaScript。你可以使用框架如React或Vue来简化…...
Git可视化界面的操作,SSH协议的以及IDEA集成Git
目录 一. Git可视化界面的操作 二. gitee的ssh key 2.1 SSH协议 2.2 ssh key 三. IDEA集成Git 3.1 分享项目 3.2 下载项目 一. Git可视化界面的操作 上一篇博客只用到了git的命令窗口,现在就来看看可视化窗口要怎么操作。 点击Git GUI Here GUI界面 在g…...
CSS的初步学习
CSS 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离. CSS 就是 “东方四大邪术” 之化妆术 CSS 基本语法规范: 选择器 若干属性声明 选择器决定针对谁修改 (找谁) 声明决定修…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
