前端工程化

【Webpack】前端工程化之Webpack与模块化开发车同轨，书同文，行同伦。 ——《礼记·中庸》Webpack是一个JavaScript应用的静态模块化打包工具，它最早的出发点就是去实践前端方向的模块化开发，解决如何在前端项目中更高效地管理和维护项目中的每一个资源问题。在Webpack的理念中，前端项目中的任何资源都可以作为一个模块，任何模块都可以经过Loader机制的处理，最终再被打包到一起。

深入了解Vite：依赖预构建原理前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分（我们自己写的代码），vite会将项目中的所有模块分为依赖与源码两部分。

【学习心得】工程化篇 Webpack和Vite对比分析这几天阅读了大量的关于Webpack和Vite的文章，我发现有一些文章还是很不错，讲的非常仔细。下面给大家重点推荐4篇博客：

哔哩哔哩技术

工程化视角的 Kotlin Multiplatform核心解读及优化本篇为KMP技术的技术及实践系列文章的第二篇。在这篇技术文章中我们会以百人移动研发团队的工程化视角，探讨Kotlin Multiplatform的核心技术及优化。

Vite本地构建：手写核心原理接上篇文章，我们了解到vite的本地构建原理主要是：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。

莫西干式秃头

3 年前端所需要了解的工程化体系（一）在谈前端工程这个概念之前，我们先回顾一下2000年以后前端技术的演进，主要分四个阶段：前端工程化这个词，是国内前端圈子2018年前后才出现的，大概的意思是将（后端已经比较成熟的）许多软件工程概念、实践、工具引入前端开发，提升开发效率。

Webpack 优化打包体积优化，增加缓存命中率，splitChunks 拆分代码，打包速度优化，打包清除无用的代码……web 项目打完包之后，需要发布到服务器上供用户使用，受带宽的限制，项目体积需要越小越好。

Submodule 主子仓协作开发指南在主子仓协作开发的过程中，时常遇到以下问题：作为开发者，修改了子仓，却不知如何让主仓记住当前子仓的版本，以便更新能被其他协作者访问。

41K star! 多智能体 MetaGPT 2 分钟上线需求，极致工程化！在我们传统的软件开发团队中，一个草台班子通常会有产品经理、设计师、软件开发工程师、测试工程师，商业分析运营师等等。这些角色各司其职，共同合作，完成一个软件产品的开发和上线运营。

前端加油站

前端小白必须掌握的调试 Tooltip 的思路大家在使用 Tooltip 组件的时候，都会遇到下面的情况当鼠标 hover 上按钮，Tooltip 显示，如果此时需要调试 Tooltip 里的内容，因为鼠标移出导致 Tooltip 消失。

前端工程化实践细节上周发了一篇文章 2023年的前端工程化治理之路 - 掘金 (juejin.cn)，限于时间和篇幅，写的比较简略。因此，新写一篇，进行完善和细节的补充。

ObjectX前端实验室

【组件实现篇】定高、不定高、动态高度虚拟列表实现点赞 + 收藏 === 学会🤣🤣🤣【实战】前端工程化，技术栈react + ts + storybook 这个专栏我们已经完整的搭建完成了一个组件库项目，配置了自动化部署组件库文档，自动发包等流程，接下来的几篇我们将会实现常见的组件，包括但不限于瀑布流、虚拟列表、拖拽排序、穿梭框、弹窗、下拉选择、通用右键菜单、轮播图等常见组件入手。本篇我们研究一下react中几种虚拟列表的实现，定高、不定高、动态高度虚拟列表

快乐就是哈哈哈

InqureJS：手搓脚手架必备！让你的命令行交互花里胡哨！如果想自己做一个脚手架或者在某些时候在 CMD 窗口进行交互，这个时候就可以使用 inquirer.js。

大家的林语冰

开源的奇迹：Vite 为何短短几年内变成这样？给前端以福利，给编程以复利。大家好，我是大家的林语冰。在 Web 开发领域，Vite 如今已如雷贯耳。

大家的林语冰

CSS 世风日下：为什么我们不再探讨 CSS 压缩了捏？给前端以福利，给编程以复利。大家好，我是大家的林语冰。地球人都知道，CSS minify（压缩/简化）有助于提高网站性能。但如今我们好像对 CSS minify 绝口不提。这一切的背后究竟是道德的沦丧，还是人性的扭曲？

ObjectX前端实验室

【前端工程化】自动化篇-手写脚本一键自动tag、发包、引导登录npm点赞 + 收藏 === 学会🤣🤣🤣上一篇前端怎么可以不会GitHub Action一键部署？我们学习了如何利用GitHub Action自动发布我们的组件库文档、使用Github Action做一些实操。本篇我们将手写一个脚本实现一键更新npm版本、Git缓存更改、自动标记tag、自动发布到npm。

象牙塔塔防队长

whistle踩坑记录 —— 使用代理进行本地调试可参考这篇推文配置whistle www.jianshu.com/p/23d0c9fb7…如果你按照教程安装，但还是不能正常使用，可以看看是不是以下问题。

前端加油站

Axios 使用指南Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios 有诸多优点。在详细用法部分，我将结合例子分别讲解

前端加油站

执行上下文与 this 指向执行上下文又称为执行环境，每当 JS 引擎解析可执行代码时，就会进入一个执行环境。本篇博客将在浏览器环境下讲述执行上下文。在浏览器环境中，执行上下文分为三种:

「译」面向 JavaScript 开发人员的 TSConfig 简介原文：An intro to TSConfig for JavaScript Developers原标题：An intro to TSConfig for JavaScript Developers