前端工程化

昭福前端语录

一套代码构建B端企业管理系统跨端方案——从原理到落地解决方案大家好，这些年来设计系统一直停留在历史的某个时间点，缺乏创新，缺乏活力，难以有让人眼前一亮的东西展现，但它并没有停滞不前，我们一直致力于从一些独特的角度重新审视和认识设计系统，通过梳理和理解组件的本质，抽象原子化组件，严格执行展示层与交互层的分离方式，使组件能够更好的融合跨端设计，同时深度结合设计语义与前端代码，确保整个系统的交互和代码唯一性，目前我们已有一套基础设施对外开源，欢迎大家的持续关注。今天这篇文章的主题主要是与大家探讨一下我们的跨端设计实现。

Vite5基础进阶与原理Vite 是一种现代化的前端开发构建工具，旨在优化开发体验和构建性能。以下是 Vite 的核心概念及其详细说明，并配有示例代码以便更好地理解其工作原理。

微前端第四篇：qiankun老项目渐进式升级方案（jQuery + React）本方案基于 qiankun 微前端框架，实现 jQuery 老项目向 React 现代化技术栈的渐进式升级。通过单个子应用承载多个业务组件的方式，低成本逐步实现技术栈现代化。

你需要知道的 Node 版本管理工具 fnm——一次彻底的前端工程环境升级大家好，我是water，欢迎关注我的公众号：前端进阶说，希望对你有帮助。在现代前端项目中，你肯定遇到过这样的场景：A 项目需要 Node 14，B 项目要求 Node 18，还要用不同版本的 pnpm（或 yarn、npm）。不断地切换 Node 版本，担心全局包冲突，甚至同事间环境不一致导致“在我电脑能跑你那里却爆炸”。这就是为什么高效、优雅的 Node 版本管理工具会成为刚需。

五点六六六

一些关于TreeShaking的AST的理解最近在做一些关于AICR的一些事情，想到一些从AST层面上入手的方案。刚好同学问我说他们面试总是碰到问webpack怎么配置treeshaking这类问题，想着这里好好回答一下这些相关点吧。

前端老六喔

🎉 开源项目推荐 | 让你的 TypeScript/React 项目瘦身更简单！大家好，我最近开源了一个实用工具库 @laoer536/minipp，专为 TypeScript 和 React+TS 项目而设计，帮助开发者一键识别并清理项目中未被使用的文件和依赖，提升项目健康度与维护效率！

vxe-table 在项目中的实践！【附源码】大家好，我是前端架构师 - 大卫。更多优质内容请关注微信公众号 @程序员大卫。初心为助前端人🚀，进阶路上共星辰✨，

深入解析 Sass 的 `~` 路径问题：为什么你的导入会失败？你以为这是标准语法？真相可能会让你惊讶——Sass 官方编译器从不支持波浪符 ~ 开头的路径解析！这个看似普遍的语法实质是前端工具链的"民间约定" ，其诞生背景值得深究：

使用Plop.js高效生成模板文件开发是个创造型的职业，也是枯燥的职业，因为开发绝大多数都是每天在业务的代码中无法自拨，说到开发工作，就永远都逃不开新建文件的步骤，特别现在组件化开发胜行，每天都是在新建新建组件的道路上一去不返，我们做的最多就是直接拷贝一个旧代码组件，重命下名再删减删减完成新组件的创建

小肚肚肚肚肚哦

JS 沙盒隔离技术盘点与实战本文的教学代码在 github.com/duheng1992/… ，欢迎大家批评指正，如果觉得好，还望给点个星星啦！😊

前端工作日常

我理解的`npm`依赖安装机制配置生效优先级查阅包的官方文档或 install.js 源码：通常会在脚本中找到类似逻辑：当安装如 chromedriver 这类包时，npm 会执行以下步骤：

数据智能老司机

React关键概念——处理事件和状态在前几章中，您学习了如何通过React组件构建用户界面。您还了解了属性（props）——一个使React开发者能够构建和重用可配置组件的概念和功能。

前端状态管理：将关键逻辑拆分到 Store 及处理多 Store 协作在现代前端开发中，随着应用规模的增长，状态管理变得越来越复杂。将关键业务逻辑从视图层拆分到专门的状态管理库中，已成为提高代码可维护性和可测试性的最佳实践。本文将详细探讨如何科学地将逻辑拆分到 store 中，如何处理多个 store 之间的数据同步，以及如何减少数据冗余。

小钰能吃三碗饭

第十一篇：【React 与微前端】大型应用的模块化与微服务化架构各位 React 开发者，当你的项目从小型应用发展为大型企业级系统时，是否遇到过这些挑战：今天，我们将深入探讨微前端架构，这一解决大型前端应用复杂性的革命性方案。从理论到实践，全方位掌握微前端技术！

concurrently 命令详解使用 pnpm add concurrently -w 时，-w 标志表示将 concurrently 安装到 monorepo 根目录，这会将它作为整个项目的依赖，而不仅仅是某个子包的依赖。因此，安装命令应该在项目的根目录执行，这样所有的子包（包括 cardui 层）都可以共享该依赖。

【pnpm、npm】各种命令详解pnpm -F mock-server start 里的 -F 是 --filter 的简写，意思是：只在名为 mock-server 的工作区（package）中执行命令。

写代码不规范，同事两行泪 😭（工程化如何让团队协作更高效）在实际的前端项目中，你是否也遇到过这样让人头疼的情况：一系列问题都源自代码不规范以及缺乏系统的工程化管理，导致团队协作效率低下，开发周期不断延长，你开始发现，团队成员之间的沟通和协作逐渐变成了“甩锅大战”，每次交付后都有人责怪别人做得不好，项目进度也因为这些问题而不断延迟，但是，不用担心！这些问题都能通过工程化手段解决，看完这篇文章之后，你会掌握一套实用、落地、可扩展的前端工程化流程，不仅能让你的代码变得健壮、清晰、可维护，更能大幅提升团队协作效率。从现在开始，一起告别“屎山代码”，让项目稳、团队顺、交付

爱抽烟的大liu

原生开发与H5开发：探索两者的优势及应用场景先列举两者之间的特点在当今的移动应用开发领域，原生开发和基于HTML5（简称H5）的混合开发模式是两种主流的选择。每种方式都有其独特的优点，适用于不同的业务需求和技术场景。本文将深入探讨这两种开发模式的特点，并重点分析使用H5开发业务的具体优势。

如何在大型项目中有效使用TypeScript进行类型定义？嗨，大家好，我是莫循，Typescript是JavaScript的超集，现在已经广泛用于前端开发，那么在项目中如何用好类型定义呢？以下是一些可以提供参考的案例实践。

代码小学僧

如何优雅地重构一个企业官网 Nextjs 前端项目最近接手了公司企业官网的开发项目，采用的是 Next.js 14。由于项目初期时间紧、任务重，前任同事直接在公司海外官网的 Next.js 项目基础上进行修改，因此代码结构和需求并不完全匹配。