首页 前端知识 Monorepo使用PNPM Workspaces

Monorepo使用PNPM Workspaces

2025-03-12 12:03:29 前端知识 前端哥 351 328 我要收藏

pnpm 好处:只要用pnpm安装的依赖,他会在你电脑的全局的磁盘的某个地方打一个备份,然后将来在任意的项目里再去下载相同的依赖,就不会先去下载,而是先读取电脑本机里面有没有这个包,有的话直接用软链接链接,从而大大的减少了电脑磁盘的占用量。

首先创建一个空文件夹,用编辑器打开
在这里插入图片描述
第一步需要工程化项目,首先得到一个package.json文件

pnpm init

在这里插入图片描述
在这里插入图片描述
第二部手动创建pnpm-workspace.yaml文件
文件中的内容直接采用官网内容个性化修改即可,这里packages、components、api文件夹都需要手动创建
在这里插入图片描述
首先先api,
先工程化api项目,得到package.json文件

cd api
pnpm init

在这里插入图片描述
然后再这个项目中安装axios依赖

pnpm add axios

然后再api文件夹创建base.js文件

import axios from "axios";

let Axios = axios.create({
    baseURL:'/'
})
export default Axios

在这里插入图片描述
然后再新建一个文件user.js

import Axios from "./base";

export const getUser = (data) => Axios.get(data);

在这里插入图片描述
接下来暴露,在api文件夹里创建index.js,为什么叫index.js呢,因为在程序执行的时候,在package文件里面一般有一个main为主入口,这两个需要相对应
在这里插入图片描述
在这里插入图片描述
之后package中需要修改内容,一般来说版本号每次修改都需要修改一下,最好加个小版本
然后name需要改一下,防止你在下载的时候,与npm包里面重名,把远程包也给下载下来,private设置为true
在这里插入图片描述
然后再package文件夹里面创建一个vue项目web

npm create vite

创建完项目之后,进入该文件夹,下载依赖

pnpm i

要再下载刚刚创建的api方法,需要再下载依赖

pnpm add @ytz/api

这时候web的package文件夹里面就会有下载信息
在这里插入图片描述
在app.vue中打印引入的函数,即可打印出结果

<script setup>
import { getUser } from "@ytz/api";
console.log(getUser);
</script>

在这里插入图片描述
component文件夹同理
这时候开发和最后构建的时候都没有问题,但是我构建之后打开构建的html文件报找不到文件的错误,这是因为构建的路径不对,由于我这个项目是vite,所以需要加上base属性
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23362.html
标签
评论
发布的文章

linux常见操作命令

2025-03-05 18:03:10

GPT-4.5

2025-03-12 12:03:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!