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

多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 它架构的一个好处,它的横向扩展性很强
  • 脚手架的内核不变更的情况下,可以非常轻易的去添加出新的功能
  • 否则, 我们每一个脚手架都要重新开发一套全新的代码,然后去做发布,去做部署和运行, 整个过程是比较复杂的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/415959.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV实现目标追踪

目录 准备工作 语言: 软件包: 效果演示 代码解读 (1)导入OpenCV库 (2)使用 cv2.VideoCapture 打开指定路径的视频文件 (3)使用 vid.read() 读取视频的第一帧,ret…

clickhouse 随心所欲的聚合模型-AggregatingMergeTree

clickhouse 强大的 MergeTree 系列引擎令人信服,其 ReplacingMergeTree、SummingMergeTree 在数据唯一性和汇总场景中表现非凡。但你是否还有保留最小(大)、平均等预聚合需求,甚至在一个模型中既有唯一性语意也有汇总、最小、最大、平均值语意该如何处理…

JVM——JVM与Java体系结构

文章目录 1、Java及JVM简介1.1、Java是跨平台的语言1.2、JVM是跨语言的平台 2、Java发展里程碑3、Open JDK和Oracle JDK4、虚拟机与JVM4.1、虚拟机4.2、JVM 5、JVM整体结构6、Java代码执行流程7、JVM的架构模型7.1、基于栈式架构的特点7.2、基于寄存器架构的特点 8、JVM的生命周…

Freesia项目介绍

项目介绍 这是一个Spring Boot Vue的前后端分离项目,实现的是一个通用的后台管理系统。 框架使用 前端使用了layui-vue和layui-vue-admin,分别提供了组件和前端整体架构的支持。 后端使用Spring Boot框架管理 项目技术使用 前端 Layui-vue、Layui…

飞天使-学以致用-devops知识点3-安装jenkins

文章目录 构建带maven环境的jenkins 镜像安装jenkinsjenkins yaml 文件安装插件jenkins 配置k8s创建用户凭证 构建带maven环境的jenkins 镜像 # 构建带 maven 环境的 jenkins 镜像 docker build -t 192.168.113.122:8858/library/jenkins-maven:jdk-11 .# 登录 harbor docker …

Socket网络编程(三)——TCP快速入门

目录 概述TCP连接可靠性1. 三次握手过程2. 四次挥手过程3. 为什么挥手需要四次? 传输可靠性TCP核心APITCP传输初始化配置&建立连接客户端创建Socket建立连接服务端创建ServerSocket监听连接ServerSocket 和 Socket的关系 Socket基本数据类型传输客户端数据传输服…

阿里云A10推理qwen

硬件配置 vCPU:32核 内存:188 GiB 宽带:5 Mbps GPU:NVIDIA A10 24Gcuda 安装 wget https://developer.download.nvidia.com/compute/cuda/12.1.0/local_installers/cuda-repo-rhel7-12-1-local-12.1.0_530.30.02-1.x86_64.rpm s…

php docx,pptx,excel表格上传阿里云,腾讯云存储后截取第一页生成缩略图

php把word转图片的方法:首先给服务器安装libreoffice;然后使用exec函数来调用命令行操作;最后通过“exec(“soffice --headless --invisible…””方法把word转图片即可。 服务器环境:centos7 *集成环境:宝塔 我们开始给服务器安装libreoffice 直接执行下面的代码就可以…

【Kafka系列 06】Kafka Producer源码解析

温馨提示:本文基于 Kafka 2.3.1 版本。 一、Kafka Producer 原理图 生产者的 API 使用还是比较简单,创建一个 ProducerRecord 对象(这个对象包含目标主题和要发送的内容,当然还可以指定键以及分区),然后调…

数据库之ACID

一、ACID **原子性(Atomicity):**即事务是不可分割的最小工作单元,事务内的操作要么全做,要么全不做,不能只做一部分; 一致性(Consistency):在事务执行前数据…

微服务API网关---APISIX

最近在做微服务调研,看到了apisix这个网关,于是进行了初步了解一下。 微服务是指,将大型应用分解成多个独立的组件,其中每个组件都各自的负责对应项目。 系统的架构大致经历了:单体应用架构–> SOA架构 -->微服务…

DTD、XML阐述、XML的两种文档类型约束和DTD的使用

目录 ​编辑 一、DTD 什么是DTD? 为什么要使用 DTD? 内部 DTD 声明 具有内部 DTD 的 XML 文档 外部 DTD 声明 引用外部 DTD 的 XML 文档 二、XML 什么是XML? XML 不执行任何操作 XML 和 HTML 之间的区别 XML 不使用预定义的标记…

Mallox勒索病毒的最新威胁:如何恢复您的数据?

引言: 在当今数字化时代,网络安全威胁层出不穷,而勒索软件(Ransomware)是其中最为恶劣的一种形式之一。而.Mallox勒索病毒则是近期备受关注的一种勒索软件,其深受全球各地用户的困扰。那么,让我…

postman测试接口

1、postman测试接口 (1)首先安装postman 下载地址:Download Postman | Get Started for Free 选择对应版本下载,然后安装即可 (2)使用postman发送请求 比如以下这个请求例子: 使用postman发…

Qt CMake 国际化相关配置

文章目录 更新ts文件发布ts文件 本来用qmake使用pro文件很简单的一件事,结果用cmake折腾了半天。 何必呢~ 参考:QT6.3 CMake 多语言切换 这是我的 cmake_minimum_required(VERSION 3.16)project(testQml3_6 VERSION 0.1 LANGUAGES CXX)set(CMAKE_AUTO…

mini-spring|关于Bean对象作用域以及FactoryBean的实现和使用

需求 FactoryBean 直接配置FactoryBean 获取FactoryBean中的Bean对象 FactoryBean的getObject方法通过反射获取Bean对象 由此省去对实体Dao类的定义 解决方法 对外提供一个可以二次从 FactoryBean 的 getObject 方法中获取对象的功能即可 整体架构 整个的实现过程包括了两部…

Python matplotlib

目录 1、安装 matplotlib 2、绘制折线图 修改标签文字和线条粗细 校正图形 3、绘制散点图 绘制单点 绘制一系列点 自动计算数据 删除数据点的轮廓 自定义颜色 使用颜色映射 自动保存图表 4、随机漫步 创建 RandomWalk() 类 选择方向 绘制随机漫步图 给点着色 …

Groovy - 大数据共享搜索配置

数据共享搜索列中配置了搜索列,相应的数据共享接口中也需要支持根据配置的字段搜索,配置实体时,支持搜索的入参code必须是searchKeys,且接口应该是需要支持分页(入参必须是 current、pageSize)的。current …

【Excel PDF 系列】iText 库直接实现表格 PDF

你知道的越多,你不知道的越多 点赞再看,养成习惯 如果您有疑问或者见解,欢迎指教: 企鹅:869192208 文章目录 前言生成表格 PDF 效果引入 pom 配置代码实现定义 CreateExcelToPdfModel 对象主方法 前言 最近遇到生成 E…

QEMU之内存虚拟化

内存虚拟化方案 最直观的方案,将QEMU进程的虚拟地址空间的一部分作为虚拟机的物理地址。但该方案有一个问题: 在物理机上,CPU对内存的访问在保护模式下是通过分段分页实现的,在该模式下,CPU访问时使用的是虚拟地址&am…