惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Microsoft Azure Blog
Microsoft Azure Blog
C
Cisco Blogs
WordPress大学
WordPress大学
H
Hackread – Cybersecurity News, Data Breaches, AI and More
The Cloudflare Blog
小众软件
小众软件
Recent Commits to openclaw:main
Recent Commits to openclaw:main
I
Intezer
Cyberwarzone
Cyberwarzone
T
The Blog of Author Tim Ferriss
博客园 - Franky
F
Fortinet All Blogs
C
Cyber Attacks, Cyber Crime and Cyber Security
G
Google Developers Blog
Recent Announcements
Recent Announcements
I
InfoQ
T
Threat Research - Cisco Blogs
V
V2EX
T
Tenable Blog
H
Help Net Security
Cisco Talos Blog
Cisco Talos Blog
T
Tailwind CSS Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
The GitHub Blog
The GitHub Blog
P
Privacy & Cybersecurity Law Blog
A
Arctic Wolf
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
D
DataBreaches.Net
罗磊的独立博客
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
D
Docker
T
Tor Project blog
Attack and Defense Labs
Attack and Defense Labs
P
Proofpoint News Feed
H
Heimdal Security Blog
Engineering at Meta
Engineering at Meta
雷峰网
雷峰网
Martin Fowler
Martin Fowler
AWS News Blog
AWS News Blog
IT之家
IT之家
Google DeepMind News
Google DeepMind News
NISL@THU
NISL@THU
Google Online Security Blog
Google Online Security Blog
Vercel News
Vercel News
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
SecWiki News
SecWiki News
GbyAI
GbyAI
P
Proofpoint News Feed
月光博客
月光博客
Schneier on Security
Schneier on Security

博客园 - 冯叶青

OpenAI vs Anthropic API 对比:响应体、请求体、消息格式与工具调用 GitHub Actions 自动部署流程 Git分支自动合并脚本:基于时间戳的冲突解决方案 Next.js lingui.js 多语言自动提取翻译键 - ats-node React实现短信验证码输入组件 Next.js 中优雅地使用 Lottie 动画 Next.js 路由参数更新最佳实践:从 replaceState 到 nextReplaceState Jenkins构建时SWR模块导入报错解决方案 解决 Jenkins 环境下 Lingui 构建报错 "btoa is not defined" git 提交 实现大图自动压缩功能 React lingui.js 多语言自动提取翻译键 - ast node html2canvas 解决截图空白问题 react 实现前端发版监测 JS根据文件名获取文件类型 JS获取本机IP地址 适用于react、vue菜单格式化工具函数 JS实现视频截图 next.js 利用中间件(middleware.ts)实现PC与移动路由无缝切换 Android生成签名文件及对apk进行签名 JS-SDK 配置,实现微信分享功能
git 内容提交 实现大图拦截功能
冯叶青 · 2024-07-11 · via 博客园 - 冯叶青

场景

在一个多人开发的项目中经常会有文件提交的需求,但是有时候在提交图片时往往不压缩就提交上去了,

这个时候如果我们要约束其他人不能提交超过500k的图片,可以利用husky.js实现文件拦截

1.安装 Husky:

确保你已经在项目中安装了 Husky。如果还没有安装,可以使用以下命令:

npm install husky --save-dev

2.启用 Git 钩子:

运行以下命令以启用 Husky 钩子:

3.添加 pre-commit 钩子:

使用 Husky 添加 pre-commit 钩子:

npx husky add .husky/pre-commit "npx lint-staged"

4.安装 lint-staged:

为了配合 Husky,安装 lint-staged 来处理文件:

npm install lint-staged --save-dev

5.配置 lint-staged:

package.json 中添加 lint-staged 配置:

{
  "lint-staged": {
    "**/*.{weapp,jpg,png}": "node scripts/checkImageSize.mjs"
  }
}

6.编写检查文件大小的脚本:

在项目中创建一个 scripts 文件夹,并在其中添加 checkImaageSize.mjs 文件,内容如下:

import fs from 'fs'

// 定义文件大小限制(以字节为单位,这里以500KB为例)
const FILE_SIZE_LIMIT = 500 * 1024;

// 获取待提交的文件列表
const files = process.argv.slice(2);

// 用于存储超出大小限制的文件
const oversizedFiles = [];

// 检查每个文件的大小
files.forEach((file) => {
  const stats = fs.statSync(file);
  if (stats.size > FILE_SIZE_LIMIT) {
    oversizedFiles.push({
      file: file,
      size: stats.size
    });
  }
});

// 如果有超出大小限制的文件,输出错误信息并退出
if (oversizedFiles.length > 0) {
  console.log(`🚫 您提交的图片已被拦截\n👉 单个图片最大限制为${FILE_SIZE_LIMIT/1024}KB,请压缩后再提交\n🌍 压缩站点:https://www.iloveimg.com/zh-cn/compress-image`);
  oversizedFiles.forEach(({file, size},index) => {
    console.log(`📁 ${index+1}. ${file} -> ${size / 1024} KB`);
  });
  process.exit(1);
} else {
  console.log('😃所有图片都在可提交限制范围');
}

拦截效果如下