简单带大家实践一下pnpm,也就几分钟的事情~

更新日期: 2022-07-20阅读: 1.5k标签: pnpm作者: 林三心

Monorepo

说pnpm之前先说说Monorepo,它是一个思想,我举个例子,我现在需要做一个大项目——电商平台,那么我需要做以下几个子项目:

  • 电商Web端
  • 电商H5端
  • 电商的后台管理系统

其实这三个子项目,都会用到网络请求、工具函数、公用组件,也就是:

  • axios -> request
  • lodash -> utils
  • antd -> components
  • 。。。。。

按照以前的规范,一个项目肯定要安装一次axios,然后封装一遍request,但是其实这三个小项目都可以共用一个request,这样做的好处是:

  • 1、多个项目统一规范,因为用到是同一个封装
  • 2、不需要每个项目复制一遍,因为用到是同一个封装
  • 3、request变动的时候,只需要改一处即可,因为用到是同一个封装
  • 4、后续有新子项目时,可以使用现成的封装库

方案

市面上对于Monorepo有两个比较火的方案:

  • lerna + yarn
  • pnpm

今天就带大家简单地实践一下pnpm


简单实践

首先展示一下最终的目录:

.
├── README.md
├── package.json
├── apis
├── utils
├── components
├── packages
│ ├── web-client
│ └── h5-client
│ └── admin
└── pnpm-workspace.yaml

安装 pnpm

首先全局安装一下pnpm

npm i pnpm -g

新建一个根项目

首先Monorepo需要一个根项目,所以我们先创建一个根项目,他相当于一个容器,用来存放我们的子项目,所以这个根项目并不需要安装太多的依赖

npm init vue@3

Project Name -> pnpm-monorepo
Typescript -> Yes
JSX -> No
Pinia -> No
Testing -> No
Eslint -> No

创建 pnpm-workspace.yaml

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目录下创建三个子项目:

  • web-client:web端
  • h5-client:h5端
  • admin:后台管理

创建方法使用npm init vue@3进行创建即可

封装request

然后咱们进入到apis目录下,进行请求的封装

cd apis

npm i axios

在apis下创建:

  • index.ts

在apis/src下创建:

  • request.ts
  • user.ts
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

我们有三个子项目:

  • web-client:web端
  • h5-client:h5端
  • admin:后台管理

现在这三个子项目都可以去使用这个封装好的request,那应该怎么去使用呢?需要用pnpm

// 进入子项目
cd packages/web-client

// 这个名称就是刚刚你所设置的名称
pnpm add @sx/apis

现在我们看看web-client的package.json,可以看到这个公用的包已经被引入了


你也可以在项目中去使用:

import { getuser } from '@sx/apis'

其他子项目想使用@sx/apis,也是一样的做法。

来源:前端之神

链接: https://fly63.com/article/detial/11914

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!