当前位置: 首页 > news >正文

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&#xff09;引入nacos-config依赖 首先&#xff0c;在user-service服务中&#xff0c;引入nacos-config的客户端依赖&#xff1a; <!--nacos配置管理依赖--> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-sta…...

hutool ExcelUtil导出excel二级表头

简介&#xff1a;Hutool是一款十分好用的开发工具集&#xff0c;里面包含了大部分日常开发常用的工具&#xff0c;使用简单方便&#xff0c;可以大大提升日常开发效率&#xff0c;十分推荐大家使用。这里简单总结一下基于Hutool的Excel使用。 一、Hutool依赖 <!-- Excel导出…...

《开箱元宇宙》:认识香港麦当劳通过 The Sandbox McNuggets Land 的 Web3 成功经验

McNuggets Land 是 The Sandbox 于 2023 年发布的最受欢迎的体验之一。在本期的《开箱元宇宙》系列中&#xff0c;我们采访了香港麦当劳数位顾客体验暨合作伙伴资深总监 Kai Tsang&#xff0c;来了解这一成功案例背后的策略。 在不断发展的市场营销和品牌推广领域&#xff0c;不…...

基于python+TensorFlow+Django卷积网络算法+深度学习模型+蔬菜识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 介绍了TensorFlow在图像识别分类中的应用&#xff0c;并通过相关代码进行了讲解。通过TensorFlow提供的工具和库&am…...

Python异常处理:三种不同方法的探索与最佳实践

Python异常处理&#xff1a;三种不同方法的探索与最佳实践 前言 本文旨在探讨Python中三种不同的异常处理方法。通过深入理解各种异常处理策略&#xff0c;我们可以更好地应对不同的编程场景&#xff0c;选择最适合自己需求的方法。 异常处理在编程中扮演着至关重要的角色。合…...

一文图解爬虫(spider)

—引导语 互联网&#xff08;Internet&#xff09;进化到今天&#xff0c;已然成为爬虫&#xff08;Spider&#xff09;编制的天下。从个体升级为组合、从组合联结为网络。因为有爬虫&#xff0c;我们可以更迅速地触达新鲜“网事”。 那么爬虫究竟如何工作的呢&#xff1f;允许…...

腾讯云3年期轻量应用服务器优惠(薅羊毛教程)

腾讯云轻量应用服务器特价是有新用户限制的&#xff0c;所以阿腾云建议大家选择3年期轻量应用服务器&#xff0c;一劳永逸&#xff0c;免去续费困扰。腾讯云轻量应用服务器3年优惠可以选择2核2G4M和2核4G5M带宽&#xff0c;3年轻量2核2G4M服务器540元&#xff0c;2核4G5M轻量应…...

多个div横向排列的几种方法

以下面这组 div 为例&#xff0c;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 年&#xff0c;并于 2009 年正式对外发布。它从 2009 年 9 月 21 日开始作为谷歌公司 20% 兼职项目&#xff0c;即相关员工利用 20% 的空余时间来参与 Go 语言的研发工作。该项目的三位领导者均是著名的 …...

深入理解JVM虚拟机第二十三篇:详解JVM当中的栈顶缓存技术

大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。 孙哥链接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员 本专栏简介:话不多说,让我们一起干翻JVM 本文章简介:话不多说,让我们讲清楚JVM当中与操作数栈相关的字节码指令…...

通过easyexcel导出数据到表格

这篇文章简单介绍一下怎么通过easyexcel做数据的导出&#xff0c;使用之前easyui构建的歌曲列表crud应用&#xff0c;添加一个导出按钮&#xff0c;点击的时候直接连接后端接口地址&#xff0c;在后端的接口完成数据的导出功能。 前端页面完整代码 let editingId; let request…...

C++入门学习(4)引用 (讲解拿指针比较)

上期回顾 在学习完函数重载之后&#xff0c;我们可以使用多个重名函数进行操作&#xff0c;会发现C真的是弥补了好多C语言的不足之处&#xff0c;真的不禁感概一下&#xff0c;时代的进步是需要人去做出改变的&#xff0c;而不是一味的使用啊&#xff01;所以我们今天继续学一下…...

温度采集DS18B20

/******************************************************************** * 描述 : 该文件实现了用温度传感器件DS18B20对温度的采集&#xff0c;并在数码管上显示出来。 ***********************************************************************/ #include<reg52.h&…...

同城跑腿服务预约小程序的作用如何

无论是互联网服务化加快还是前几年疫情冲击&#xff0c;在同城生活服务场景中出现了很多商机&#xff0c;如外卖跑腿、校园跑腿、代买代送等&#xff0c;无论公司还是个人都借势不断提升自己品牌的影响力&#xff0c;并且依赖朋友圈不断提升生意营收。 同城跑腿品牌不少&#…...

前后端开发迭代

要创建一个具有登录和注册功能的前端网页&#xff0c;并使用Go语言编写后端来支持它&#xff0c;你需要分两部分来进行&#xff1a;前端开发和后端开发。下面我将提供一个基本的指导方案。 前端开发 前端部分主要涉及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的命令窗口&#xff0c;现在就来看看可视化窗口要怎么操作。 点击Git GUI Here GUI界面 在g…...

CSS的初步学习

CSS 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离. CSS 就是 “东方四大邪术” 之化妆术 CSS 基本语法规范: 选择器 若干属性声明 选择器决定针对谁修改 (找谁) 声明决定修…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...