前端工程化

10分钟完成代码检查和自动版本管理本文档介绍我们团队采用的代码质量管理工具（Husky、ESLint、Prettier、commitlint、lint-staged）和版本自动化工具（semantic-release）的原理、配置和使用方法。通过这些工具，我们旨在提升代码一致性、规范提交信息，并自动化版本管理。

前端工程化：组件设计原则和通信方式面试导航是一个专注于前、后端技术学习和面试准备的免费学习平台，提供系统化的技术栈学习，深入讲解每个知识点的核心原理，帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经，帮助你快速掌握面试技巧，提升求职竞争力。如果你想加入我们的交流群，欢迎通过微信联系：yunmz777。

命令行工具揭秘当我们运行 npx @vue/cli create my-project 创建一个项目时，就是通过 npx 执行了@vue/cli包中的可执行文件。“可执行文件”就是我们通常说的脚本，许多 npm 包的可执行文件是用 JavaScript 编写的，例如： xx.ts、xx.mts、xx.js 等等，使用 Node.js 环境来运行。在 package.json 文件中，npm 包的开发者可以通过 bin 字段来指定可执行文件的路径，命令作为key，可执行文件路径作为value。例如 @vue/cli 可执

前端工程化：Github Action 实现 CI/CD面试导航是一个专注于前、后端技术学习和面试准备的免费学习平台，提供系统化的技术栈学习，深入讲解每个知识点的核心原理，帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经，帮助你快速掌握面试技巧，提升求职竞争力。如果你想加入我们的交流群，欢迎通过微信联系：yunmz777。

这人是玩数学的

搭建组件知识库，优化 AI 生成代码的效果在上文《在 Cursor 中搭建 MCP 服务，利用 AI 将 Figma 转成代码》中介绍了 Figma 如何转成代码，但在实际应用中会有一点小问题

Jenkins搭配Github实现自动化打包部署上一篇文章 ”前端组长如何利用Docker+Nginx+Jenkins实现项目部署“ 中已经把除了Github触发Jenkins自动化任务以外的功能都走通了，今天就把剩下的这部分打通，实现代码push时自动化触发部署任务。

卡列尼娜翠花

vscode 导入语句排序和删除未使用的导入vscode 默认支持导入语句排序和删除未使用的导入。对应的配置是：source.organizeImports

一键打通api、TS、mock团队内推行TS的一大阻力是api接口的类型定义，十来个有效字段倒还好说，但如果是几十个有效字段呢？传统手艺是等接口通了，根据接口返回的数据按自己所需字段一个一个定义

老帅 Webpack 和新将 Vite 的 PKVite 和 Webpack 都是前端开发中常用的构建工具，它们在多个方面存在差异，下面为你详细对比：

《手把手教你》系列基础篇（九十七）-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类（详解教程）这是在博客园发布这一系列教程的最后一篇，总共100多篇，后续文章请移步：北京宏哥的公众号进行阅读和学习，谢谢~

当时只道寻常

解决 Github port 443 : Timed outFailed to connect to github.com port 443 : Timed out

不懂脚手架怎么开发？手把手带你读create-vite源码！create-vite的源码并不难，推荐从github把源码clone下来，根据本文的顺序对照着阅读。

《手把手教你》系列基础篇（九十二）-java+ selenium自动化测试-框架设计基础-POM设计模式简介（详解教程）页面对象模型（Page Object Model）在Selenium Webdriver自动化测试中使用非常流行和受欢迎，作为自动化测试工程师应该至少听说过POM这个概念。本篇介绍POM的简介，接下来宏哥一步一步告诉你如何在你Java+Selenium3自动化测试框架中实现POM。

当时只道寻常

NVM - Windows 安装与使用指南github.com/coreybutler…下载到本地后解压，然后一直下一步即可安装到默认路径，请勿自作聪明乱选 other 盘符安装完成后，打开 cmd 终端，输入 nvm version，出现版本即表示安装成功

当时只道寻常

Vite 如何优化项目的图片体积在前端工程化中，图片优化是提升项目性能的重要环节之一，也是提升性能的关键步骤。vite-plugin-imagemin 提供了丰富的配置选项，支持 GIF、PNG、JPG、SVG 等格式的压缩。本文将详细介绍该插件的完整配置及各参数的作用。告诉大家如何在 Vite 中使用 vite-plugin-imagemin 对图片进行高效压缩，减少加载时间，提高用户体验。

UmiJS PC 项目三：一场由 TypeScript 类型引发的"血案"那天早上刚到公司，就收到报警群炸锅的消息——核心业务页面突然白屏！作为经历过多次线上事故的老兵，我下意识打开监控平台：好家伙，JS 异常量曲线直接垂直起飞，活像比特币暴涨图

前端包管理器的发展以及Npm、Yarn和Pnpm对比在现代前端开发中，包管理器是不可或缺的核心工具。随着 JavaScript 生态的快速发展，开发者经历了从 npm 一统天下到 Yarn 挑战格局，再到 pnpm 创新突破的技术演进。这里将对三种主流包管理器（npm/Yarn/pnpm）进行全方位对比，分析其设计原理、性能表现和适用场景。

Webpack相关优化总结在使用webpack时提供了各种配置，这里结合在业务中常用的配置汇总一下可以进行的一系列的webpack优化

如何在项目中合理配置Webpack项目中配置 webpack 有三个目的，打包速度，打包体积，运行流畅度，速度指的是run build的时间，体积是指dist 的大小，流畅指的是打开页面是否不卡顿

使用pnpm搭建你的monorepo三步走24年差不多一整年都在跟pnpm的多包打交道，在公司的两款ai产品中都使用的是pnpm来搭建，其中第三版重构的小程序ai技能也是踩了不少坑（有机会的话后面会写篇文章来探讨下为适应公司ai产品发展方向所设计的前端架构），现在在做的前端工程化从pnpm8升级到pnpm9又是踩了不少坑