Pnpm + Turbo 搭建 Web Component Monorepo 组件库

技术选型

使用 Pnpm + Turbo 搭建 Web Component Monorepo项目 stencil-component-ui 组件库

  • pnpm 作为包管理器
  • Turborepo 作为构建系统
  • Vitepress 管理文档

pnpm 技术

什么是 pnpm? 它有哪些优势?

pnpm 跟 npm、yarn一样,都是用于管理Node包依赖的管理器,它是号称新一代的最先进包管理工具。按照官网说法,它相比其他包管理工具,可以大大节约磁盘空间提升安装速度,创建非扁平化的 node_modules 文件夹,目录结构很清晰,具体介绍可以参考 pnpm 官网

pnpm 提出了 workspace 的概念,内置了对 monorepo 的支持,那么为什么用 pnpm 取代之前的 lerna 呢?

这里总结了以下几点原因:

  • lerna 已经不再维护,后续有任何问题社区无法及时响应
  • pnpm装包效率更高,并且可以节约更多磁盘空间
  • pnpm本身就预置了对monorepo的支持,不需要再额外第三方包的支持

pnpm 搭建 menorepo 工程

在工程根目录下新建 packages 目录,并且在 packages 目录下创建 componentsicons 两个子项目,这里使用 stencil 脚手架,进入 packages 目录,根据 Stencil 官网 创建项目

pnpm create stencil

有三个选项,直接回车选择第一个 components 是创建组件库项目的,输入项目名称即可创建项目

分别使用 stencil 创建了 componentsicons 项目,components 是来开发组件库源码的,icons 是用来开发编译 svg 图片和组件的,目录如下

在工程根目录建一个 pnpm-workspace.yaml,用于启用 workspace :

packages:
  - "packages/*"
  - "docs"

以上指定工作空间内的包依赖关系,packages 用于管理源码,docs 编写文档,然后执行 pnpm install 安装依赖

由于工程根目录 package.json 不需要发包,需要配置 "private": true

在项目中安装包

Pnpm 启用了 workspace,用 Pnpm 安装依赖必须指定安装的位置。-w--workspace-root 的别名,即安装到工程根目录,作为所有子模块的公共依赖。也可以用 -r 递归给每个子模块安装,或者用 --filter <package_name> 给指定子模块安装。-D--save-dev 的别名,即安装依赖到 devDependencies 节点下,不指定参数默认安装到 dependencies 节点。

给每个项目起个包名,修改componentsicons 项目 package.json 中的 name 字段为 @swc-ui/components@swc-ui/icons,docs 使用 vitepress 搭建,包名直接用 docs

这一步比较关键,安装包、构建、发包都需要用到这个包名。@swc-ui 是提前创建好的 scope,如果没有的话需要先创建

图标库、组件库包安装到 docs 使用,图标库包安装到组件库项目中使用,使用 --filter 指定安装包的位置

pnpm add @swc-ui/components @swc-ui/icons  --filter=docs

pnpm add @swc-ui/icons  --filter=@swc-ui/components

components 安装 @swc-ui/icons 后,package.json新增了 "@swc-ui/icons": "workspace:^"

"dependencies": {
    "@swc-ui/icons": "workspace:^"
  }

通过 Pnpm 提供的 Workspace Protocol,可以很方便地实现子模块互相引用。在开发的时候,也推荐使用 workspace:^,这样可以确保依赖的是最新版本代码。当我们用 pnpm publish 发包的时候,Pnpm 会将 workspace:^ 替换为实际的版本。

只允许 pnpm

当在项目中使用 pnpm 时,如果不希望开发者使用 yarn 或者 npm 安装依赖,可以将下面的这个 preinstall 脚本添加到工程根目录下的 package.json 中:

"preinstall": "npx only-allow pnpm"

因为在在 Pnpm workspace 模式下 npm install 或者 yarn install 安装依赖无法兼容,整个工程很可能跑不起来,所以用 only-allow 库去限制包管理器,当用了其他包管理器,会直接抛异常退出进程。

Turborepo

在项目开发和打包发布,必须先启动 iconscomponents 项目编译构建,才能运行 docs 文档,如果使用 pnpm 构建,可能需要使用 -r 或者 && 并行执行,如

{
  "scripts": {
    "build": "pnpm -r --parallel --filter=./packages/* run build",
    "test": "pnpm -r --parallel --filter=./packages/* run test"
  }
}

Pnpm 给我们提供的 -r 参数递归执行 NPM scripts,但是它不能按照先后顺序执行串行的任务,并且 -r 过于简单粗暴,有些模块明明没有修改代码,任务还是全量执行,影响 CI 构建效率。

专业的事交给专业的工具去解决,而 Turborepo 就非常擅长实现任务编排

什么是Turborepo?

Turborepo 是一个高性能的 JavaScript 和 TypeScript 项目构建系统,采用Go语言实现,所以在语言层面上就具有一定的性能优势,可以大大提高monorepo项目的构建速度。

