引言
本篇 文章 是从0搭建Vue3组件库 系列 文章第二篇,本篇文章将带领大家使用pnpm搭建一个 简单 的Monorepo项目,并完成包的关联与测试
什么是 Monorepo
其实很简单,就是一个代码库里包含很多的项目,而这些项目虽然是相关联的,但是在逻辑上是独立的,可以由不同人 或者 团队 来维护
为什么要用 pnpm
pnpm 对于包的管理是很方便的,尤其是对于一个 Monorepo 的项目。因为对于我们即将开发的组件库来说可能会存在多个 package(包),而这些包在我们本地是需要相互关联测试的,刚好 pnpm 就对其天然的支持。其实像其它 包管理工具 ,比如 yarn、lerna 等也能 做到 ,但是相对来说比较繁琐。而 pnpm 现在已经很成熟了,像 Vant，ElementUI 这些明星组件库都在使用 pnpm,因此本项目也采用 pnpm 作为包管理工具。
pnpm 的使用
安装
npm install pnpm -g
初始化项目
在项目根目录执行 pnpm in IT ,会自动生成 package.json 文件
{
"n am e": "easyest",
"version": "1.0.0",
"description": "",
"m ai n": "index.js",
"scripts": {
" test ": "echo \"Error: no test s PE cified\" && exit 1"
},
"keywo rds ": [],
"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\" &am p; & 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();
p>我们用到了 a 包,所以需要先安装 a,在 B 目录下执行 pnpm add @easyest/a ,显然这样会报错的,因为我们还没有将两个包进行关联,那么如何进行关联呢,其实很简单
在根目录新建 pnpm 的工作区文件 pnpm-workspace.ya ML 就可以将包进行关联
packages:
- 'packages/**'
这样就表示 packages 目录下的所有包都被关联了,然后再执行 pnpm add @easyest/a
注意这里我们使用了 import es6 语法,所以我们要在 A 和 B 的 package.json 中新增字段 "type": " ;m odule"
我们会发现直接在 b 目录的 node_modules 出现了 a 的软链接。同时,b的package.json的依赖字段多了 "@easyest/a": "workspace:^1.0.0" ,这就表示已经关联到本地的 @easyest/a 包了
这时候我们在 b 目录下执行
node index.js
此时我们便完成了本地包的关联,以后进行包的测试就变得更加方便了
本篇文章 代码地址
以上就是Vue3从0搭建Monorepo项目组件库的详细内容，更多关于Vue3搭建Monorepo组件库的资料请关注其它相关文章！
您可能感兴趣的文章: Vue3 企业级组件库框架搭建 pnpm monorepo实战示例 Vue3中使用pnpm搭建monorepo开发环境 Vue3.0中的monorepo管理模式的实现
总结
以上是 为你收集整理的 Vue3从0搭建Monorepo项目组件库 全部内容，希望文章能够帮你解决 Vue3从0搭建Monorepo项目组件库 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue3从0搭建Monorepo项目组件库的详细内容...