使用 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.mfbz.cn/a/714844.html

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

相关文章

10 C++11

10 C++11

10 C11 1、类型推导1.1 auto关键字1.2 auto类型推断本质 2、类型计算2.1 类型计算分类2.2 类型计算的四种规则2.3 返回值类型计算 3、列表初始化4、Lambda表达式4.1 前置知识4.2 Lambda表达式4.3 捕获表 5、右值引用5.1 概念5.2 左值引用和右值引用 6、移动语义 1、类型推导 1…
阅读更多...
el-tree回显复选框时半选中和全选中的树

el-tree回显复选框时半选中和全选中的树

项目需求如下&#xff1a;当我点击“编辑”后&#xff0c;需要在tree树上全勾中和半勾中选项&#xff0c;由于后端接口返回的tree树是含了父级节点id的数组集合&#xff0c;所以我们回显时需要处理好这个全勾中和半勾中的问题。 主要思路如下&#xff0c;我们通过setData方法获…
阅读更多...
【Java】已解决：java.lang.OutOfMemoryError: Java heap space

【Java】已解决：java.lang.OutOfMemoryError: Java heap space

文章目录 一、问题分析背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决Java&#xff1a;java.lang.OutOfMemoryError: Java heap space 一、问题分析背景 在Java开发过程中&#xff0c;有时我们会遇到java.lang.OutOfMemoryError: Java heap spa…
阅读更多...
在typora中利用正则表达式，批量处理图片

在typora中利用正则表达式，批量处理图片

一&#xff0c;png格式 在 Typora 中批量将 HTML 图片标签转换为简化的 Markdown 图片链接&#xff0c;且忽略 alt 和 style 属性&#xff0c;可以按照以下步骤操作&#xff1a; 打开 Typora 并加载你的文档。按下 Ctrl H&#xff08;在 Windows/Linux 上&#xff09;或 Cmd…
阅读更多...
【Python】理解『下采样』：原理与应用

【Python】理解『下采样』：原理与应用

是你多么温馨的目光 教我坚毅望着前路 叮嘱我跌倒不应放弃 没法解释怎可报尽亲恩 爱意宽大是无限 请准我说声真的爱你 &#x1f3b5; Beyond《真的爱你》 在数字信号处理、图像处理和机器学习中&#xff0c;下采样&#xff08;Downsampling&#xff09;是…
阅读更多...
【Java04】引用变量数组初始化的内存机制

【Java04】引用变量数组初始化的内存机制

引用类型数组指向的元素也是引用。其本质是&#xff1a; 由一个在栈上的引用数组变量指向一块堆内存&#xff1b;这块堆内存里存储的元素是引用&#xff0c;又分别指向其他堆内存。 class Person // Person是一个自定义的类 {public int age;puiblic double height;public vo…
阅读更多...
Java课程设计：基于Javaweb的校园订餐系统

Java课程设计：基于Javaweb的校园订餐系统

文章目录 一、项目介绍二、项目技术栈三、核心代码四、项目展示五、源码获取 一、项目介绍 在当今互联网高速发展的时代,大学校园内的学生生活正在发生着翻天覆地的变化。其中,校园内的餐饮服务无疑是亟需改革和创新的领域之一。 传统的校园食堂模式,往往存在就餐高峰时段拥挤…
阅读更多...
使用了代理IP怎么还会被封？代理IP到底有没有效果

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

代理IP作为一种网络工具&#xff0c;被广泛应用于各种场景&#xff0c;例如网络爬虫、海外购物、规避地区限制等。然而&#xff0c;很多用户在使用代理IP的过程中却发现自己的账号被封禁&#xff0c;这让他们不禁产生疑问&#xff1a;使用了代理IP怎么还会被封&#xff1f;代理…
阅读更多...
Web前端项目-交互式3D魔方【附源码】

Web前端项目-交互式3D魔方【附源码】

交互式3D魔方 ​ 3D魔方游戏是一款基于网页技术的三维魔方游戏。它利用HTML、CSS和JavaScript前端技术来实现3D效果&#xff0c;并在网页上呈现出逼真的魔方操作体验。 运行效果&#xff1a; 一&#xff1a;index.html <!DOCTYPE html> <html><head><…
阅读更多...
刚入职，写接口用了PUT和DELETE方法，结果被同事喷了，感觉自己被针对了

刚入职，写接口用了PUT和DELETE方法，结果被同事喷了，感觉自己被针对了

