当前位置：首页 > article >正文

浏览器兼容-polyfill-本地服务-优化

article 2025/9/10 1:51:44

babel和webpack结合

npx babel src --out-dir dist --presets=@babel/preset-env

这是把src下面的东西都用babel转化一下

webpack可以和babel结合使用，首先下载一个这东西：

npm install babel-loader -D

webpack配置：

const path = require('path');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',//重新打包时现将之前打包的文件夹删除clean:true},module:{rules:[{test:/\.js$/,use:{loader:'babel-loader',options:{plugins:['@babel/plugin-transform-arrow-functions','@babel/plugin-transform-block-scoping']}}}]}
}

要指定对应的插件才生效

如果我们一个个的去安装使用插件就需要手动管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据对应的预设来加载插件列表并将其传递给babel

比较常见的预设有env、react、TypeScript

安装preset-env：

npm install @babel/preset-env

浏览器兼容性

浏览器的内核都趋向于使用Blink

我们在编写css和js的时候需要考虑到浏览器的兼容性问题，但是对于前端开发者来说既要写代码又要考虑兼容性就很烦，所以急需一些工具帮助对css/js进行转化

对css进行转化的是postcss

对js进行转化的是babel

而代码要不要自动进行转化取决于要适配的浏览器，一个一个对应版本还是太麻烦了

编写一个browserslistrc配置文件可以帮助我们进行浏览器适配

也得是配让我适配的浏览器我才会给他适配

哪个热门人用的多就挑哪个

怎么知道哪个浏览器人用的多呢？看浏览器市场占有率：

"Can I use" usage tablehttps://caniuse.com/usage-table

超过百分之一的人用就需要做兼容了

写好配置就可以用Browserslist做兼容了（在不同的前端工具之间共享目标浏览器和Node.js版本的配置）

在开发中我们可以编写的条件：

配置browserslist可以配置 package.json也可以单独的一个配置文件.browserslistrc文件

没有配置也有默认配置，当编写了多个条件之后，多个条件之间的关系：

const path = require('path');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',//重新打包时现将之前打包的文件夹删除clean:true},module:{rules:[{test:/\.js$/,use:{loader:'babel-loader',options:{// plugins:[//     '@babel/plugin-transform-arrow-functions',//     '@babel/plugin-transform-block-scoping'//    ]presets:["@babel/preset-env",{// 在开发中针对babel的浏览器兼容查询使用browerlist工具，而不是设置targetstargets:">5%"}]}}}]}
}

推荐使用这个工具，不用targets，因为这个工具能进行统一的适配

配置的targets属性会覆盖browserslist

Stage-X的preset

ECMAScript规范定义了JavaScript如何一步步的进化、发展

TC39是指技术委员会第39号

特性的打磨发展是一步一步的：

在babel7之前（babel6中），我们经常会看到这种设置方式：

它表达的含义是使用对应的babel-preset-stage-x预设

从babel7开始不建议使用了，建议使用preset-env来设置

Babel的配置文件

我们可以将babel的配置信息放到一个独立的文件中，babel可以编写两种配置文件：

babel.config.json(或者.js , .cjs , .mjs)文件

.babelrc.json(或者 .babelrc , .js , .cjs , .mjs)文件

他们两个是由区别的：

认识polyfill

有的时候我们使用了一些语法特性，但是浏览器根本不认识这些特性必然会报错，可以使用polyfill打一个补丁，这样就包含该特性了

useBuiltlns属性设置

第三个值就是entry了

如果我们依赖的某一个库使用了某些polyfill的特性，但是我们使用的是usage之后浏览器可能就会报错

如果担心出现这样的情况可以用entry

需要在入口文件添加import 'core-js/stable'

import 'regenerator-runtime/runtime'

这样做会根据browserslist目标导入所有的polyfill，对应的包也会变大

React的jsx支持

