pnpm学习(1)

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)