事情是这样&#xff0c;某社交平台上有个兄弟发帖&#xff0c;说自己刚入职国企&#xff0c;写了个借口&#xff0c;用了PUT和DELETE方法&#xff0c;前段说不能用这两个&#xff0c;这位仁兄感觉很委屈&#xff0c;特地发帖吐槽。 其实站在安全的角度来说&#xff0c;真没冤枉…
阅读更多...
爱了爱了，11款超良心App推荐！

爱了爱了，11款超良心App推荐！

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/今天&#xff0c;我们向你推荐十款与众不同但又不错的win10软件&#xff0c;它们都有各自的功能和优点&#xff0c;相信你一定会喜欢。 1.图片处…
阅读更多...
第 4 章：从 Spring Framework 到 Spring Boot

第 4 章：从 Spring Framework 到 Spring Boot

通过前面几个章节的介绍&#xff0c;相信大家已经对 Spring Framework 有了一个基本的认识&#xff0c;相比早期那些没有 Spring Framework 加持的项目而言&#xff0c;它让生产力产生了质的飞跃。但人们的追求是无止境的&#xff0c;这也驱动着技术的发展。开发者认为 Spring …
阅读更多...
【计算机组成原理】指令系统考研真题详解之拓展操作码！

【计算机组成原理】指令系统考研真题详解之拓展操作码！

计算机组成原理&#xff1a;指令系统概述与深入解析 1. 指令系统概述 计算机软硬件界面的概念 在计算机组成原理中&#xff0c;指令系统扮演着至关重要的角色&#xff0c;它是计算机软硬件界面的核心。软件通过指令与硬件进行通信&#xff0c;硬件根据指令执行相应的操作。指…
阅读更多...
基于STM32和人工智能的智能气象站系统

基于STM32和人工智能的智能气象站系统

目录 引言环境准备智能气象站系统基础代码实现&#xff1a;实现智能气象站系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统4.4 用户界面与数据可视化应用场景&#xff1a;智能气象管理与优化问题解决方案与优化收尾与总结 1. 引言 随着气象科技的进步&#xff0c;智能…
阅读更多...
定个小目标之刷LeetCode热题（21）

定个小目标之刷LeetCode热题（21）

这是道技巧题&#xff0c;利用了 &#xff08;num - 1&#xff09;% n 计算下标的形式来将数组元素与数组索引产生映射关系&#xff0c;代码如下&#xff0c;可以看下注释 class Solution {public List<Integer> findDisappearedNumbers(int[] nums) {int n nums.lengt…
阅读更多...
Qt画五角星，简单图表

Qt画五角星，简单图表

五角星&#xff1a; 代码&#xff1a; widget.cpp #include "widget.h" #include "ui_widget.h" #include <QPaintEvent> #include <QPainter> #include <QPainterPath> Widget::Widget(QWidget *parent): QWidget(parent), ui(new U…
阅读更多...
广东启动“粤企质量提升工作会议” 着力提升产品和服务质量

广东启动“粤企质量提升工作会议” 着力提升产品和服务质量

6月5日,由广东质量峰会组委会牵头,联合相关质量、信用、打假和检验检测等部门共同举办的“粤企质量提升工作会议”在广州正式启动。本次工作会议旨在贯彻落实《质量强国建设纲要》及《广东省质量强省建设纲要》精神,深入开展全民质量行动,弘扬企业家和工匠精神,营造政府重视质量…
阅读更多...
互联网应用主流框架整合之SpringMVC基础组件开发

互联网应用主流框架整合之SpringMVC基础组件开发

多种传参方式 在前一篇文章互联网应用主流框架整合之SpringMVC初始化及各组件工作原理中讨论了最简单的参数传递&#xff0c;而实际情况要复杂的多&#xff0c;比如REST风格&#xff0c;它往往会将参数写入请求路径中&#xff0c;而不是以HTTP请求参数传递&#xff1b;比如查询…
阅读更多...
acwing 5575. 改变数值 | c++题解及解释

acwing 5575. 改变数值 | c++题解及解释

acwing 5575. 改变数值 题目 代码及解释 #include <iostream> #include <cstring> #include <algorithm> #include <unordered_map> using namespace std;const int N305; int a[N],b[N]; unordered_map<int,int>f[N]; const int INF1e9;int gc…
阅读更多...
异或运算的原理以及应用

异或运算的原理以及应用

异或&#xff08;XOR&#xff09;是计算机科学和数字电路中常用的运算之一。异或运算符通常用符号“⊕”或“^”表示&#xff0c;它有着简单而独特的性质&#xff0c;使其在数据加密、错误检测与纠正等多个领域得到了广泛的应用。在网络上我们传输的每一比特数据都经过了异或运…
阅读更多...
最新文章

Copyright @ 2022~2023