monorepo
- 前言
-
- 1、搭建空项目并配置pnpm-workspace.yaml
-
- [pnpm init](#pnpm init)
- pnpm-workspace.yaml
- 2.配置packages测试文件
- 3.引入packages内容至公共package.json
- 4.创建测试项目,并引入公共包
- 结语
前言
有个项目要引入一个第三方库,但是第三方库下载下来的npm 包不能满足完整需求。所以想用monorepo 的方式来引入这个第三方库,并且可以修改第三方库的内容。基于此,学习了monorepo 的相关基础知识,本文主要讲解monorepo如何从0到1搭建。
技术栈:npm、pnpm、vite
1、搭建空项目并配置pnpm-workspace.yaml
首先搭建一个空项目,也就是一个空文件夹,并且在vscode中打开这个文件夹,名称任意。
实现monorepo 比较简单的方法就是用pnpm+workspace.yaml 文件去实现,所以我们首先要初始化项目用pnpm,然后创建pnpm-workspace.yaml 文件去配置我们monorepo具体地址。
pnpm init
初始化后,应该有一个package.json 文件。这里需要加一行代码,"private":true,
来设置私有化,防止被发布
pnpm-workspace.yaml
然后去手动添加一个文件,pnpm-workspace.yaml,并且在其中设置具体公共包与项目的地址,并且去创建对应的文件夹。
如图所示,就是初始化,也就是第一步完成了。
2.配置packages测试文件
首先一般公共包都有一个css也就是ui库和一个配置util库,那么我们新建两个文件夹cssUI和util文件夹,并且用pnpm init分别给他们初始化,初始化后记得要加上"private:true.结果如下:
名字可能会重复,所以我在前面加上了@lp/utils等。
配置相关内容
写测试文件的目录如下
myUI.vue
javascript
<template>
<div>
我有多少钱: {{ data }}
<el-button type="primary" @click="addData">加一百</el-button>
</div>
</template>
<script setup lang="ts">
import "element-plus/dist/index.css";
import { ElButton } from "element-plus";
import { addData, data } from '@lp/utils'
</script>
ui下的index.js
javascript
import myUI from './components/myUI.vue'
export {
myUI
}
ui下的package.json
javascript
{
"name": "@lp/csss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"element-plus": "^2.8.3",
"pnpm": "^9.10.0",
"vue": "^3.5.6"
}
}
dataUtil.js
javascript
import { ref } from 'vue'
export let data = ref(100)
export const addData = () => {
data.value = data.value + 100;
}
utils下的index.js
javascript
export { addData, data } from './dataUtil'
utils下的package.json
javascript
{
"name": "@lp/utils",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
最后因为cssui文件夹下用到了element-plus,所以需要下载element-plus,
javascript
pnpm install vue element-plus
3.引入packages内容至公共package.json
引入上述写入的内容到package里面,两种方案,第一种
javascript
pnpm install -w @lp/utils @lp/csss
这时候,有可能网络延迟下载包失败,那就只能手动引入后install。
javascript
"dependencies": {
"@lp/utils":"workspace:^",
"@lp/csss":"workspace:^"
}
然后 pnpm install
4.创建测试项目,并引入公共包
首先打开终端并跳到apps文件夹下。并通过pnpm create vite
来设置一个vue项目,具体流程如下
然后根据流程来引入,并install
javascript
cd test
pnpm install
最后把app.vue的内容修改并运行,
javascript
<script setup>
import { myUI } from '@lp/csss'
</script>
<template>
<div>
<myUI>
</myUI>
</div>
</template>
最后成功引入
结语
最终其实就是这样的效果,其中monorepo除了最简单的pnpm外,还可以使用turborepo实现,这里就不赘述了。