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

news2024/10/6 12:21:35

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

YOLOv8改进,添加GSConv+Slim Neck,有效提升目标检测效果,代码改进(超详细)

目录 摘要 主要想法 GSConv GSConv代码实现 slim-neck slim-neck代码实现 yaml文件 完整代码分享 总结 摘要 目标检测是计算机视觉中重要的下游任务。对于车载边缘计算平台来说,巨大的模型很难达到实时检测的要求。而且,由大量深度可分离卷积层构…

Blazor 向 ECharts 传递 option

目标 将ECharts封装为Blazor组件,然后通过jsRuntime向ECharts传递参数,即设置option。 封装ECharts 步骤: 1. 在index.html中引入echarts.min.js; 2. 创建blazor组件,将ref传递给js用于初始化echarts; …

redhat8.6环境下搭建Nextcloud私有云盘

目录 一、nextcoud简介 nextcloud功能: 获取Nextcloud: 二、安装步骤 第一步:编辑网页文件 添加域名管理信息 第二步:上传文件包 将nextcloud包移动到/nextcloud 解压: 也可以使用这个命令: 第三…

TensorFlow 使用 Rust 指南

一、概述 TensorFlow是由 Google Brain 团队开发的强大的开源机器学习框架,已成为人工智能的基石。虽然传统上与 Python 等语言相关,但 Rust(一种因其性能和安全性而受到重视的系统编程语言)的出现为 TensorFlow 爱好者开辟了新的…

信创生态丨九州未来与openEuler完成兼容互认证

近期,九州未来与openEuler开源社区完成产品兼容性互认证,并获得openEuler技术测评证书。测试结果显示,针对系统构建、兼容性、安全性、性能四个维度,九州未来自主研发的Animbus IaaS V8与openEuler 20.03 LTS SP3版本相互兼容性良…

创新之巅 健康之选 森歌集成灶智能水洗新揭秘

2024年2月27日,一场引领智能厨电风潮的盛会在杭州隆重召开。森歌集成灶以“勠力同心 共生共歌”为主题,成功举办了2024森歌智能厨电优秀经销商峰会。此次峰会上,森歌集成灶发布了令人瞩目的奥运冠军同款智能厨电新品——森歌鲸洗小灶Z60&…

3_相机模型

相机标定对于联系相机测量和真实三维世界测量也很重要。它的重要性在于场景不仅仅是三维的,也是物理单位度量的空间。因此,确定相机的自然单位(像素)与物理单位(如mm)的关系是三维场景重构的重要部分。相机标定的过程既给出相机的几何模型又给出透镜的畸…

从win11切换到ubuntu20的第1天

我不想做双系统,反正win11也没有意思,打游戏直接去网吧,所以电脑直接重装了ubuntu20,为什么不是ubuntu22?因为版本太新,很多东西不支持。为什么不装ubuntu18?因为我电脑装完了之后不支持外界显示…

springboot互联网智能导诊系统源码支持微信小程序

目录 智慧导诊系统开发原理 智慧导诊系统特点: 智能导诊功能介绍 支持通过主诉及症状进行导诊 智慧导诊系统概述 挂号引导 应用场景: 1.智慧医院 2.互联网医院 3.医疗健康平台 智慧导诊系统开发原理 导诊系统从原理上大致可分为基于规则模板和…

Presto简介、部署、原理和使用介绍

Presto简介、部署、原理和使用介绍 1. Presto简介 1-1. Presto概念 ​ Presto是由Facebook开发的一款开源的分布式SQL查询引擎,最初于2012年发布,并在2013年成为Apache项目的一部分;Presto 作为现在在企业中流行使用的即席查询框架&#x…

Outlook邮箱IMAP怎么开启?服务器怎么填?

Outlook邮箱IMAP服务器如何开启?Outlook设置IMAP的方法? Outlook邮箱作为其中的佼佼者,被广大用户所青睐。但在使用Outlook邮箱时,许多用户可能会碰到一个问题:如何开启IMAP服务?下面,蜂邮EDM就…

IOC 和 AOP

IOC 所谓的IOC(inversion of control),就是控制反转的意思。何为控制反转? 在传统的程序设计中,应用程序代码通常控制着对象的创建和管理。例如,一个对象需要依赖其他对象,那么它会直接new出来…

瑞_Redis_Redis命令

文章目录 1 Redis命令Redis数据结构Redis 的 key 的层级结构1.0 Redis通用命令1.0.1 KEYS1.0.2 DEL1.0.3 EXISTS1.0.4 EXPIRE1.0.5 TTL 1.1 String类型1.1.0 String类型的常见命令1.1.1 SET 和 GET1.1.2 MSET 和 MGET1.1.3 INCR和INCRBY和DECY1.1.4 SETNX1.1.5 SETEX 1.2 Hash类…

德人合科技 | 公司办公终端、电脑文件数据\资料防泄密管理系统,自动智能无感透明加密保护、防止外泄

德人合科技提供的公司办公终端、电脑文件数据和资料防泄密管理系统是一种高效、智能的解决方案,旨在确保企业数据的安全性和保密性。该系统采用自动智能无感透明加密保护技术,能够在用户无感知的情况下对文件进行加密,从而从源头上保障数据的…

如何利用graylog进行容器化日志管理?

Docker日志 当一个容器启动的时候,它其实是docker deamon的一个子进程,docker daemon可以拿到容器里面进程的标准输出,然后通过自身的LogDriver模块来处理,LogDriver支持的方式很多,默认写到本地文件,也可…

HTML5+CSS3+JS小实例:右键菜单

实例:右键菜单 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><met…

WPF margin属性学习

一开始margin如下&#xff0c;显示如下&#xff1b; margin有四个值的时候是left、top、right、bottom&#xff1b; 如果是Margin“20,10”&#xff0c;则是指left、right设置为20&#xff0c;top、bottom设置为10&#xff1b; 看上去有些问题&#xff0c;现在top为负&#xf…

Docker数据卷-自定义镜像

一.数据卷 1.1数据卷的基本使用 数据卷是一个特殊的目录&#xff0c;用于在Docker容器中持久化和共享数据。 数据卷的主要特点包括&#xff1a; 数据持久性&#xff1a;数据卷允许您在容器的生命周期之外保持数据的持久性。即使容器被删除&#xff0c;数据卷中的数据依然存在&…

在docker中搭建selenium 爬虫环境(3分钟快速搭建)

1、安装docker 省略 2、拉取镜像 docker pull selenium/standalone-chrome-debug 3、运行容器 docker run -d -p 4444:4444 -p 5900:5900 -v C:\Users\Public\VNC_Donwnloads:/home/seluser/Downloads --memory6g --name selenium_chrome selenium/standalone-chrome-debu…

day 45 ● 70. 爬楼梯 (进阶)● 322. 零钱兑换 ● 279.完全平方数

#include<bits/stdc.h> using namespace std; int main(){int n,m;cin>>n>>m;vector<int> dp(33,0);dp[0]1;for(int i0;i<n;i){for(int j1;j<m;j){if(i>j)dp[i]dp[i-j];}}// return dp[n];cout<<dp[n]<<endl;} 当然注意 力扣是 …