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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的Java美团求职之路,2022非科班生的Java面试之路

目录 进入Spring Boot世界 讲述Sping、Spring Boot 和Spring Cloud 之间的关系,还重点讲述了如何利用开发工具(如IDEA)来实现开发,如何通过API文档来寻找类对象方法,告诉我们在开发过程中如何学习、发现和解决问题 需要免费领取这份Alibaba…

5G双域快网

目录 一、业务场景 二、三类技术方案 2.1、专用DNN方案 2.2、ULCL方案:通用/专用DNNULCL分流 2.3、 多DNN方案-定制终端无感分流方案 漫游场景 一、业务场景 初期双域专网业务可划分为三类业务场景,学校、政务、文旅等行业均已提出公/专网融合访问需…

跳跃游戏Ⅱ

问题 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …

Stable-Diffusion ubuntu服务器部署,报错解决方法(小白教程)

Stable Diffusion是一个深度学习模型&#xff0c;专注于生成高质量的图像。它由CompVis团队与Stability AI合作开发&#xff0c;并在2022年公开发布。这个模型使用文本提示&#xff08;text prompts&#xff09;生成详细、逼真的图像&#xff0c;是目前人工智能图像生成领域的一…

金融行业专题|期货超融合架构转型与场景探索合集(2023版)

更新内容&#xff1a; 更新 SmartX 超融合在期货行业的覆盖范围、部署规模与应用场景。新增 CTP 主席系统实践与评测、容器云资源池等场景实践。更多超融合金融核心生产业务场景实践&#xff0c;欢迎下载阅读电子书《SmartX 金融核心生产业务场景探索文章合集》。 面对不断变…

CI/CD笔记.Gitlab系列.`gitlab-ci.yml`中的头部关键字

CI/CD笔记.Gitlab系列 gitlab-ci.yml中的头部关键字 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/136342897HuaW…

cRIO9040中NI9871模块的测试

硬件准备 CompactRIO9040NI9871直流电源&#xff08;可调&#xff09;网线RJ50转DB9线鸣志STF03-R驱动器和步进电机 软件安装 参考&#xff1a;cRIO9040中NI9381模块的测试 此外&#xff0c;需安装NI-Serial 9870和9871扫描引擎支持 打开NI Measurement&#xff06;Automa…

基于Java SSM springboot+VUE+redis实现的前后端分类版网上商城项目

基于Java SSM springbootVUEredis实现的前后端分类版网上商城项目 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐…

fastjson序列化MessageExt对象问题(1.2.78之前版本)

前言 无论是kafka&#xff0c;还是RocketMq&#xff0c;消费者方法参数中的MessageExt对象不能被 fastjson默认的方式序列化。 一、查看代码 Override public ConsumeConcurrentlyStatus consumeMessage(List<MessageExt> msgs,ConsumeConcurrentlyContext context) {t…

【MATLAB】SVMD_ MFE_SVM_LSTM 神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 SVMD_MFE_SVM_LSTM神经网络时序预测算法结合了单变量分解&#xff08;SVMD&#xff09;、多尺度特征提取&#xff08;MFE&#xff09;、聚类后展开支持向量机&#xff08;SVM&#xff09;…

【Ansys Fluent Web 】全新用户界面支持访问大规模多GPU CFD仿真

基于Web的技术将释放云计算的强大功能&#xff0c;加速CFD仿真&#xff0c;从而减少对硬件资源的依赖。 主要亮点 ✔ 使用Ansys Fluent Web用户界面™&#xff08;UI&#xff09;&#xff0c;用户可通过任何设备与云端运行的仿真进行远程交互 ✔ 该界面通过利用多GPU和云计算功…

MIT-BEVFusion系列九--CUDA-BEVFusion部署4 c++解析pytorch导出的tensor数据

目录 创建流打印 engine 信息打印结果内部流程 启动计时功能加载变换矩阵并更新数据&#xff08;重要&#xff09;内部实现 该系列文章与qwe、Dorothea一同创作&#xff0c;喜欢的话不妨点个赞。 在create_core方法结束后&#xff0c;我们的视角回到了main.cpp中。继续来看接下…

[vscode] 1. 在编辑器的标签页下显示文件目录(标签页显示面包屑) 2. 在标题栏上显示当前文件的完整路径

1. 标签页显示面包屑 view->Appearance->Breadcrumbs 2. 在标题栏上显示当前文件的完整路径 搜索 window.title将原来的值activeEditorShort 修改为 activeEditorMedium 参考&#xff1a; vscode在编辑器的标签页下显示文件目录&#xff08;标签页显示面包屑&#xf…

10、电源管理入门之OPP介绍

目录 1. 什么是OPP,怎么用? 2. 系统初始化加载OPP信息 3. 触发使用 4. API介绍 之前的文章设置clock的时候多次提到了(Operating Performance Point)OPP,例如DEVFreq、CPUFreq等,在现代SoC上存在有Power Domain,也可以以Power Domain为单位进行OPP的电压频率定义。 …

C++ 游戏飞机大战, 字符型的

//#define _CRT_SECURE_NO_WARNINGS 1 用于禁止不安全函数的警告 #include<iostream> #include<stdlib.h> #include<string> #include<conio.h> #include<Windows.h> #include<time.h> #include <graphics.h> using namespace std;…

顶会ICLR2024论文Time-LLM:基于大语言模型的时间序列预测

文青松 松鼠AI首席科学家、AI研究院负责人 美国佐治亚理工学院(Georgia Tech)电子与计算机工程博士&#xff0c;人工智能、决策智能和信号处理方向专家&#xff0c;在松鼠AI、阿里、Marvell等公司超10年的技术和管理经验&#xff0c;近100篇文章发表在人工智能相关的顶会与顶刊…

SpringMVC 学习(六)之视图

目录 1 SpringMVC 视图介绍 2 JSP 视图 3 Thymeleaf 视图 4 FreeMarker 视图 5 XSLT 视图 6 请求转发与重定向 6.1 请求转发 (Forward) 6.2 重定向 (Redirect) 7 视图控制器 (view-controller) 1 SpringMVC 视图介绍 在 SpringMVC 框架中&#xff0c;视图可以是一个 J…

字节面试问题

实现三列布局的方法 第一种&#xff1a;可以使用浮动margin 第二种&#xff1a;浮动BFC <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…

防御保护:防火墙内容安全

一、IAE&#xff08;Intelligent Awareness Engine&#xff09;引擎 二、深度检测技术(DFI和DPI&#xff09; 1.DPI – 深度包检测技术 DPI主要针对完整的数据包&#xff08;数据包分片&#xff0c;分段需要重组&#xff09;&#xff0c;之后对数据包的内容进行识别。&#x…

10_Vue

文章目录 Vue快速入门Vue的指令Vue的插值表达式V指令v-bind&#xff08;单向绑定&#xff09;v-model&#xff08;双向绑定&#xff09;v-on&#xff08;事件监听&#xff09;v-for&#xff08;循环&#xff09;v-text、v-htmlv-show&#xff08;显示/隐藏&#xff09;v-if&…