使用 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.rhkb.cn/news/351603.html

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

相关文章

ffmpeg封装和解封装介绍-（10）综合完成视频重编码为h265，解封装解码编码再封装

ffmpeg封装和解封装介绍-（10）综合完成视频重编码为h265，解封装解码编码再封装

主函数逐句解析&#xff1a; 由于代码太多我们只解析主函数&#xff0c;&#xff08;其他封装函数见前面文章&#xff0c;同时用到了解码编码封装代码&#xff09;。 初始化和参数处理 int main(int argc, char* argv[]) {/// 输入参数处理string useage "124_test_x…
阅读更多...
教育小程序开发：技术实现与实践案例

教育小程序开发：技术实现与实践案例

随着信息技术的不断进步&#xff0c;教育小程序在教育领域的应用越来越广泛。教育小程序开发不仅可以提高教学效率&#xff0c;还能够提供个性化的学习体验。本文将以技术代码为例&#xff0c;详细介绍教育小程序开发的关键技术和实践案例&#xff0c;帮助开发者更好地理解和实…
阅读更多...
鸿蒙应用开发

鸿蒙应用开发

学习视频&#xff1a; 00.课程介绍_哔哩哔哩_bilibili 官网&#xff1a;开发者文档中心 | 华为开发者联盟 (huawei.com) 开发工具 &#xff1a;DevEcoStudio &#xff0c; 类似Jetbrains 全家桶 ArkTS开发语言 &#xff1a;&#xff08;基于TS,集成了前端语言&#xf…
阅读更多...
奥特曼谈AI的机遇、挑战与人类自我反思：中国将拥有独特的大语言模型

奥特曼谈AI的机遇、挑战与人类自我反思：中国将拥有独特的大语言模型

奥特曼在对话中特别提到&#xff0c;中国将在这个领域扮演重要角色&#xff0c;孕育出具有本土特色的大语言模型。这一预见不仅彰显了中国在全球人工智能领域中日益增长的影响力&#xff0c;也预示着未来技术发展的多元化趋势。 ①奥特曼认为AI在提升生产力方面已显现积极作用&…
阅读更多...
【JS重点17】原型链（面试重点）

【JS重点17】原型链（面试重点）

一&#xff1a;原型链底层原理 以下面一段代码为例&#xff0c;基于原型对象&#xff08;Star构造函数的原型对象&#xff09;的继承使得不同构造函数的原型对象关联在一起&#xff08;此处是最大的构造函数Object原型对象&#xff09;&#xff0c;并且这种关联的关系是一种链…
阅读更多...
Project ERROR: Unknown module(s) in QT: xlsx

Project ERROR: Unknown module(s) in QT: xlsx

Qt5下Qxlsx模块安装及使用_qt5xlsx-CSDN博客 主要参考上面这篇文章&#xff01; Perl的安装与配置_perl安装-CSDN博客 1.1 windows环境安装Perl_windows perl-CSDN博客 首先&#xff0c;需要安装Perl,我安装的是Windows版本的。 Download & Install Perl - ActiveStat…
阅读更多...
绿色版DirectoryOpus功能强大且高度可定制的Windows文件管理器

绿色版DirectoryOpus功能强大且高度可定制的Windows文件管理器

Directory Opus&#xff08;通常简称为DOpus&#xff09;是一款功能强大且高度可定制的Windows文件管理器。它提供了许多超越Windows默认文件资源管理器&#xff08;Explorer&#xff09;的功能&#xff0c;使得文件和文件夹的管理变得更加高效和直观。以下是对Directory Opus的…
阅读更多...
如何用Java程序实现一个简单的消息队列？

如何用Java程序实现一个简单的消息队列？

在Java程序中&#xff0c;可以使用内置的java.util.concurrent.BlockingQueue作为消息队列存放的容器&#xff0c;来实现一个简单的消息队列。 具体实现如下&#xff0c;在这个例子中&#xff0c;我们创建了一个生产者线程和一个消费者线程&#xff0c;他们共享同一个阻塞队列…
阅读更多...
Nginx配置详细解释：(4)高级配置

Nginx配置详细解释：(4)高级配置

目录 1.网页的状态页 2.Nginx第三方模块(echo) 3.变量 4.自定义访问日志 5.Nginx压缩功能 6.https功能 7.自定义图标 Nginx除了一些基本配置外&#xff0c;还有一些高级配置&#xff0c;如网页的状态&#xff0c;第三方模块需要另外安装&#xff0c;支持变量&#xff0c…
阅读更多...
使用了代理IP怎么还会被封？代理IP到底有没有效果

使用了代理IP怎么还会被封？代理IP到底有没有效果

代理IP作为一种网络工具&#xff0c;被广泛应用于各种场景&#xff0c;例如网络爬虫、海外购物、规避地区限制等。然而&#xff0c;很多用户在使用代理IP的过程中却发现自己的账号被封禁&#xff0c;这让他们不禁产生疑问&#xff1a;使用了代理IP怎么还会被封&#xff1f;代理…
阅读更多...
Unity接入PS5手柄和Xbox手柄以及Android平台的（以及不同平台分析）

