monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)

monorepo

前言

有个项目要引入一个第三方库,但是第三方库下载下来的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实现,这里就不赘述了。

相关推荐
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询