在开发层面, Turborepo抽象出所有繁琐的配置、脚本和工具,减少项目配置的复杂性,可以让我们专注于业务的开发,并且支持使用 Yarn、Npm、Pnpm

TurboRepo的优势

1、多任务并行处理

Turbo支持多个任务的并行运行,我们在对多个子包,编译打包的过程中,turbo会同时进行多个任务的处理

对于项目中 A 依赖于 B,B 依赖于 C,构建串行顺序为 C、B、A。Turbo它能够有效地安排任务类似于瀑布可以同时异步执行多个任务,而 lerna 一次只能执行一项任务 所以Turbo的性能不言而喻。

2、更快的增量构建

如果我们的项目过大,构建多个子包会造成时间和性能的浪费,turborepo中的缓存机制 可以帮助我们记住构建内容 并且跳过已经计算过的内容,优化打包效率。

3、任务管道

用配置文件定义任务之间的关系,然后让Turborepo优化构建内容和时间。

4、远程云缓存

Turbo通过其远程缓存功能,团队成员、CI/CD 共享远程构建缓存,以实现更快的构建。

安装到项目

1、在项目根目录下,安装turbo依赖

pnpm i turbo --save-dev -w

2、在根目录下添加 turbo.json 配置文件,向 pipeline 字段中配置 npm scripts 中的命令,比如 dev, build 命令

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

3、在根目录 package 配置 scripts

"scripts": {
  "dev": "turbo run dev",
  "build": "turbo run build"
}

以上 Turborepo 项目就简单配置完成了,Turbo 和 Pnpm Workspace 很好的结合起来管理 monorepo 项目

Turbo 开发环境

当执行 npm run dev 命令,Turbo 会分析 Package 包的依赖关系,运行 @swc-ui/icons@swc-ui/components docs 开发环境,通过 turbo.json 配置一行命令就启动了开发环境,不需要手动去执行 icon、components、docs的命令

Turbo 构建打包

Turbo 构建提供了缓存,当执行 npm run build 全部构建需要花费1分钟06秒 ,第二次构建修改了一个包,花费了 30 秒,第三次没有修改源码重新构建,1秒内构建完,明显可以感受到 Turbo 缓存构建的优势。

如对新技术开发组件库感兴趣,也欢迎加入stencil-component-ui,给个 star 鼓励一下 👏👏

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

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

相关文章

构建连接世界的高校海外系统:功能架构解析与思考

随着全球化的深入发展&#xff0c;越来越多的高校开始面向海外拓展&#xff0c;建立起跨国合作与交流的桥梁。而为了更好地管理和服务海外学生、教职员工以及校友&#xff0c;高校海外系统的功能架构显得尤为重要。本文将深入探讨高校海外系统的功能架构设计&#xff0c;以及如…

免注册,ChatGPT可即时访问了!

AI又有啥进展&#xff1f;一起看看吧 Apple进军个人家用机器人 Apple在放弃自动驾驶汽车项目并推出混合现实头显后&#xff0c;正在进军个人机器人领域&#xff0c;处于开发家用环境机器人的早期阶段 报告中提到了两种可能的机器人设计。一种是移动机器人&#xff0c;可以跟…

【STM32】存储器和位带映射(bit band mapping)

文章目录 0 前言1 关于地址和存储器2 STM32内部存储器3 位带映射&#xff08;bit band mapping&#xff09;4 扩展&#xff1a;IAP 0 前言 最近在研究stm32标准库&#xff0c;对使用宏定义实现位操作的函数非常感兴趣&#xff0c;简单的一句PAout(1) 0;就能实现某个引脚电平的…

lua学习笔记7(函数的学习)

print("*****************************函数的学习*******************************") print("*****************************无参数无返回值函数的学习*******************************") function f1()print("f1函数") end f1() f2function()--…

隐私计算实训营学习九:隐语多方安全计算在安全核对的行业实践

文章目录 一、业务背景&#xff1a;安全核对产生的土壤二、产品方案&#xff1a;从试点到规模化的路三、技术共建&#xff1a;与隐语的共同成长 一、业务背景&#xff1a;安全核对产生的土壤 业务背景&#xff1a;很多粗放使用数据的方式被新出台的法律法规所规范&#xff0c;…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(七)- 向量算术指令格式

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

【unity】【C#】延时调用(协程)和场景管理

文章目录 什么是协程协程的应用 - IEnumerator如何控制协程的暂停协程的另一种写法 - Invoke场景管理 多看代码块中的注释 什么是协程 A coroutine alows vou to spreacwhere it left off on the following anc return control toolinencoeframe. 协程允许您将任务分布在多个帧…

拦截器抛出异常无法被全局异常处理器捕获问题

文章目录 基本说明问题描述问题原因解决方法前端执行的所有请求都通过Controller&#xff0c;而不是直接访问html定义一个/error路径的方法 总结 基本说明 我的前后端项目是放在一起的&#xff0c;前后端都是由springMVC进行控制&#xff0c;但是现在我在拦截器的preHandle方法…

HAL STM32主从定时器联级使用

