前端工程化

Vite 和 Wepack 中如何处理环境变量.env: 所有环境都会加载 .env.local: 所有环境都会加载，但被 git 忽略 .env.[mode]: 只在指定模式下加载（如 .env.development、.env.production） .env.[mode].local: 只在指定模式下加载，且被 git 忽略

熬夜通宵读完 VitePlus 全部源码，我后悔没早点看尤雨溪搞了个大的。我花一整夜把它拆了个底朝天，发现这东西远比你想的恐怖。3 月 13 日深夜，尤雨溪在 X 上发了一条推文，平静地宣布了一件大事：

踩坑记录：Mac M系列芯片下 pnpm dlx 触发的 esbuild 架构不匹配错误在日常开发中，克隆一个前端项目后，我们习惯性地执行 pnpm install 和 pnpm dev。但最近在搭载 Apple Silicon (M系列芯片) 的 Mac 上，项目启动时却抛出了一个极其刺眼的致命错误，甚至重新 git clone 项目也无法解决。

《前端工程化：从零重构》课程第一章：混乱的起源 —— 当项目失去秩序副标题：从手动管理 <script> 标签到理解模块化的必要性完成本课后，你将能够：我们将创建一个简单的 Todo List，但故意采用最原始、最手工的方式来组织代码。

徒手开荒-我用纯Nodejs+pnpm+monorepo改造了一个多vue2的iframe"微前端"项目LabLIMS是一个实验室信息管理系统，前端架构采用了一种"类微前端"的设计模式——通过iframe将多个独立的Vue2子项目组织在一起。这种架构在项目初期确实带来了模块解耦的好处，但随着项目规模的扩大，问题也日益凸显。

我花了三天用AI写了个上一代前端构建工具前端工程化实践：从复制粘贴到一键生成，xcli 解决了什么问题，又是如何设计的。耗时：约 2 小时耗时：约 3 分钟

猩球中的木子

怎么集成安装VitePlus(Vite+)并使用今天看到了尤大大开源了Vite+,而且是MiT开源，在此膜拜大佬并且学习Vite+，希望网上调侃的前端秦始皇构建工具的愿景成真，哈哈。

从 Grunt 到 Vite：前端构建工具十几年的演化如果你是做前端开发的，大概率接触过这些名字：很多人会有一个疑问：为什么前端工具一直在换？这些工具到底解决了什么问题？

CSS 这些年都经历了什么？一次看懂 CSS 的演化史很多前端在学习 CSS 时都会有一个疑问：为什么 CSS 会有这么多东西？ css2、css3、less、scss、css-in-js、原子 css …… 看起来像是不断在“发明新轮子”。

独泪了无痕

Vue调试神器：Vue DevTools使用指南在现代前端开发中，Vue.js 应用的组件化架构虽然提升了代码复用性，但也带来了复杂的状态管理和组件交互问题。当应用包含数十个嵌套组件时，传统的 console.log 调试方式如同在黑暗中摸索。Vue.js Devtools 作为官方调试工具，通过可视化界面将组件结构、状态变化和性能数据直观呈现，让开发者能够像"透视"一样观察应用内部运行机制。

编译期魔法：自定义 Webpack Loader 将函数调用结果"内联"为静态字符串我们的产品同时部署在国内和海外平台，配套的产品文档也分散在不同的域名下。应用中存在大量指向这些文档的链接，而同一篇文档在不同平台的 URL 不同，仅 hash 锚点保持一致。

Git LFS 扫盲教程 - 你不会还在用 Git 管理大文件吧？Git LFS (Large File Storage) 是官方开源的一个 Git 扩展，用于高效管理大型二进制文件，比如：

nginx 快速入门教程 - 写给前端的你经常做 To G 项目的朋友都知道，项目通常是在内网环境进行开发和调试。甚至会通过好几层跳板机进行访问，所以就无法进行 CI/CD 自动化部署。莫得办法，只能手动打包复制文件进行部署。自然而然就得学点 nginx 技能傍身

我的 Monorepo 实践经验：从基础概念到最佳实践本文将系统地整理我在 Monorepo 和前端工程化方面的一些实践经验，先简单介绍几个概念。Monorepo（单一代码仓库）：Monorepo 是将多个应用和共享库放在同一个仓库中进行管理。与多仓库模式相比，Monorepo 更加高效，尤其在代码共享、依赖升级和跨项目协作方面。

一个简单适配个人电脑的node 版本切换 skill以下是一个个人电脑的 node 版本切换 skill，当一些项目在运行的时候遇到了版本问题，让 AI agent 能够知道我的切换命令，避免 node 版本问题而重复对话浪费 token

货拉拉技术

如何用 AI 做业务级 Code Review对于核心的业务项目来说，Code Review (代码评审) 是必不可少的。但现实中的代码评审时常常被以下几件事所困扰：

手把手系列之—— 自定义 Loader 和 Plugin用 Webpack 打包时，我们早就习惯了各种现成的 Loader 和 Plugin，比如babel-loader 转 ES6，ts-loader 处理 TypeScript，HtmlWebpackPlugin 生成 HTML……那为啥还要自己写呢？

AI 写代码总是半途而废？试试这个免费的工作流工具作为一个用过多种 IDE 的开发者，我想分享一个让我效率 up up 的小工具。这些问题都有一个共同原因：上下文衰减（Context Rot）。

“啪啪啪”三下键盘，极速拉起你的 uni-app 项目！说实话，我也不想造轮子。但试了一圈之后，我发现了一个让我忍不了的问题：选了不要某个功能，生成的代码里居然还有它的 import 和空壳文件。与其花半小时手动删代码，不如用 hy-uni —— 三下键盘，1 秒钟搞定！

Vitest Environment UniApp：让 uni-app E2E 测试变得前所未有的简单FliPPeDround前端工程师 · 开源爱好者 · 正在找工作如果你曾尝试为 uni-app 项目编写 E2E 测试，你大概率会遇到这样的困境：官方提供的 Jest 环境配置复杂、文档更新滞后、与现代测试工具链集成困难。更糟糕的是，当你想要使用 Vitest 这种更现代、更快速的测试框架时，却发现没有合适的 uni-app 环境支持。