vite+vue3实现低版本浏览器兼容的解决方案（白屏问题）
前言 项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。 默认情况vite的兼容目标是支持 原生ES模块 ， 原生ESM动态导入 和 的浏览器，官方预设的兼容目标如下： 1. es2020 2. edge 88 3. firefox 78 4. chrome 87...
Vite 的实现原理，确实很巧妙
vite 是新兴的构建工具，它相比 webpack 最大的特点就是快。 那它是如何做到这么快的呢？ 因为 vite 在开发环境并不做打包。 我们创建个 vite 项目： 安装依赖，然后把服务跑起来： 浏览器访问下： 本地是 main.tsx 引入了 App.tsx，并且还有 react 和 react dom/client 的依赖： 用 devtools 看下： 可以看到，main.tsx、App.tsx 还有 react 和 reac...
vue3+vite 安卓8.0下打开白屏问题记录
问题：vue3+vite 开发移动端应用，上线后现场反馈安卓8.0下进入页面白屏 分析：原因就是因为语法兼容问题。根据vite官方文档描述， 默认支持 Chrome =87、Firefox =78、Safari =14、Edge =88 ，所以需要我们手动兼容低版本。 处理方案： 增加打包兼容代码 vite.config.js下增加 打包运行发现依然白屏。 请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfil...
Zustand不仅使用起来简单，源码更简单
说起 Zustand，很多使用 React 的小伙伴肯定不陌生 它是一个 React 状态管理库，类似于 Redux、Mobx 一起来看下 Zustand 的周下载量，大概在 250w，妥妥的第一梯队 再来看下 Zustand 的 github 标星，截止目前（2024 3 27）已经有 41.6k，妥妥的高赞仓库 如此优秀的 React 状态管理库不得不研究下。 顺便说一下，Zustand 的作者写了三个状态管理库，凭借一己之力，搅混...
研究vite心得
vite作为我们前端开发工具利器，在开发时，作为开发服务器时提供极速的启动体验、调试接口时提供代理服务器功能，开发时提供HMR能力支持修改无感刷新，提供兼容rollup的打包生态，提供方便扩展的插件系统等等，这些是怎么做的呢，本文在学习了文档&源码后与大家探讨一下 vite 以下功能的实现思路： 开发服务器 proxy代理 预构建 hmr 插件系统 1. 浏览器原生支持 ，当碰到 import 一个（非本地）模块时，浏览器会发一个请求（...
Go module 目录为什么带 ! 感叹号？
如下图的模块存储路径： 认真一看，会发现一个神奇的现象。那就是有的文件夹名称是带 ! 感叹号的。但是包本身并没有这样命名。 如下图红框中的感叹号： 这是怎么回事，目录名乱码了吗，还是说是一种加解密的编码？ 在 的官方文档下 Escaped Paths\[1\] 我们能够找到相关的解释。如下图： 这个问题的缘由是因为 Go 模块是从 OS 文件系统读取数据的，模块不能单纯的依靠 OS 文件系统来区分大小写，也不能依靠网络服务器去区分。 也...
最全的docx,pptx,xlsx(excel),pdf文件预览方案总结
最近遇到了文件预览的需求，但一搜索发现，这还不是一个简单的功能。于是又去查询了很多资料，调研了一些方案，也踩了好多坑。最后总结方案如下 1. 花钱解决(使用市面上现有的文件预览服务) 1. 微软 2. google 3. 阿里云 IMM 4. XDOC 5. Office Web 365 6. wps开放平台 2. 前端方案 1. pptx的预览方案 2. pdf的预览方案 3. docx的预览方案 4. xlsx(excel)的预览方...
开源文档预览项目 kkFileView
kkFileView 是一款文件文档在线预览解决方案，采用流行的 Spring Boot 框架构建，易于上手和部署。 该项目基本支持主流办公文档的在线预览，包括但不限于 doc、docx、xls、xlsx、ppt、pptx、pdf、txt、zip、rar，以及图片、视频、音频等格式。 拉取镜像： 运行容器 浏览器访问容器 8012 端口 即可看到项目演示用首页。 上传一个文件之后，点击预览，即可查看该文件预览效果。 项目内需要预览文件时...
Next.js 跨域问题的各种解法
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 前言 跨域是使用 Next.js 常遇到的问题，问题主要分为两类： 1. 如何调用一个跨域接口？ 2. 如何实现一个跨域接口？ 本篇我们会先从跨域的基础知识开始讲起，然后讲解 Next.js 下这两大类问题的各种解决方案，帮你系统解决跨域问题！快收藏、点赞这篇文章留做备忘吧！ PS：系统学习 Next.js，欢迎入手小册 。基础篇、实战篇、源码篇...