HAL STM32主从定时器联级使用 具体介绍参考STM32参考手册 &#x1f33f;主从定时器联级&#xff1a;使用一个定时器作为另一个定时器的预分频器。 &#x1f341;时钟关系&#xff1a; &#x1f33f;TIM1 和TIM8 控制寄存器 2(TIMx_CR2)相关位&#xff1a; &#x1f516;主…

Redis性能管理及主从复制、哨兵的配置与部署

一、redis性能管理 1.1 查看Redis内存使用 1.2 内存碎片率 1.3 内存使用率 1.3.1 避免内存交换发生的方法 1.4 内回收key 1.4.1 配置文件中修改 maxmemory-policy 属性值 1.5 缓存穿透 1.5.1 原因 1.5.2 条件 1.5.3 解决方案 1.6 缓存击穿 1.6.1 原因 1.6.2 现象…

移位运算与乘法

描述 题目描述&#xff1a; 已知d为一个8位数&#xff0c;请在每个时钟周期分别输出该数乘1/3/7/8,并输出一个信号通知此时刻输入的d有效&#xff08;d给出的信号的上升沿表示写入有效&#xff09; 信号示意图&#xff1a; 波形示意图&#xff1a; 输入描述&#…

Leetcode 215. 数组中的第K个最大元素

心路历程&#xff1a; 这道题本质上是排序不完全的过程&#xff0c;而且这道题有bug&#xff0c;直接用python的排序算法其实就能AC。 可以按照快排排到找到k-1个large元素的思维去做&#xff0c;不过这道题需要考虑空间复杂度&#xff0c;所以需要用指针快排。 其实也可以考虑…

SUPS:一种用于自动驾驶的仿真地下泊车场景数据集

SUPS&#xff1a;一种用于自动驾驶的仿真地下泊车场景数据集 附赠自动驾驶学习资料和量产经验&#xff1a;链接 摘要 本文介绍了SUPS&#xff1a;一种用于自动驾驶的仿真地下泊车场景数据集。随着自动驾驶的范围扩大&#xff0c;自动地下泊车引起了人们极大的关注。自动驾驶汽…

【stm32】软件I2C读写MPU6050

软件I2C读写MPU6050(文章最后附上源码) 编码 概况 首先建立通信层的.c和.h模块 在通信层里写好I2C底层的GPIO初始化 以及6个时序基本单元 起始、终值、发送一个字节、接收一个字节、发送应答、接收应答 写好I2C通信层之后&#xff0c;再建立MPU6050的.c和.h模块 基于I2C通…

京东云幻兽帕鲁4核16G服务器优惠价格26元1个月、398元一年

京东云幻兽帕鲁4核16G服务器优惠价格26元1个月、658元1年、三年3098元&#xff0c;配置为&#xff1a;轻量云主机4C16G-100G SSD系统盘-5M带宽-1000G月流量 华北-北京&#xff0c;京东云优惠活动 yunfuwuqiba.com/go/jd 活动链接打开如下图&#xff1a; 幻兽帕鲁4核16G服务器优…

计算机网络-TCP重传、滑动窗口、流量控制、拥塞控制

重传机制 超时重传&#xff1a;超时重传时间&#xff08;RTO&#xff09;设定为略大于RTT&#xff08;动态&#xff09;。触发场景包括自己发送的数据包丢失和别人给自己的回应数据包丢失。启动重传机制后如果还没有收到数据包&#xff0c;则RTO设置为上次的两倍&#xff0c;直…

双连通分量算法

1. 连通图概念 连通图&#xff1a;无向图任意两点之间存在通路。 强连通&#xff1a;有向图&#xff08;前提&#xff09;中&#xff0c;任意两点都有至少一条通路&#xff0c;则此图为强连通图。 弱连通图&#xff1a;将有向图的有向边换成无向边得到的图是连通图&#xff0c…

Tomcat管理配置

Tomcat管理配置 1 host-manager项目2 manager项目 Tomcat 提供了Web版的管理控制台&#xff0c;位于webapps目录下。Tomcat 提供了用于管理Host的host-manager和用于管理Web应用的manager。 1 host-manager项目 Tomcat启动之后&#xff0c;可以通过 http://localhost:8080/ho…

Cortex-M7 外设(peripherals)总览

1 PPB内存映射总览 由Cortex-M7的内存映射模型可知&#xff0c;0xE000_0000~0xE00F_FFFF地址空间为私有外设总线 (Private peripheral bus&#xff0c;PPB)的内存区域&#xff0c;其具体的地址映射如表1所示。 表1 PPB寄存器内存映射 其中&#xff0c;注释后缀的相关含义如…

5.5.1MFC对话框——文件对话框

本文仅供学习交流&#xff0c;严禁用于商业用途&#xff0c;如本文涉及侵权请及时联系将于24小时内删除 目录 1.实验原理 2.示例说明 1.实验原理 CFileDialog类 用CFileDialog类提供的通用文件对话框&#xff0c;实现Windows标准的【打开】和【另存为】功能。 CFileD…