在我们编写react代码时，react使用的语法是jsx，jsx是可以直接使用babel来转换的

对react.jsx处理需要下面的插件：

在开发中不需要一个个的安装这些插件，依然可以用preset配置

npm install @babel/preset-react -D

配置自动构建：

{"name": "babel_core_demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC","description": "","devDependencies": {"@babel/cli": "^7.27.2","@babel/core": "^7.27.4","@babel/plugin-transform-block-scoping": "^7.27.5","@babel/preset-env": "^7.27.2","@babel/preset-react": "^7.27.1","babel-loader": "^10.0.0","html-webpack-plugin": "^5.6.3"}
}

然后在webpack里配置babel：

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',//重新打包时现将之前打包的文件夹删除clean:true},resolve: {extensions: ['.js', '.jsx']  // 这句告诉webpack自动尝试这两个后缀},module:{rules:[{test:/\.jsx?$/,   //表示有0或者1个xuse:{loader:'babel-loader',options:{// plugins:[//     '@babel/plugin-transform-arrow-functions',//     '@babel/plugin-transform-block-scoping'//    ]presets:[["@babel/preset-env", { targets: ">5%" }],"@babel/preset-react"]                  }}}]},plugins:[new HtmlwebpackPlugin({template:'./index.html',filename: 'end.html' })]
}

这个x?已经能即处理js又处理jsx了

但是莫名其妙还是报错，加resolve是永远都搜索这俩文件

babel的配置文件：

module.exports = {presets: ['@babel/preset-env','@babel/preset-react',],};

模板html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div>
</body>
</html>

index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './react/App'
//const定义常量（ES6）
const message = 'Hello World';
console.log(message);const foo = ()=>{console.log("foo function exec!");
}
foo();// 使用字符串中的includes方法
const nickname = 'coderwhy';
console.log(nickname.includes('why'));const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);

最后运行webpack就会打包并且react能成功解析运行在浏览器中了

ts-loader处理ts代码

npm install ts-loader -D

需要安装一下ts：

npm install -g typescript

然后进行初始化：

tsc --init

初始化后直接生成一个tsconfig.json

然后直接运行npm run build就可以完成编译了

使用babel-loader

除了可以使用tsc来编译TS，我们也可以使用Babel

Babel是有对TS进行支持

可以使用插件：@babel/transform-typescript

更推荐直接使用preset：@babel/preset-typescript

ts-loader和babel-loader的选择

ts-loader默认使用的是TypeScript complier

里面是不包含polyfill的

所以最好用babel-loader

使用针对ts的预设就可以解决这个问题

使用预设的好处是可以配置polyfill

