前端架构: 脚手架之多package项目管理和架构

Monorepo 是什么?前端项目的多模块管理终极方案 包管理工具是用来管理项目依赖,发布包,安装依赖的工具,它们都提供了对工作区(workspace)的支持,允许在单个代码库中管理多个项目或包,这种工作区支持在单个代码库中同时开发,测试和管理读个相关的项目,而无需使用多个独立的代码仓库Monorepo将多个子项目统一到一个仓库,实现依赖一致,模块共享,构建加速工具选型: pnpm+Work 轻量高效;Turborepo构建优化;Lerna/Changesets自动发布实践要点:明确模块边界,配置增量构建,自动化CI/CD,合理版本策略。 阅读详情

多package项目管理


1 )多package项目管理概述

  • 通常来说,当一个项目变大了以后,我们就要对这个项目进行拆分
  • 在前端当中,对于项目进行拆分的方式,通常把它称之为javascript包管理
  • 需要使用一个工具叫做 npm (Node Package Management)
  • 它是使用nodeJS来对包进行一个管理,用了这个包管理以后,项目就可以以大化小
  • 把一个复杂的项目拆分成若干个小的项目,如何把一个大的项目进行一个拆分
  • 这里就用到 workspaces 和 lerna 这两个特性
  • 其实 lerna 是更早出现的一个特性, 而 workspace 是 npm 7 以后默认出现一个特性
  • lerna 和 workspace 都是解决复杂项目管理的, 即:多 package 管理
  • 了解如何利用 lerna 和 worspace 的这个特性去完成项目的创建,依赖的安装,本地调试,还有项目发布
  • 之前也谈到过,Lerna 采用 Yargs 作为脚手架框架

2 )脚手架架构

  • 这是一般脚手架的整体架构
  • 最下面一层是标准层,也就是说我们整个今天前端能发展成这样
  • 它是由一些若干条标准而生成的,其中最重要的标准就是ECMA和Module模块化
  • ECMA 它的一个核心产出,其实就是javascript这个开发语言
  • 而模块化,它的核心产出,目前还在用的就是CommonJS和ES Module这样2个模块化的标准
  • 基于ECMA和module模块化, 产生了 nodejs 框架, Nodejs框架其实核心包含三个部分
    • 第一个是 V8引擎,它的用途是用来去做javascript开发语言的一个编译和运行,包括输出最终的一个运行结果
    • 第二个是 internal module 主要指向 nodejs 很多的内置库,包括fs文件处理库, path 路径库等等
    • 第三个是 一个node的可执行文件
    • 由这样的几个部分组成,这个就是Node.js
    • 而 Nodejs 之上, 就会生成一个包括管理工具叫 npm
  • 我们每个前端项目今天都在去使用 npm, 而 npm 在7版本之后,默认就会附带一个特性叫做 workspace
  • 这个 workspace 就是用来做多package 复杂项目管理用的
  • 少于7版本的时候,想做复杂项目管理的时候,就要用lerner
  • Lerna它是基于 nodejs的 npm 之上生成的一个自己开发的一个包管理工具
  • 这个工具最主要的用途就是做很多个小模块之间拼成一个大的项目,做这个大的项目管理就是 Lerna
  • 在 npm 7版本之前,我们就会使用 Lerna 去做包管理
  • 今天的 Lerna 最新版本已经到 8.1.2, 同时,它已经基于npm的 workspace 特性去进行了重构和改造
  • 所以今天依然可以用Lerna来做包管理,它可以帮我们去省略到很多操作的步骤
  • 除此之外,像 npm 上面还有一些常用的工具,像webpack这些, Lerna 和 webpack 是属于同一层的这个工具
  • 而我们自己的脚手架是基于这些库之上,也就是说我们自己的脚手架会基于Lerna 去进行一个构建
  • 构建的时候它核心是会分为6个
  • 第一个包是 cli-core 包含脚手架中核心的一个内核,基于这个内核去开展我们具体的业务
  • 也就是说上面5个业务只是其中五个功能
  • 如果未来我们要开发更多的脚手架的时候,只要再往里面横向的去进行扩充就可以了
  • 这就是基于 Lerna 它架构的一个好处,它的横向扩展性很强
  • 脚手架的内核不变更的情况下,可以非常轻易的去添加出新的功能
  • 否则, 我们每一个脚手架都要重新开发一套全新的代码,然后去做发布,去做部署和运行, 整个过程是比较复杂的
