使用 PNPM 从零搭建 Monorepo，测试组件并发布

1 目标

通过 PNPM 创建一个 monorepo（多个项目在一个代码仓库）项目，形成一个通用的仓库模板。

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

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

2 环境要求

核心是 PNPM 和 Node.js，没有特殊的版本要求，只要他俩能对应上即可。
在这里插入图片描述

当前项目使用的 PNPM 版本为 9.3.0，Node.js 为 18.20.3。

除了以上两个，项目中也使用到了以下工具或插件，可以按需添加，如不使用则不用考虑其环境要求。
vite(v5.2.0)：主要用于项目运行和构建，要求 Node.js v18+ 或者 v20+。
Storybook(v8.1.7)：用于组件的测试和展示，要求 Vite v4.0 +。

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 文件夹，实现一个简单的文本组件。 text 文件夹下创建 src 文件夹。

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

形成的目录结构如下：

ease-life
|-- apps
|   |-- storybook
|-- packages|-- config|   |-- commitlint|   |-- eslint|   |-- stylelint|   |-- typescript|-- web-components|-- text|-- src

3.3 添加文件

3.3.1 PNPM 相关

  1. 在项目根目录下添加文件：pnpm-workspace.yaml，定义 PNPM 的工作空间：
packages:# 匹配 packages 目录下（任意文件夹下）的所有模块- 'packages/**'# 匹配 apps 直接子文件夹下的所有模块- 'apps/*'

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

  1. 在项目根目录下添加文件：.npmrc，定义 PNPM 的配置项：
# 允许链接工作空间中的包
link-workspace-packages = true# 在引用工作空间中的包时，设置前缀为 *，即：使用最新版本的包
save-prefix = ''

3.3.2 Vite 相关

  1. 在根目录下运行以下内容：
pnpm init

从而生成 package.json，如下：

{"name": "ease-life","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified1\" && exit 1"},"keywords": [],"author": "","license": "ISC",
}
  1. 在 web-components 以及 web-components/text 下都执行 pnpm init，或直接将根目录下的 package.json 拷贝过去。

本文的目的是要每个组件都能够被单独被发布至 NPM 仓库，如：@ease-life/text。如只需要做整个组件库的发布，则无需在 web-components/text 下执行 pnpm init。

  1. 在项目最外层空间下添加 vite：
pnpm add vite -Dw

packages 里的所有模块如无特殊情况，统一使用 vite 来运行、打包，因此只需要在项目最外层安装一次即可。

  1. 在项目根目录下，添加文件 vite.config.js：
import { defineConfig } from 'vite'export default defineConfig({build: {lib: {entry: 'index.ts',fileName: 'index'},}
})
  1. 修改之前生成的 package.json：
{"name": "ease-life","version": "1.0.0","description": "哥的幸福生活全靠你啦","scripts": {"dev": "vite --open","build": "vite build","preview": "vite preview --open"},"keywords": ["monorepo","web components","pnpm","storybook","changeset"],"author": "zqc","repository": {"type": "git","url": ""},"license": "MIT","type": "module","devDependencies": {"vite": "^5.2.0"},"engines": {"node": ">= 18.20.3","pnpm": ">= 9.3.0"}
}

3.3.3 添加 config

待完善

3.3.4 添加其他

  1. 在项目跟目录下添加 .gitignore：
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*node_modules
dist
dist-ssr
*.local# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3.3.5 自定义 Web Components

  1. 在 packages/web-components/text/src 下创建 text.ts：