module.exports = {presets: [['@babel/preset-env',{corejs: 3, // 配置使用core-js的版本useBuiltIns: 'usage', // 根据配置的浏览器兼容，以及代码中使用到的 API 进行引入 polyfill 按需加载}],'@babel/preset-react','@babel/preset-typescript',],};

ts-loader会进行类型的校验，但是babel-loader就不会，所有各有各的优点

建议我们即用babel完成代码类型的转化，又使用tsc来进行类型的检查

但是我们如何使用tsc进行类型的检查呢？

我们可以在scripts中添加两个脚本用于类型检查

执行npm run ts-check可以进行ts类型检测

执行npm run ts-check-watch可以实时检测类型错误

{"name": "babel_core_demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","ts-check":"tsc --noEmit","ts-check-watch":"tsc --noEmit --watch"},"author": "","license": "ISC","description": "","devDependencies": {"@babel/cli": "^7.27.2","@babel/core": "^7.27.4","@babel/plugin-transform-block-scoping": "^7.27.5","@babel/preset-env": "^7.27.2","@babel/preset-react": "^7.27.1","babel-loader": "^10.0.0","html-webpack-plugin": "^5.6.3","ts-loader": "^9.5.2"},"dependencies": {"@babel/preset-typescript": "^7.27.1"}
}

浏览器兼容-polyfill-本地服务-优化

babel和webpack结合 npx babel src --out-dir dist --presetsbabel/preset-env 这是把src下面的东西都用babel转化一下 webpack可以和babel结合使用，首先下载一个这东西： npm install babel-loader -D webpack配置： const path requir…...

编程日记 2025/9/3 19:05:21

decltype为类型推导关键字。示例代码： // decltype也可用于函数模板编程: template<typename T, typename U> auto add(T t, U u) -> decltype(t u) {return t u; }// decltype推导函数返回类型 auto doubleNumFunc(int x) -> decltype(x * 2) {ret…...

编程日记 2025/9/6 2:32:34

分享今天做的力扣SQL题

其实做之前就打算分享的，但是做完又不想分享了。。。结果没几分钟，还是，写一下吧。我就当各位是监督我的。说一下，这是第一天做SQL题，虽然我也是软件工程专业，但是学的本来就不好，又忘了个差不…...

编程日记 2025/7/6 20:42:47

全球化2.0｜云轴科技ZStack助力香港服务机构VMware替代

香港一家大型社会服务机构长期致力于为公众提供支持与服务，是本地具有代表性的社会服务组织，在香港设有数十个服务中心。为应对VMware订阅模式带来的成本上升和硬件资源受限等问题，该机构决定采用云轴科技ZStack Cloud云平台替代VMware虚拟化…...

编程日记 2025/8/21 5:44:39

Selenium自动化测试工具安装和使用（PyCharm）

一，了解驱动手工测试我们很了解，假设我要测试百度首页是否正常，只需要鼠标点击打开浏览器，然后输入百度网址即可但是对于程序来说，打开浏览器，需要用到对应的驱动，就好比你给电脑装了个外置…...

编程日记 2025/9/4 15:56:23

【网络安全】fastjson原生链分析

fastjson 原生链前言说起 fastjson 反序列化，大部分的利用都是从 type 把 json 串解析为 java 对象，在构造方法和 setter、getter 方法中，做一些文件或者命令执行的操作。当然，在 fastjson 的依赖包中，也存在着像 …...

编程日记 2025/9/5 11:59:40

【人工智能 | 项目开发】Python Flask实现本地AI大模型可视化界面

文末获取项目源码。文章目录项目背景项目结构app.py（后端服务）index.html（前端界面）项目运行项目图示项目源码项目背景随着人工智能技术的快速发展，大语言模型在智能交互领域展现出巨大潜力。本项目基于 Qwen3-1.7B 模型，搭建一个轻量化的智能聊天助手，旨在为用户提…...

编程日记 2025/9/8 10:14:08

uni-app 项目支持 vue 3.0 详解及版本升级方案？

uni-app 支持 Vue 3.0 详解及升级方案一、uni-app 对 Vue 3.0 的支持现状 uni-app 从 3.0 版本开始支持 Vue 3.0，主要变化包括： 核心框架升级： 基于 Vue 3.0 的 Composition API 和 Options API 双模式支持提供 vueuse/core 等组合式 API…...

编程日记 2025/7/9 16:34:35

SpringBoot3中使用虚拟线程的详细过程

在 Spring Boot 3 中使用 Java 21 的虚拟线程（Virtual Threads）可以显著提升 I/O 密集型应用的并发能力。以下是详细实现步骤： 1. 环境准备 JDK 21：确保安装 JDK 21 或更高版本Spring Boot 3.2：最低要求（p…...

编程日记 2025/7/9 1:40:53

达梦使用存储过程实现删除重复记录、判断并添加主键和自增列的逻辑

在达梦数据库中，要确保主键的唯一性约束，可以在存储过程的最前面添加删除重复记录的逻辑。以下是一个完整的存储过程，包含删除重复记录、判断并添加主键和自增列的逻辑： 存储过程示例 -- 切换到指定模式;schema_name 是目标模…...

编程日记 2025/7/12 3:59:36

MySQL间隙锁入手，拿下间隙锁面试与实操

一、MySQL 间隙锁，究竟是什么？ 在 MySQL 的世界里，间隙锁（Gap Lock）就像是一个默默守护数据一致性的卫士，看似低调，却在并发控制中扮演着至关重要的角色。想象一下，你去图书馆借…...

编程日记 2025/7/6 21:07:04

词法分析和词性标注自然语言处理

目录一. 概述 1 不同语言的词法分析 2 英语的形态分析英语单词的形态还原（和正常英语的词法变化一样） 1.有规律变化单词的形态还原编辑 2.动词､名词､形容词､副词不规则变化单词的形态还原 3.对于表示年代&…...

编程日记 2025/9/5 18:06:19

QT聊天项目DAY14

1. 客户端登录 1.1 初始化玩家头像将头像的大小固定在250 * 250 void InitHeadImage(); // 初始化头像/* 初始化头像 */ void LoginWidget::InitHeadImage() {// 加载头像QPixmap OriginalPixmap(":/Chat/Images/head_5.jpg");OriginalPixmap …...

编程日记 2025/9/2 18:03:02

架构设计技巧——架构设计模板

一份实用、高效、覆盖核心要素的架构设计模板是确保设计质量、促进团队沟通和指导实施的关键。以下是一个经过提炼的架构设计文档核心模板框架，结合了业界最佳实践，并强调灵活裁剪： 架构设计文档模板 (核心框架) 文档标识项目/系统名称&a…...

编程日记 2025/9/6 6:03:45

交易系统开发：跨境资本的高速通道架构解密

连接纽约、香港与内陆的金融管道工程总收益互换（TRS）在港美股投资中扮演着跨境资本流动的“隐形桥梁”。本文基于真实跨境券商系统开发实践，深入解析支持多市场、多币种、多通道的TRS平台架构设计与业务解决方案。一、港美股TRS的核心价值&…...

编程日记 2025/9/9 21:21:29

【Ragflow】27.RagflowPlus(v0.4.1)：小版本迭代，问题修复与功能优化

概述 RagflowPlus v0.4.0 在发布后，收到了积极的反馈，同时也包含一些问题。本次进行一轮小版本更新，发布 v0.4.1 版本，对已知问题进行修复，并对部分功能进行进一步优化。开源地址：https://github.com/…...

编程日记 2025/9/6 16:19:41

易语言是什么？易语言能做什么？

易语言（EPL）是什么？ 易语言（Easy Programming Language，简称EPL）是一款面向中文用户的编程语言，由中国人吴涛于2000年开发，专为降低编程门槛设计。其核心特点是…...

编程日记 2025/7/5 22:23:13

【Oracle】数据仓库

个人主页：Guiat 归属专栏：Oracle 文章目录 1. 数据仓库概述1.1 为什么需要数据仓库1.2 Oracle数据仓库架构1.3 Oracle数据仓库关键技术 2. 数据仓库建模2.1 维度建模基础2.2 星形模式设计2.3 雪花模式设计2.4 缓慢变化维度（SCD）处…...

编程日记 2025/9/6 13:16:26

基于开源AI大模型AI智能名片S2B2C商城小程序源码的中等平台型社交电商运营模式研究

摘要：本文聚焦中等平台型社交电商，探讨其与传统微商及大型社交电商平台的差异，尤其关注产品品类管理对代理运营的影响。通过引入开源AI大模型、AI智能名片与S2B2C商城小程序源码技术，构建智能化运营体系。研究结果表明&#xff0c…...

编程日记 2025/9/6 11:05:25

typeof运算符 +unll和undefined的区别

typeof运算符 JavaScript 有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof 数值返回number 1 typeof 123 // "number" 字符串返回string 1 typeof 123 // "string" 布尔值返回boolean 1 typeof fal…...

编程日记 2025/8/1 5:45:52

Vite 双引擎架构 —— Esbuild 概念篇

Vite 底层采用双引擎架构，核心构建引擎是 Esbuild 和 Rollup，二者在开发和生产环境中分工协作，共同实现高性能构建。不可否认，作为 Vite 的双引擎之一，Esbuild 在很多关键的构建阶段(如依赖预编译、TS 语法转译、代码…...

编程日记 2025/9/6 23:11:30

Life：Internship finding

1. 前言 fishwheel writes this Blog to 记录自分自身在研二下找实习的经历。When 写这篇 Blog 的时候我的最后一搏也挂掉了，只能启用保底方案了。When I 打开我的邮箱时，发现里面有 nearly 100 多封与之相关的邮件，顿时感到有些心凉&#x…...

编程日记 2025/8/19 6:15:57

阿里云Alibaba Cloud安装Docker与Docker compose【图文教程】

个人记录进入控制台，找到定时与自动化任务进入‘安装/卸载扩展程序’ 点击‘安装扩展程序’ 选择docker社区版，点击下一步与确定，等待一会安装成功查询版本查询docker sudo docker version查询docker compose sudo docker compo…...

编程日记 2025/9/9 14:35:54

GitHub 趋势日报 (2025年06月07日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 603 netbird 459 dify 440 cognee 352 omni-tools 337 note-gen 239 ragbits 237 …...

编程日记 2025/7/12 3:02:24

Java编程之组合模式

引言在软件开发的世界里，我们经常会遇到需要表示"部分-整体"层次结构的场景。比如文件系统中的文件和文件夹、图形界面中的各种组件、企业组织架构中的部门和员工等。这些场景都有一个共同的特点：我们需要以一种统一的方式来处理单个对象和由…...

编程日记 2025/7/9 4:55:54

Oracle 19c RAC集群ADG搭建

1、将主库的pfile和passwdfile发送到备库 #主库一节点操作 scp -P1234 /tmp/pfile2025.ora bak_ip:/home/oracle sco -P1234 /oracle/app/oracle/product/19.0.0/db/dbs/orapw$ORACLE_SID bak_ip:/oracle/app/oracle/product/19.0.0/db/dbs 2、备库修改参数文件成standby相关…...

编程日记 2025/9/3 8:00:53

ADB识别手机系统弹授权框-如何处理多重弹框叠加和重叠问题

ADB识别手机系统弹授权框-如何处理多重弹框叠加和重叠问题 --蓝牙电话SDK自动部署上一篇：手机App-插入USB时自动授权点击确定按钮-使系统弹出框自动消失下一篇：编写中。一、前言我们在上一篇《手机App-插入USB时自动授权点击确定按钮-使系统弹出框…...

编程日记 2025/9/2 17:27:38

Kaggle-Predicting Optimal Fertilizers-(多分类+xgboost+同一特征值多样性)

Predicting Optimal Fertilizers 题意： 给出土壤的特性，预测出3种最佳的肥料数据处理： 1.有数字型和类别型，类别不能随意换成数字，独热编码。cat可以直接处理category类型。 2.构造一些相关土壤特性特征 3.由于la…...

编程日记 2025/7/9 10:18:38

uniapp+＜script setup lang=“ts“＞解决有数据与暂无数据切换显示，有数据加载时暂无数据闪现（先加载空数据）问题

声明showEmpty 为false，在接口返回处判断有数据时设置showEmpty 为false，接口返回数据为空则判断showEmpty 为true （这样就解决有数据的时候会闪现暂无数据的问题啦） <!--* Date: 2024-02-26 03:38:52* LastEditTime: 2025-06…...

编程日记 2025/9/2 23:04:07

详解鸿蒙Next仓颉开发语言中的动画

大家上午好，今天来聊一聊仓颉开发语言中的动画开发。仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。显示动画显示…...

编程日记 2025/9/2 19:19:18