AI赋能全栈项目管理:从需求到部署的实战工具链与范式转移 在软件工程领域,项目管理是确保产品成功交付的核心环节,其本质是对需求、资源、进度和质量进行系统性协调与控制。传统项目管理工具主要侧重于流程固化和事后记录,在应对快速变化的需求和复杂协作时,往往面临信息衰减、反馈滞后等瓶颈。随着人工智能技术的发展,AI正通过自然语言处理、代码生成与智能分析等能力,重塑项目管理的范式,其技术价值在于将重复性、规则性的信息处理工作自动化,并辅助人类进行更复杂的决策与设计。这催生了从“流程管理”到“智能协同”的转变,AI能够渗透到需求分析、任务拆解、编码、测试及部署等全生命周期场景 阅读详情

相关推荐

Vue CLI脚手架深度解析与工程实践指南

前端工程化是现代Web开发的核心环节,其中脚手架工具作为项目初始化的标准解决方案,显著提升了开发效率。Vue CLI作为Vue.js官方推荐的标准化工具链,通过插件系统和约定配置实现了工程化最佳实践。其核心原理基于Webpack构建系统,通过可插拔架构提供灵活的扩展能力。在技术价值层面,Vue CLI实现了开发环境即时反馈、生产环境自动优化、以及统一的团队协作规范。典型应用场景包括企业级中后台系统、内容管理平台等需要长期维护的项目。随着Vite等新型构建工具的兴起,理解Vue CLI的架构演进(从模板化到插

weixin_34314962的博客 401

用Lerna管理多包js项目

背景:我们在开发前端项目时都是单个包的,也就是只有一个package.json文件以及一个node_modules文件夹。单个包项目的优点不言而喻,简单,可靠,便于管理。但是,当如果是多个项目用到了大量且重复的api. 比如: 拦截器, mixins, 公共工具类, 公共组件等管理起来就是一件比较麻烦的事情,为了方便代码的共享,就需要将代码库拆分成独立的包. 解决: 使用lerna去优化和管理JS多包项目 步骤: 1. 全局安装lerna npm i -g lerna 或 ...

qq_43340606的博客 2356

利用AI助手高效规划Monorepo大型功能:从架构设计到代码生成

在微服务架构和前端工程化实践中,单体仓库(Monorepo)模式因其统一的依赖管理和代码共享能力,成为管理复杂项目的主流选择。然而,随着模块数量增长,开发者面临认知过载和变更影响评估困难等工程挑战。AI编程助手通过深度代码理解与语义分析,能够将通用技术概念转化为具体的工程实践,在Monorepo环境下实现从需求分析到任务拆解的全流程辅助。其技术价值体现在降低架构一致性维护成本、提升跨模块协作效率,并能基于现有代码模式生成符合规范的脚手架代码。应用场景涵盖微服务系统扩展、共享库升级、全栈功能开发等需要协调多模

weixin_33720078的博客 303

十三、前端包管理工具详解

我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构:在以后的开发中我们就可以通过模块化的方式来封装自己的代码,并且封装成一个工具;这个工具我们可以让同事通过导入的方式来使用,甚至你可以分享给世界各地的程序员来使用;那如果我们分享给世界上所有的程序员使用,有哪些方式呢?

Sean_0819的博客 1255

前端领域使用pnpm进行多项目管理

在前端工程化高速发展的今天,一个团队同时维护多个关联项目(如组件库、工具链、业务应用)已成为常态。传统npm/yarn在多项目管理中面临依赖重复安装导致的磁盘空间浪费版本冲突引发的环境不一致跨项目协作时的依赖同步困难等问题。本文将聚焦pnpm这一「新一代包管理器」,讲解其在多项目管理(尤其是monorepo场景)中的核心优势与实践方法。用奶茶店案例类比多项目管理痛点拆解pnpm的核心技术(内容寻址存储、workspace)手把手演示pnpm多项目管理的完整流程总结实际应用中的最佳实践与未来趋势。

AI架构全栈开发实战笔记 1317

03-脚手架框架搭建(一)(前端架构师入门笔记)

03-脚手架框架搭建(一)(前端架构师入门笔记)

前端-张冠的博客 656

前端开发者需要知道的 package.json

在一个 JavaScript 项目中,package.json 是一个必须的文件,它的作用是管理项目中使用到的外部依赖包,同时它也是 NPM 命令的入口文件。 package.json包含描述一个特定程序包唯一的设置所需的所有内容。 如果项目使用工作空间功能,则项目将包含多个package.json文件,因为每个工作空间都是通过其自己的package.json来描述的。 请注意,可以通过initFields字段设置来设置这些字段的默认值。 ????name package.json 中最重要的属性是 n

做一个NB的码农,且不止于码农 2365

Altera Quartus II FPGA固件烧录全攻略:从SOF到JIC的完整流程(附EPCQ128配置技巧)

本文详细介绍了使用Altera Quartus II工具链将FPGA固件从SOF文件转换为JIC文件并烧录到EPCQ128 Flash芯片的完整流程。内容涵盖环境配置、文件转换步骤、EPCQ128专用配置技巧以及常见问题解决方案,帮助工程师实现FPGA固件的flash固化,确保设计可靠运行。

weixin_30275415的博客 206

前端架构师-week2-脚手架架构设计和框架搭建

前端架构师-week2-脚手架架构设计和框架搭建

chengbo_eva的博客 1296

使用Eggjs做服务端获取微信小程序云开发数据库的access_token

最近自己想写了一个微信小程序,恰巧里面有个云开发,恰巧里面有个数据库,那懒人的我,就直接用云开发里面的数据库了,做测试或者正式也好,对于刚开始来说,免费的配额是够用的。 后来想到在小程序云开发上面的数据怎么看才方便?刚好微信小程序有一个服务端API,那就方便很多了,那就直接敲个服务端来获取云开发上数据库的数据出来到自己的后台上面,那以后管理起来也方便很多。 看了一下服务端api之后,发现有三个重要...

kalenE992的博客 1705

VECTOR硬件VN1600系列对比:VN1610、VN1611、VN1630A、VN1640A、VN1630log、VN1670

VN16系列说不清道不明的区别和关系

AmorRun的博客 2万+

Vue-cli 脚手架

传统组件的问题和解决方案 1.问题 全局定义的组件必须保证组件的名称不重复 字符串模版缺乏语法高亮,在HTML 有多行的时候, 需要用到丑陋的\ 不支持CSS意味着当HTML 和 JavaScript组件化时, CSS明显被遗漏 没有构建步骤限制,只能使用HTML和ES5 JavaScript, 而不能使用预处理器(如:babel) 2.解决方案 针对传统组件的问题, Vue提供了一个解决方案 => 使用Vue单文件组件 单文件组件的基本用法 单文件组件的组成结构 template.

pauline_的博客 305

vue3:实现ECharts3D地图详细示例,echarts实现3D地图map3D,vue3如何利用echarts绘制3d地图立体城市省市地区分布,可视化数据大屏3D炫酷中国地图(复制源码,开箱即用)

echarts实现中国地图记录篇之3D地图,Echarts地图之——如何让地图显示出3d感,【3d地图】vue中使用echarts geo3D,echarts实现某个市3D地图展示,vue3中使用echarts实现中国地图,3D地图图表,echarts实现3D地图——map3D,数据大屏3d地图,vue3+echarts绘制中国地图,3D地图,省、市、县,【3d地图】vue3中使用echarts geo3D,echarts实现某个市3D地图展示,ECharts3D地图(详细示例——附有具体注释),echar

✅ 精选推荐文章 3673

前端环境安装【mac/window,nvm/node,npm/yarn,react/vue/ts,git,ai IDE(vs,沙箱/测试,package与package-lock/yarn.lock】

nvm 主要是用来管理和 npm 版本的工具,可以用来切换不同版本的 nodejs。安装nvm之前先卸载node。

luemeon的博客 1812

024、反激变换器的短路保护设计

本文详细探讨了反激变换器短路保护的设计要点与实践经验。作者通过实际案例分析了短路时反激拓扑的电流特性,指出初级峰值电流限制是最基础的保护手段,但需配合打嗝模式使用。文章重点剖析了打嗝模式设计的三个关键陷阱:频率设定、退出条件和软启动衔接。同时强调次级侧辅助保护、变压器参数优化、环路响应协调的重要性,并比较了自恢复与锁死方案的适用场景。最后提出实测验证的四个关键点和设计经验:不盲信芯片手册、保护电路独立设计、充分留有余量、进行破坏性测试。全文以工程实践为导向,为反激电源的可靠短路保护提供了系统性解决方案。

Jack010169的博客 244

飞腾UEFI配置GPIO—飞腾FT2000/4 (D2000/8) GPIO引脚配置及使用

讲解了在飞腾UEFI代码中如何添加GPIO配置相关代码,并以GPIO1_B0—B7为例,将这8个引脚配置为GPIO工作模式并默认输出低电平

qq_30135687的博客 5350

从脚手架到工程化基石:skill-creator 生产级定制与架构实践

在现代前端开发中,项目脚手架是提升团队协作效率和保障代码质量的关键基础设施。其核心原理在于通过预设配置和模板引擎,将最佳实践固化为可复用的工程方案,实现“约定优于配置”。这一技术价值在于,它能将架构决策产品化,统一技术栈、规范开发流程,从而显著降低项目启动成本与维护负担。典型的应用场景包括快速初始化符合团队规范的中后台系统、移动端H5应用以及Node.js BFF服务。本文聚焦于 skill-creator 这一工具,深入探讨如何超越基础使用,通过深度定制预设、集成 Monorepo 策略以及优化构建配置,

weixin_30588675的博客 1923

美团mtgsig 1.2算法分析

mtgsig1.2的一些算法总结

记录一些web逆向的过程 3506

构建个人项目脚手架:告别一次性脚本,打造可持续开发工作流

在软件开发与数据科学领域,项目初始化和代码复用是提升工程效率的关键环节。其核心原理在于通过标准化模板与自动化工具,将零散、临时的编码活动转化为结构化、可复用的知识资产。这种实践的技术价值在于固化最佳实践,确保项目从创建之初就遵循一致的规范与配置,从而显著降低技术债务的隐形积累。在应用场景上,无论是快速启动一个Node.js后端服务、React前端应用,还是Python数据分析脚本,一个轻量、可定制的项目脚手架都能帮助开发者实现“起手即规范”。本文聚焦于如何利用**元脚手架工具**和**模板驱动开发**,构建

weixin_33695450的博客 357

电路布局中近场耦合问题

开关电源EMC设计中,传导骚扰超标往往源于空间耦合而非参数问题。某案例中,DC-DC模块的非屏蔽电感磁场泄漏耦合到邻近X电容,导致0.5MHz频点超标。通过将X电容移至PCB底层、优化布局保持15mm间距后,问题完全解决。实践证明:EMC设计需注重空间隔离,优先采用屏蔽电感,滤波元件应远离高频磁场区,布局优化比参数调整更有效。这提示工程师需将电磁兼容视为空间问题而不仅是电气问题。

硬核科技 375

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

从零构建 Web 应用:以 Refine 为例的 10 步开发流程实战指南

构建软件从来不是一条直线,而是一个迭代、循环、持续演进的过程。本文以 Refine 开源仓库中的实战文档《How to Build a Web App in 10 steps in 2024》为核心骨架,系统梳理从项目规划、市场调研、设计、开发环境搭建、前后端开发、测试、安全优化到部署与反馈收集的完整开发流程,并结合 Refine 仓库内的 CLI 脚手架源码、官方示例(如 [base-antd

gitblog_00717的博客 910

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

2026 大前端【系列实用教程】

前端必备

朝阳39的博客 1567

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Ranim快速上手:从零配置环境到渲染第一个数学动画只需10分钟

**Ranim** 是一个用纯 Rust 编写的数学动画引擎,设计灵感来自 Manim,底层基于 wgpu 做 GPU 渲染。本文带你从零配置 Ranim 运行环境,到跑通示例、渲染出第一个数学动画视频,全程只需 10 分钟左右。 ## 为什么选择 Ranim 🚀 和 Python 生态的 Manim 类似,Ranim 让你用代码描述动画时间线:文字写入、图形渐显、形状插值变形……最终导出

gitblog_00302的博客 477

超级模块6.1内测版深度解析:安全、高效的模块化开发脚手架实践

在现代前端工程化领域,模块化开发和构建工具链是提升团队协作效率与代码质量的核心技术。其原理在于通过可插拔的架构设计,将项目初始化、依赖管理、代码规范等环节封装为独立模块,实现技术栈与业务逻辑的解耦。这种模式的技术价值在于保障了项目的长期可维护性,降低了技术升级成本,并统一了团队开发规范。其应用场景广泛覆盖了从快速原型开发到大型企业级应用的构建流程。本文聚焦的超级模块6.1内测版,正是这一理念的集大成者,它通过官方背书的**安全可信**机制和深度集成的**工程化规范**,为开发者提供了一套开箱即用、安全高效的

weixin_33709364的博客 372

前端包管理器与镜像源配置:pnpm、yarn 核心使用与优化指南

在现代前端开发中,包管理器是构建项目依赖生态的核心工具,它负责自动化地下载、安装和管理项目所需的第三方库。其工作原理基于版本解析和依赖树锁定,通过读取 package.json 文件,从远程仓库获取指定版本的代码包。这项技术的核心价值在于提升开发效率、确保环境一致性,并优化磁盘与网络资源的使用。在实际应用场景中,无论是构建单页应用、Node.js 服务端项目,还是管理复杂的 Monorepo,高效的包管理都至关重要。然而,由于网络环境差异,直接连接官方源常导致安装缓慢或失败,因此配置国内镜像源成为关键实践。

weixin_34335458的博客 456

前端工程化:基于Claude Code的AI编码流水线设计与实践

在软件工程领域,前端工程化旨在通过标准化、自动化的工具和流程,提升代码质量、团队协作效率和项目可维护性。其核心原理是将开发过程中的重复性工作抽象为可复用的流水线,涵盖代码规范、构建部署、性能优化等环节。随着AI编码助手的兴起,如何将其能力工程化集成,成为新的技术挑战。通过构建标准化的AI编码流水线,可以实现从自然语言需求到高质量代码的自动化转换,这不仅能显著提升开发效率,降低人为错误,还能确保代码风格统一,便于团队协作。该方案尤其适用于需要快速生成业务模块、工具函数或进行代码重构的场景,例如管理后台页面、通

weixin_30439067的博客 400
上一篇: 前端架构: 脚手架工具rxjs的快速上手应用
下一篇: 前端架构: 脚手架之包管理工具的案例对比及workspaces特性的使用与发布过程
Wang's Blog
博客等级 码龄12年 7434粉丝 2421原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值