Unity接入PS5手柄和Xbox手柄以及Android平台的（以及不同平台分析）

Unity接入PS5手柄和Xbox手柄以及Android平台的&#xff08;以及不同平台分析&#xff09; 介绍Unity手柄小知识PC端和编辑器上的摇杆事件和滑动事件PS5手柄Xbox手柄北通手柄 安卓环境下&#xff08;安卓手机或者安卓模拟器&#xff09;PS5手柄Xbox手柄北通手柄 总结 介绍 最近…
阅读更多...
Scala网络编程：代理设置与Curl库应用实例

Scala网络编程：代理设置与Curl库应用实例

在网络编程的世界里&#xff0c;Scala以其强大的并发模型和函数式编程特性&#xff0c;成为了开发者的得力助手。然而&#xff0c;网络请求往往需要通过代理服务器进行&#xff0c;以满足企业安全策略或访问控制的需求。本文将深入探讨如何在Scala中使用Curl库进行网络编程&…
阅读更多...
消息队列-RabbitMQ-延时队列实现

消息队列-RabbitMQ-延时队列实现

死信队列 DLX,全称为Dead-Letter-Exchange,死信交换机&#xff0c;死信邮箱。当消息在一个队列中变成死信之后&#xff0c;它能重新发送到另外一个交换器中&#xff0c;这个交换器就是DLX&#xff0c;绑定DLX的队列就称为死信队列。 导致死信的几种原因&#xff1a; ● 消息…
阅读更多...
数据交换平台_10_activatemq 中间件容错性测试

数据交换平台_10_activatemq 中间件容错性测试

目录概要 3. 容错测试： - 模拟ActiveMQ在异常情况下的表现，如网络中断、节点故障等。 - 观察ActiveMQ的容错机制是否能够正确处理异常情况，保证消息的可靠传输。 - 根据容错测试结果，优化ActiveMQ的容错机制，确保系统在面对异常情况时能够正确处理并恢复。 设计： 容错测…
阅读更多...
ffmpeg解封装rtsp并录制视频-（2）使用VLC模拟一个rtsp服务器并用ffmpeg解封装该rtsp流

ffmpeg解封装rtsp并录制视频-（2）使用VLC模拟一个rtsp服务器并用ffmpeg解封装该rtsp流

VCL模拟服务器并打开播放该视频文件&#xff1a; - 准备好一个mp4文件&#xff0c;打开vlc软件 - 选择“媒体”》“流” - 添加一个mp4文件 - 点击下方按钮选择“串流” - 下一步目标选择rtsp 点击“添加” - 端口默认8554 - 路径设置 /test - 用…
阅读更多...
Shell脚本从入门到实战

Shell脚本从入门到实战

一、概述 shell 是一个命令行解释器&#xff0c;它接受应用程序、用户命令&#xff0c;然后调用操作系统内核。 shell 还是一个功能强大编程语言&#xff0c;易调试&#xff0c;易编写&#xff0c;灵活性强。 二、mac 怎么重启docker 1.如何重启 Docker on Mac 在 macOS 上…
阅读更多...
DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门

DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门

场景 DockerComposeJenkinsPipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门&#xff1a; DockerComposeJenkinsPipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门-CSDN博客 以上使用流水线配置和打包springboot后台项目&#xff0c;如果要使…
阅读更多...
机器学习(V)--无监督学习(二)主成分分析

机器学习(V)--无监督学习(二)主成分分析

当数据的维度很高时&#xff0c;很多机器学习问题变得相当困难&#xff0c;这种现象被称为维度灾难&#xff08;curse of dimensionality&#xff09;。 在很多实际的问题中&#xff0c;虽然训练数据是高维的&#xff0c;但是与学习任务相关也许仅仅是其中的一个低维子空间&am…
阅读更多...
springboot优雅shutdown时异步线程安全优化

springboot优雅shutdown时异步线程安全优化

前面针对graceful shutdown写了两篇文章 第一篇&#xff1a; https://blog.csdn.net/chenshm/article/details/139640775 只考虑了阻塞线程&#xff0c;没有考虑异步线程 第二篇&#xff1a; https://blog.csdn.net/chenshm/article/details/139702105 第二篇考虑了多线程的安全…
阅读更多...
智能体（Agent）实战——从gpts到auto gen

智能体（Agent）实战——从gpts到auto gen

一.GPTs 智能体以大模型作为大脑&#xff0c;同时配备技能&#xff0c;使其能够完成具体的任务。同时&#xff0c;为了应用于垂直领域&#xff0c;我们需要为大模型定义一个角色&#xff0c;并构建知识库。最后&#xff0c;定义完整的流程&#xff0c;使其完成整个任务。以组会…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023