从0搭建Vue3组件库(二):Monorepo项目搭建
本篇文章是从0搭建Vue3组件库系列文章第二篇,本篇文章将带领大家使用pnpm搭建一个简单的Monorepo项目,并完成包的关联与测试
什么是 Monorepo
其实很简单,就是一个代码库里包含很多的项目,而这些项目虽然是相关联的,但是在逻辑上是独立的,可以由不同人或者团队来维护
为什么要用 pnpm
pnpm 对于包的管理是很方便的,尤其是对于一个 Monorepo 的项目。因为对于我们即将开发的组件库来说可能会存在多个 package(包),而这些包在我们本地是需要相互关联测试的,刚好 pnpm 就对其天然的支持。其实像其它包管理工具,比如 yarn、lerna 等也能做到,但是相对来说比较繁琐。而 pnpm 现在已经很成熟了,像 Vant,ElementUI 这些明星组件库都在使用 pnpm,因此本项目也采用 pnpm 作为包管理工具。
pnpm 的使用
安装
npm install pnpm -g
初始化项目
在项目根目录执行 pnpm init
,会自动生成package.json
文件
{
"name": "easyest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
包管理
我们新建一个 packages 文件夹用于后续来存放我们的各种包。假如我们有了 a 包和 b 包,在 packages 下新建 a 和 b(这里用于测试 pnpm 的本地引用),然后分别在 a 和 b 目录下执行pnpm init
初始化
这里需要改一下包名,我这里将 name 改成@easyest/a 表示这个 a 包是属于 easyest 这个组织下的。所以记住发布之前要登录 npm 新建一个组织;例如 easyest。比如此时 a 的 package.json
{
"name": "@easyest/a",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
这里我们的 a 包代表工具包,而 package.json 的 main 属性就是包的入口即 index.js。
所以在 a 目录下新建 index.js
export default () => {
console.log("我是@easyest/a包");
};
然后在 b 包下新建 index.js 进行引用
import sayHello from "@easyest/a";
sayHello();
我们用到了 a 包,所以需要先安装 a,在 B 目录下执行pnpm add @easyest/a
,显然这样会报错的,因为我们还没有将两个包进行关联,那么如何进行关联呢,其实很简单
在根目录新建 pnpm 的工作区文件 pnpm-workspace.yaml 就可以将包进行关联
packages:
- 'packages/**'
这样就表示 packages 目录下的所有包都被关联了,然后再执行pnpm add @easyest/a
注意这里我们使用了 import es6 语法,所以我们要在 A 和 B 的package.json
中新增字段"type": "module"
我们会发现直接在 b 目录的 node_modules 出现了 a 的软链接。同时,b的package.json的依赖字段多了"@easyest/a": "workspace:^1.0.0"
,这就表示已经关联到本地的@easyest/a
包了
这时候我们在 b 目录下执行
node index.js
此时我们便完成了本地包的关联,以后进行包的测试就变得更加方便了
本篇文章代码地址 记得star一下
从0搭建Vue3组件库(二):Monorepo项目搭建的更多相关文章
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...
- 从0搭建Vue3组件库:button组件
button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...
- 从0搭建vue3组件库:Shake抖动组件
先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...
- 从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
今天看到一篇文章中提到了一个好用的工具release-it.刚好可以用在我正在开发的vue3组件库.纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组 ...
- 从0搭建vue3组件库: Input组件
本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...
- Vite+TS带你搭建一个属于自己的Vue3组件库
theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...
- 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
- 使用web-component搭建企业级组件库
组件库的现状 前端目前比较主流的框架有react,vuejs,angular等. 我们通常去搭建组件库的时候都是基于某一种框架去搭建,比如ant-design是基于react搭建的UI组件库,而ele ...
- 一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之二 || 后端项目搭建
前言 至于为什么要搭建.Net Core 平台,这个网上的解释以及铺天盖地,想了想,还是感觉重要的一点,跨平台,嗯!没错,而且比.Net 更容易搭建,速度也更快,所有的包均有Nuget提供,不再像以前 ...
随机推荐
- gulp报错The following tasks did not complete
代码如下: //引用gulp模块 const gulp = require('gulp'); //使用gulp.task()建立任务 gulp.task('first', () => { con ...
- <七>lambda表达式实现原理
C++11 函数对象的升级版=>lambda表达式 函数对象的缺点: 使用在泛型算法,参数传递, 比较性质/自定义操作 优先级队列, 需要专门定义出一个类 //lambda表达式语法: //[捕 ...
- Nmap常用方法
1.扫描单个目标地址 在Nmap后面直接添加目标地址即可扫描 nmap 目标地址 2.扫描多个目标地址 如果目标不在同一网段,或在同一网段但不连续且数量不多,可以使用该方法进行扫描 nmap ...
- 修改数据时,一直提示"具有 XXX 的 字典管理 已存在(即数据已存在)
原代码: class DictConfig(models.Model): """ 字典表 """ id = models.AutoField ...
- django.core.exceptions.ImproperlyConfigured: Application labels aren't unique, duplicates: rest_framework_swagger
在启动服务时报django.core.exceptions.ImproperlyConfigured: Application labels aren't unique, duplicates: re ...
- week_3
Andrew Ng机器学习笔记 Week_3 -- -Logistic Regression This week, we'll be covering logistic regression. Log ...
- 发送http2请求
有时服务器会检测http协议版本,有http/1.1和h2,requests发送的是http1.1的请求 # pip install httpx client = httpx.Client(http2 ...
- JS 过滤数组中 对象的某个属性
var newArray = [{name: "aaa",value: 0, height: 1},{name: "bbb",value: 1, height: ...
- 金融科技 DevOps 的最佳实践
随着软件技术的发展,越来越多的企业已经开始意识到 DevOps 文化的重要价值.DevOps 能够消除改变公司业务开展方式,并以更快的速度实现交付,同时创建迭代反馈循环以实现持续改进.而对于金融科技( ...
- [0x11] 131.直方图中最大的矩形【单调栈】
题意 link(more:SPOJ1805) 如图,在水平线上有 \(n(n\leqslant10^5)\) 个宽度为 1 ,高度为 \(h(0\leqslant h\leqslant10^9)\) ...