使用 PNPM 从 0 搭建 monorepo,测试并发布

1 目标

通过 PNPM 创建一个 monorepo(多个项目在一个代码仓库)项目,形成一个通用的仓库模板。

这个仓库既可以用于公司存放和管理所有的项目,也可以用于将个人班余的所有积累整合其中。

这里以在 monorepo 项目中搭建 web components 类型的组件库为例,介绍从创建、测试到构建发布的整个流程。

2 环境要求

核心是 PNPM 和 Node.js,没有特殊的版本要求,只要他俩能对应上即可。
在这里插入图片描述
除了以上两个,项目中也使用到以下工具或插件,都是按需添加,如不使用则不用考虑其环境要求。
Storybook:
Changeset:

3 仓库搭建

3.1 新建项目

新建一个文件夹作为项目容器。

这里起名叫 ease-life,意为轻松生活。所有的学习、工作都是为了更好地、更轻松的生活。

3.2 创建目录

3.2.1 apps

在项目根目录下创建 apps 文件夹。
在 apps 下创建 storybook 文件夹。用于测试和展示 web components。

apps 文件夹主要存放应用程序,如:Storybook、VitePress,还可以加上 vue-test、react-test 来对 web components 做测试。

3.2.2 packages

在项目根目录下创建 apps 文件夹。
在 packages 下分别创建 config(配置信息)、web-components(实现组件与框架无关) 文件夹。

  • 在 config 文件下创建 eslint、stylelint、commitlint 以及 typescript,用于存放对应的配置
  • 在 web-components 创建 text 文件夹,实现一个简单的文本组件。

packages 底下主要包含插件、组件、命令行、类库等,除了以上的内容还可以按需加上 vue-components、react-components、cli、map-library 等等。

3.3 添加文件

在项目根目录下添加文件:pnpm-workspace.yaml,定义 PNPM 的工作空间:

packages:# 匹配 packages 目录下(任意文件夹下)的所有模块- 'packages/**'# 匹配 apps 直接子文件夹下的所有模块- 'apps/*'

这里的模块,说的是:包含 package.json,可以被发布到 NPM 远程仓库的项目

ease-life
|-- apps
|   |-- storybook
|   └── ...     
|-- packages|-- cli|   └──  package.json|-- code-quality|   |-- eslint-config|   |-- stylelint-config|   └── typescript-config|-- map-library|   └── package.json|-- vue-components|   |-- emap|   |   └── package.json|   |-- utils|       └── package.json└── web-components
|-- .npmrc
|-- package.json
|-- pnpm-lock.yaml
└── pnpm-workspace.yaml

未完持续~

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

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

相关文章

ARM-V9 RME(Realm Management Extension)系统架构之系统安全能力的MPAM

安全之安全(security)博客目录导读 关于RME的MPAM变化的完整定义见在《Arm Architecture Reference Manual Supplement, Memory System Resource Partitioning and Monitoring (MPAM), for A-profile architecture》中详细说明。 实现RME的处理元件(PE)能够生成一个2位的MPAM_…

x64-linux下在vscode使用vcpkg

1.使用vscode远程连接上对应的linux ,或者直接在图形化界面上使用。 2.安装vcpkg 插件,然后打开插件设置。 注意:defalut和host的主机一定和你自己的主机一致,且必须符合vcpkg三元组格式,其中你可以选择工作台的设置&a…

揭秘!5大策略让广告变现长久有效

在数字化时代的浪潮下,广告变现作为自媒体和APP开发者重要的收入来源,越来越受到重视。 但如何让这种变现方式长久持续,成为许多内容创作者与平台运营者思考的问题。 本文旨在探讨广告变现的持久之道,通过分析前端展示、合规性、…

OpenCV特征匹配

1、OpenCV Brute-Force匹配器 Brute-Force匹配器的匹配方法非常简单,输入两张图像所分别对应的特征(特征点坐标与特征点域对应的描述子),循环遍历两幅图像中的特征,计算第一幅图像与第二幅图像之间每个特征点之间的距…

【日记】第一次养植物,没什么经验……(781 字)

正文 前两天梦见灵送的几盆植物全都死掉了。梦里好伤心。醒来与她说这件事,她宽慰我说,梦都是反着的,肯定能活得很好的。于是忽然记起昨天给植物换水时,文竹的根居然从花盆底部伸吊了出来,以前都没有这种情况来着&…

ArcGIS Pro 3.0加载在线高德地图

1、打开ArcGIS Online官网,登录自己的账号,登录后效果如下图所示 官网地址:https://www.arcgis.com/home/webmap/viewer.html 2、点击Add,选择Add Layer from Web,如下图所示 3、在显示的Add Layer from Web页面内&am…

RabbitMQ-Stream(高级详解)