import { html, css, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';@customElement('el-text')
export class ELText extends LitElement {static styles = css`p { color: blue }`;@property()name = 'Somebody';render() {return html`<p>Hello, ${this.name}!</p>`;}
}
  1. 在 packages/web-components/text 下创建 index.ts（导出当前组件）：
export { ELText as default } from './src/text.ts';
  1. 在 packages/web-components/text 下添加 tsconfig.json：
{"compilerOptions": {"target": "ESNext","experimentalDecorators": true,"useDefineForClassFields": false,"module": "ESNext","lib": ["ES2020","DOM","DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src"]
}

以上内容将会被移至 packages/config/typescript 中，待修改

  1. 修改 在 packages/web-components/text 下的 package.json：
{"name": "@ease-life/text","version": "1.0.0","description": "","type": "module","files": ["dist"],"main": "./dist/index.umd.cjs","module": "./dist/index.js","exports": {".": {"import": "./dist/index.js","require": "./dist/index.umd.cjs"}},"scripts": {"build": "vite build -c ../../../vite.config.js"},"keywords": ["ELText"],"author": "","license": "ISC","dependencies": {"lit": "^3.1.2"}
}

3.4 生成 storybook

  1. 在 apps/storybook 文件夹的路径下运行以下内容：
pnpm dlx storybook@latest init

选择最后一个选项，回车。
在这里插入图片描述
此时就会在 apps/storybook 下有对应的 storybook 的内容。

  1. 删除 apps/storybook/src/stories 下自带的 button.css、Button.stories.ts、Button.ts、header.css、Header.stories.ts、Header.ts、page.css、Page.stories.ts、Page.ts 六个文件。

最终项目文件目录结构如下：

ease-life|-- .gitignore|-- .npmrc|-- package.json|-- pnpm-lock.yaml|-- pnpm-workspace.yaml|-- vite.config.js|-- apps|   |-- package.json|   |-- storybook|       |-- .gitignore|       |-- index.html|       |-- package.json|       |-- tsconfig.json|       |-- .storybook|       |   |-- main.ts|       |   |-- preview.ts|       |-- public|       |   |-- vite.svg|       |-- src|           |-- index.css|           |-- my-element.ts|           |-- vite-env.d.ts|           |-- assets|           |   |-- lit.svg|           |-- stories|               |-- Configure.mdx|               |-- Text.stories.ts|               |-- assets|                   |-- accessibility.png|                   |-- accessibility.svg|                   |-- addon-library.png|                   |-- assets.png|                   |-- avif-test-image.avif|                   |-- context.png|                   |-- discord.svg|                   |-- docs.png|                   |-- figma-plugin.png|                   |-- github.svg|                   |-- share.png|                   |-- styling.png|                   |-- testing.png|                   |-- theming.png|                   |-- tutorials.svg|                   |-- youtube.svg|-- packages|-- config|   |-- commitlint|   |-- eslint|   |-- stylelint|   |-- typescript|-- map-library|-- web-components|-- text|-- index.ts|-- package.json|-- tsconfig.json|-- src|-- text.ts

4 组件测试

  1. 在项目根目录下运行以下内容，来对 text 进行构建：
pnpm -F @ease-life/text build

会在 packages/web-components/text 下生成 dist 文件夹，里边有 index.js（ESM） 以及 index.umd.cjs（CommonJS）。

  1. 在 apps/storybook/src/stories 下添加一个 Text.stories.ts：
import type { Meta, StoryObj } from '@storybook/web-components';
import '@ease-life/text';const meta: Meta = {component: 'el-text'
};export default meta;
type Story = StoryObj;export const Default: Story = {args: {name: 'world',},
};
  1. 修改 apps/storybook 下的 package.json，将其中的 name 改为：
  "name": "@ease-life/storybook",
  1. 在项目根目录下运行以下内容来安装刚才定义的 web components：
pnpm -F @ease-life/storybook add @ease-life/text
  1. 在项目根目录下运行以下内容，来启动 storybook：
pnpm -F @ease-life/storybook storybook

在浏览器中显示以下内容，则证明组件没有问题了。
在这里插入图片描述

5 组件发布

5.1 在 NPM 官网注册

如果没有注册过，则打开 NPM，点击右上角的 Sign Up，按提示填入信息。

5.2 登录账户

注册完后直接登录。

5.3 创建组织

打开创建组织的页面，在其中添加组织名称，组织名称就是 scope 的名称，也就是这里 @ 后面的内容。

@ease-life/tex，我这里创建了 ease-life 的组织。

5.3 组件发布

  1. 用户登录，在项目根目录下运行：
pnpm login

看到提示后，再次回车，在浏览器弹出的页面中进行登录，成功后显示以下内容：
在这里插入图片描述

  1. 组件发布，在项目根目录下运行：
pnpm publish -r

会自动发布仓库中版本发生改变的组件。
在这里插入图片描述
出现以上类似内容，就证明发布成功了。

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

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

相关文章

gpt、llama大模型模型结构细节探索

gpt、llama大模型模型结构细节探索

参考&#xff1a; https://github.com/naklecha/llama3-from-scratch&#xff08;一定要看看&#xff09; https://github.com/karpathy/build-nanogpt/blob/master/play.ipynb 视频&#xff1a; https://www.youtube.com/watch?vl8pRSuU81PU https://tiktokenizer.vercel…
阅读更多...
SiLM59xx系列SiLM5932SHOCG-DG 一款支持主动短路保护功能（ASC）单通道隔离驱动器

SiLM59xx系列SiLM5932SHOCG-DG 一款支持主动短路保护功能（ASC）单通道隔离驱动器

SiLM59xx系列SiLM5932SHOCG-DG是一款单通道隔离驱动器&#xff0c;提供12A源电流和12A灌电流。主动保护功能包括退饱和过流检测、UVLO、隔离故障报警和 4A 米勒钳位。输入侧电源的工作电压为3V至5.5V&#xff0c;输出侧电源的工作电压范围为13V至30V。所有电源电压引脚都有欠压…
阅读更多...
Java面向对象之static关键字，可变参数，递归，数组常见算法，对象数组，方法参数

Java面向对象之static关键字，可变参数，递归，数组常见算法，对象数组，方法参数

第一章.static关键字 1.static的介绍以及基本使用 1.概述:static是一个静态关键字 2.使用:a.修饰一个成员变量:static 数据类型 变量名b.修饰一个方法:修饰符 static 返回值类型 方法名(形参){方法体return 结果}3.调用静态成员:类名直接调用(不用new对象)4.静态成员特点:a.静…
阅读更多...
后端返回前端时间格式化

后端返回前端时间格式化

时间格式化的方法总共包含以下 5 种。 1.前端时间格式化 JS 版时间格式化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function dateFormat(fmt, date) { let ret; const opt { "Y": date.getFullYear().toString(), // 年 …
阅读更多...
Python学习从0开始——Kaggle深度学习002

Python学习从0开始——Kaggle深度学习002

Python学习从0开始——Kaggle深度学习002 一、单个神经元1.深度学习2.线性单元示例 - 线性单元作为模型多个输入 3.Keras中的线性单元 二、深度神经网络1.层多种类型的层 2.激活函数3.堆叠密集层4.构建Sequential模型 三、随机梯度下降1.介绍2.损失函数3.梯度下降法1.梯度下降法…
阅读更多...
FL Studio（FL 21）软件下载-详细安装教程视频

FL Studio（FL 21）软件下载-详细安装教程视频

​fl studio 编曲软件即,简称FL,是音乐人熟知的水果编曲软件.可以完成完整的音乐制作环境或数字音频工作站(DAW)就是大家熟悉的水果 编曲软件&#xff0c;一个全能的音乐制作软件&#xff0c;包括编曲、录音、剪辑和混音等诸多功能&#xff0c;让你的电脑编程一个全能的录音室。…
阅读更多...
海南云亿商务咨询有限公司解锁抖音电商新纪元

海南云亿商务咨询有限公司解锁抖音电商新纪元

在当今数字化浪潮中&#xff0c;抖音电商以其独特的魅力和强大的用户基础&#xff0c;迅速成为企业营销的新宠。海南云亿商务咨询有限公司&#xff0c;作为专注于抖音电商服务的领先企业&#xff0c;凭借专业的团队和丰富的经验&#xff0c;为众多企业提供了高效、精准的电商服…
阅读更多...
Keepalived介绍、安装和简单使用

Keepalived介绍、安装和简单使用

目录 1 Keepalived1.1 keepalived介绍1、keepalived原理2、keepalived原理3、VRRP工作模式 1.2 keepalived安装配置1、安装配置2、keepalived配置文件详解3、通过配置文件实现资源监控 1.3 案例1、nginx keepalived 实现高可用2、nginx keepalived 实现高可用 - 非抢占模式 总…
阅读更多...
嵌套查询(一)-谓词IN、量词ANY、量词ALL、比较运算符

嵌套查询(一)-谓词IN、量词ANY、量词ALL、比较运算符

一、在多个表之间进行数据查询&#xff0c;除了可以使用连接查询之外&#xff0c;也可以使用嵌套查询&#xff0c;那么什么是嵌套查询呢&#xff1f;如何使用嵌套查询呢&#xff1f; 1、将一个SELECT-FROM查询&#xff0c;嵌套在另一个SELECT查询语句中&#xff0c;那么这个SE…
阅读更多...
swagger美化

swagger美化

参考资料 https://doc.xiaominfo.com/docs/quick-start/start-knife4j-version 版本选择 需要先确认springboot版本&#xff0c;再确认swagger版本是2还是3&#xff0c;最后还要关注Springfox的版本。 确认springboot版本的方法 简单的看当前项目使用的就行 例子 https:…
阅读更多...
前端面试项目细节重难点（已工作|做分享）（九）

前端面试项目细节重难点（已工作|做分享）（九）

面试官&#xff1a;请你讲讲你在工作中如何开发一个新需求&#xff0c;你的整个开发过程是什么样的&#xff1f; 答&#xff1a;仔细想想&#xff0c;我开发新需求的过程如下&#xff1a; &#xff08;1&#xff09;第一步&#xff1a;理解需求文档&#xff1a; 首先&#x…
阅读更多...
这三款使用的视频、图片设计工具，提供工作效率

这三款使用的视频、图片设计工具，提供工作效率

Videograp Videograp是一款专注于视频生成的工具&#xff0c;特别适合需要快速剪辑和编辑视频的用户。Videograp具备以下特点&#xff1a; 影音比例转换&#xff1a;Videograp支持调整视频的分辨率和比例&#xff0c;使其更适合不同的播放环境和设备。 AI快剪&#xff1a;该工…
阅读更多...
期望14K，某小公司java社招面试经历

期望14K，某小公司java社招面试经历

面经哥只做互联网社招面试经历分享&#xff0c;关注我&#xff0c;每日推送精选面经&#xff0c;面试前&#xff0c;先找面经哥 面试的是一家几百人的公司&#xff0c;基本面试的考察有八股文&#xff0c;也有按照项目问你的&#xff0c;总的来说比较全面吧 1、java代理模式 …
阅读更多...
k8s 自动伸缩机制-------HPA 超详细解读

k8s 自动伸缩机制-------HPA 超详细解读

目录 在K8s中扩缩容分为两种&#xff1a; 前言 弹性伸缩是根据用户的业务需求和策略&#xff0c;自动“调整”其“弹性资源”的管理服务。通过弹性伸缩功能&#xff0c;用户可设置对定时、周期或监控策略&#xff0c;恰到好处地增加或减少“弹性资源”&#xff0c;并完成实例…
阅读更多...
Android native层的线程分析(C++)，以及堆栈打印调试

Android native层的线程分析(C++)，以及堆栈打印调试

文章目录 Android native层的线程分析(C)&#xff0c;多线程实现1.native线程的创建第一部分&#xff1a;android_thread模块第二部分&#xff1a;linux_thread模块 2.测试linux_thread模块3.Android native的Thread类3.1源码分析 4.native层堆栈调试方法1. 引用库2. 头文件3. …
阅读更多...
前端实现获取后端返回的文件流并下载

前端实现获取后端返回的文件流并下载

前端实现获取后端返回的文件流并下载 方法一&#xff1a;使用Axios实现文件流下载优点缺点 方法二&#xff1a;使用封装的Request工具实现文件流下载优点缺点 方法三&#xff1a;直接通过URL跳转下载优点缺点 结论 在前端开发中&#xff0c;有时需要从后端获取文件流&#xff0…
阅读更多...
性能测试3【搬代码】

性能测试3【搬代码】

1.Linux服务器性能分析命令及详解 2.GarafanainfluxDB监控jmeter数据 3.GarafanaPrometheus监控服务器和数据库性能 4.性能瓶颈分析以及性能调优方案详解 一、无界面压测时&#xff0c; top load average:平均负载 htop 二、Garafana监控平台 传统项目&#xff1a;centosphpm…
阅读更多...
网站接口是怎么开发的，开发之后是怎么用的

网站接口是怎么开发的，开发之后是怎么用的

网站接口的开发流程 1.确定接口需求 在开发接口之前我们先要知道&#xff0c;要开发什么样的接口&#xff0c;这个接口是用来干什么的&#xff0c;得先知道相关的需求&#xff0c;才能规划下一步&#xff0c;比如客户想要一个文章列表&#xff0c;那么我们就知道这个需求…
阅读更多...
kettle从入门到精通 第六十九课 ETL之kettle kettle cdc mysql，轻松实现增量同步

kettle从入门到精通 第六十九课 ETL之kettle kettle cdc mysql，轻松实现增量同步

1、之前kettle cdc mysql的时候使用的方案是canalkafkakettle&#xff0c;今天我们一起学习下使用kettle的插件Debezium直接cdc mysql。 注&#xff1a;CDC (Change Data Capture) 是一种技术&#xff0c;用于捕获和同步数据库中的更改。 1&#xff09;Debezium步骤解析mysql b…
阅读更多...
基于Python+OpenCV高速公路行驶车辆的速度检测系统

基于Python+OpenCV高速公路行驶车辆的速度检测系统

简介&#xff1a; 基于Python和OpenCV的高速公路行驶车辆的速度检测系统旨在实时监测高速公路上的车辆&#xff0c;并测量它们的速度。该系统可以用于交通监控、道路安全管理等领域&#xff0c;为相关部门提供重要的数据支持。 系统实现&#xff1a; 视频流输入&#xff1a;系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023