说pnpm之前先说说Monorepo,它是一个思想,我举个例子,我现在需要做一个大项目——电商平台,那么我需要做以下几个子项目:
其实这三个子项目,都会用到网络请求、工具函数、公用组件,也就是:
按照以前的规范,一个项目肯定要安装一次axios,然后封装一遍request,但是其实这三个小项目都可以共用一个request,这样做的好处是:
市面上对于Monorepo有两个比较火的方案:
今天就带大家简单地实践一下pnpm
首先展示一下最终的目录:
.
├── README.md
├── package.json
├── apis
├── utils
├── components
├── packages
│ ├── web-client
│ └── h5-client
│ └── admin
└── pnpm-workspace.yaml
首先全局安装一下pnpm
npm i pnpm -g
首先Monorepo需要一个根项目,所以我们先创建一个根项目,他相当于一个容器,用来存放我们的子项目,所以这个根项目并不需要安装太多的依赖
npm init vue@3
Project Name -> pnpm-monorepo
Typescript -> Yes
JSX -> No
Pinia -> No
Testing -> No
Eslint -> No
cd pnpm-menorepo
然后新建pnpm-workspace.yaml文件,他的作用是:指定工作空间workspace的目录,里面的内容为:
packages:
# 子项目存放的地方
- 'packages/*'
# 公用组件目录
- 'components/**'
# request目录
- 'apis/**'
# utils目录
- 'utils/**'
接下来创建公用目录:
npm create vite
Project name: apis
Select a framework: › vanilla
Select a variant: › vanilla-ts
npm create vite
Project name: utils
Select a framework: › vanilla
Select a variant: › vanilla-ts
npm init vue@3
Project Name -> compnents
Typescript -> Yes
JSX -> Yes
Pinia -> Yes
Testing -> No
Eslint -> Yes
在packages目录下创建三个子项目:
创建方法使用npm init vue@3进行创建即可
然后咱们进入到apis目录下,进行请求的封装
cd apis
npm i axios
在apis下创建:
在apis/src下创建:
apis/src/request.ts
import axios from 'axios'
import { AxiosInstance }from 'axios'
const request: AxiosInstance = axios.create()
// 对request进行封装。。。这里省略。。。。
export default request
apis/src/user.ts
import request from './request'
export const getUser = (id: number) => {
return request.get(`/v1/api/user/${id}`)
}
interface IUser {
username: string;
password: string;
}
export const createUser = (user: IUser) => {
return request.post(`/v1/api/user`, user)
}
apis/index.ts
export * from './src/user'
然后我们需要对apis这个包进行命名,并赋予版本号,这个名称和版本号,决定了子项目引用这个包时的显示。。
apis/package.json
{
"name": "@sx/apis",
"private": true,
"main": "index.ts",
"version": "0.0.1",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "^4.6.4",
"vite": "^3.0.0"
},
"dependencies": {
"axios": "^0.27.2"
}
}
我们有三个子项目:
现在这三个子项目都可以去使用这个封装好的request,那应该怎么去使用呢?需要用pnpm
// 进入子项目
cd packages/web-client
// 这个名称就是刚刚你所设置的名称
pnpm add @sx/apis
现在我们看看web-client的package.json,可以看到这个公用的包已经被引入了
你也可以在项目中去使用:
import { getuser } from '@sx/apis'
其他子项目想使用@sx/apis,也是一样的做法。
来源:前端之神
pnpm 是新一代包管理工具,为什么叫 pnpm 呢,是因为 pnpm 作者对现有的包管理工具,尤其是 npm 和 yarn 的性能特别失望,所以起名叫做 performance npm,即 pnpm(高性能 npm)
pnpm 全称是 “Performant NPM”,即高性能的 npm。它结合软硬链接与新的依赖组织方式,大大提升了包管理的效率,也同时解决了 “幻影依赖” 的问题,让包管理更加规范
最早发布的包管理器是 npm,他在 2010 年 1 月就已经发布了。它确立了包管理器工作的核心原则。npm 的发布诞生了一场革命,在此之前,项目依赖项都是手动下载和管理的。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!