文章目录 什么是流何时使用 RabbitMQ Stream?在 RabbitMQ 中使用流的其他方式基本使用Offset参数chunk Stream 插件服务端消息偏移量追踪示例 示例应用程序RabbitMQ 流 Java API概述环境创建具有所有默认值的环境使用 URI 创建环境创建具有多个 URI 的环境 启用 TLS…

c#调用c++dll方法

添加dll文件到debug目录,c#生成的exe的相同目录 就可以直接使用了,放在构造函数里面测试

PostgreSQL的扩展(extensions)-常用的扩展-pg_stat_monitor

PostgreSQL的扩展(extensions)-常用的扩展-pg_stat_monitor pg_stat_monitor 是 PostgreSQL 的一个扩展,它提供了一种先进的监控和统计 SQL 查询的方式,相比于标准的 pg_stat_statements,它提供了更丰富和详细的查询统…

手机流畅运行470亿参数大模型,上交大发布PowerInfer-2推理框架,性能提升29倍

苹果一出手,在手机等移动设备上部署大模型迅速成为行业焦点。 目前,移动设备上运行的模型相对较小(苹果的是3B,谷歌的是2B),并且消耗大量内存,这在很大程度上限制了其应用场景。 即使是苹果&…

linux中: IDEA 由于JVM 设置内存过小,导致打开项目闪退问题

1. 找到idea安装目录 由于无法打开idea,只能找到idea安装目录 在linux(debian/ubuntu)中idea的插件默认安装位置和配置文件在哪里? 默认路径: /home/当前用户名/.config/JetBrains/IntelliJIdea2020.具体版本号/options2. 找到jvm配置文件 IDEA安装…

MNIST手写字符分类-卷积

MNIST手写字符分类-卷积 文章目录 MNIST手写字符分类-卷积1 模型构造2 训练3 推理4 导出5 onnx测试6 opencv部署7 总结 在上一篇中,我们介绍了如何在pytorch中使用线性层ReLU非线性层堆叠的网络进行手写字符识别的网络构建、训练、模型保存、导出和推理测试。本篇文…

北京Web前端薪资揭秘:从行业趋势到个人成长

北京Web前端薪资揭秘:从行业趋势到个人成长 在科技飞速发展的今天,Web前端作为互联网行业的核心岗位之一,其薪资水平一直备受关注。尤其是在北京这样的一线城市,Web前端工程师的薪资更是成为了人们热议的话题。那么,北…

Redis高性能原理:Redis为什么这么快?

目录 前言: 一、Redis知识系统观 二、Redis为什么这么快? 三、Redis 唯快不破的原理总结 四、Redis6.x的多线程 前言: Redis 为了高性能,从各方各面都进行了优化。学习一门技术,通常只接触了零散的技术点&#xff…

解决linux jenkins要求JDK版本与项目版本JDK不一致问题

背景–问题描述: 新入职公司,交接人说jenkins运行有问题,现在都是手动发布,具体原因让我自己看(笑哭)。我人都蒙了,测试环境都手动发布,那不是麻烦的要死! 接手后&am…

代码随想录算法训练营第36天 [860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球 ]

代码随想录算法训练营第36天 [860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球 ] 一、860.柠檬水找零 链接: 代码随想录. 思路:十块只能找五块,二十能找十块五块和三个五块,优先消耗十块 做题状态:看解析后做出…

推荐几款短链接工具系统软件

1、C1N短网址(c1n.cn) 为了提升你的品牌并吸引新的受众,C1N短网址可以帮助你以最简单的方式进行科学分析、决策和促进变革。帮助您真正了解客户并促进转型,C1N短网址,它不仅是一种工具,也是一种专业服务。该品牌成立于2018年&…

引入tinyMCE富文本框在vue3中的使用

实现效果: 官网地址:TinyMCE 7 Documentation | TinyMCE Documentation 1.下载依赖(我使用的版本是5.0 目前最新版本到7了) pnpm/npm install tinymce5.0.0 -S pnpm/npm install tinymce/tinymce-vue -S 2.在public文件夹下…

数字化制造案例分享以及数字化制造能力评估(34页PPT)

资料介绍: 通过全面的数字化企业平台和智能制造技术的应用,制造型企业不仅提升了自身的竞争力,也为整个制造业的数字化转型提供了借鉴。同时,数字化制造能力的评估是企业实现数字化转型的关键环节,需要从技术变革、组…

Javaweb05-会话技术(cookie,session)

会话及会话技术 **概念:**在web开发中,服务器跟踪用户的技术为会话技术 Cookie对象 1.Cookie的工作流程 cookie可以将会话中的数据保存在浏览器中,通过在响应中添加Set-Cookie头字段将数据保存在自身的缓存中去cookie由浏览器创建cookie在…