3、pnpm uninstall :删除依赖,根据指定的范围将包删除,monorepo 项目中可以通过 --filter 来指定删除某个项目的某个包
4、pnpm add:添加包
5、pnpm filter?
5、pnpm Demo演示
上述提到的filter到底是什么功用呢?结合以下项目具体阐述
1、先配置最外层主目录结构
pnpm-workspace.yaml 配置
1) pnpm-workspace.yaml 配置
packages:
- "packages/**"
意思是定义pnpm的workspace空间,项目的多包文件入口是packages
2、在packages中创建多个项目,各个项目是独立的,你可以创建vue、react项目、方法库等,各项目是独立的,但是依赖包可以进行共享
我现在的目录结构如下:
PNPMDEMO
├── package.json
├── packages
│ ├── components
│ │ ├── index.js
│ │ └── package.json
│ ├── reactApp
│ │ ├── public
│ │ └── src
│ │ └── .....
│ │ └── package.json
│ │ └── vite.config.js
│ ├── utils
│ │ ├── index.js
│ │ └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
3、编写每个项目的package.json,其实主要是编写一下名称,方便以后使用
(我在utils/packages.json中安装了dayjs,在utils/packages.json安装了lodash)
{
"name": "@packages/utils",
"version": "2.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"type": "module",
"license": "ISC",
"dependencies": {
"dayjs": "^1.11.5"
}
}
4、安装依赖
1)在根目录下安装依赖的话,这个依赖可以在所有的packages中使用
2)package下各项目安装依赖,问题来了? 我们需要cd到package的所在目录嘛?答案是:不需要的,可以通过pnpm强大的filter命令执行操作
5、命令
在根目录可以进行总目录的命令操作,也可对packages下的各项目进行整体命令操作
pnpm -w <package_selector>
pnpm --filter <package_selector>
1)全局安装,下面各项目直接可以调用总包 :pnpm -w add shortid
2)对packages下的各项目执行打包
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "pnpm --filter * build"
},
3)对packages下某个项目进行增加依赖操作
例如:在@packages/components中安装lodash,在@packages/utils中安装一个dayjs
pnpm --filter @packages/components add lodash
pnpm --filter @packages/utils add dayjs
6、实例场景
在utils项目内定义一个方法,在reactAPP进行引用
1、在utils项目内定义一个方法
import dayjs from "dayjs";
export const formatDay = () => {
return dayjs().format('YYYY-MM-DD')
}
2、 在根目录下执行`pnpm -F @packages/react-app add @packages/utils@*`,
表示@packages/components安装@packages/utils,其中的@*表示默认同步最新版本,省去每次都要同步最新版本的问题
完成后在reactAPP的packages.json中是这样的
{
"name": "@packages/react-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@packages/utils": "workspace:\*", //引入的utils的包
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"vite": "^3.1.0"
}
}
3、 在reactApp下的调用utils定义的方法
import { useState } from 'react'
import {formatDay,formatMth} from '@packages/utils'
import './App.css'
function App() {
console.log(formatMth());
return (
<div className="App">
{formatDay()}
### 最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/189dfdb1dd88d528eb55ac723398ce07.webp?x-oss-process=image/format,png)