代码编织梦想

相对于npm优势

  1. 速度快
  2. 节省磁盘空间,如:
当使用 npm 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存 100 份该相同依赖包的副本。然而,如果是使用 pnpm,依赖包将被 存放在一个统一的位置,因此:

a: 如果你对同一依赖包需要使用不同的版本,则仅有 版本之间不同的文件会被存储起来。例如,如果某个依赖包包含 100 个文件,其发布了一个新 版本,并且新版本中只有一个文件有修改,则 pnpm update 只需要添加一个 新文件到存储中,而不会因为一个文件的修改而保存依赖包的 所有文件。
b: 所有文件都保存在硬盘上的统一的位置。当安装软件包时, 其包含的所有文件都会硬链接自此位置,而不会占用 额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的 依赖包。
c: 最终结果就是以项目和依赖包的比例来看,你节省了大量的硬盘空间, 并且安装速度也大大提高了!

硬连接和软链接

  • 硬连接:是电脑文件系统中的多个文件平等地共享同一个储存单元。删除一个文件名称后,还可以用其它名字继续访问该文件
  • 软链接(也称符号链接):是一类特殊的文件,其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用(如创建桌面快捷方式)

创建硬连接的命令

// 假设当前目录存在一个index.js ,则通过cmd进入到当前文件夹下,执行如下命令可创建xxx.js

// window 系统 的执行命令
mklink /H xxx.js index.js

// mac 系统执行命令
ln  index.js  xxx.js

// xxx.js 与 index.js 来自于同一个磁盘数据data,改变xxx.js里的内容,index.js中也会被更改

创建软连接的命令


// window 系统 执行的命令
mklink xxx.js index.js

// mac 系统执行的命令
ln -s index.js xxx.js

注意:软连接,若是删除了原文件index.js, 则xxx.js文件打不开。没删除前,去双击打开xxx.js的时候,其实是点开了index.js文件

pnpm 创建 非扁平化node_modules目录

pnpm 的命令

// 把pnpm目录中 暂时用不到的包 会给删除掉,减少pnpm包过多问题
pnpm store prune 

// 查看pnpm 的目录位置
pnpm store path
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39755186/article/details/138657916

包管理工具 —— 更推荐的 pnpm-爱代码爱编程

前言 一般我们接触的包管理工具有 npm、yarn 以及pnpm,小柒在工作中基本上新项目都采用了pnpm 来作为包管理工具,那我们就来聊一聊换成 pnpm 的好处。 npm npm 从 v1 -v3- v5 版本的迭代都有重大的改变,一起来下看吧~。 npm v1 嵌套 npm 在 v3 之前 node_modules 里的包都是嵌套的。 n

研究一下「pnpm」这个神奇的包管理工具-爱代码爱编程

最近搬砖 🧱 在搞前端项目部署优化 🎡,大部分项目的包管理工具都已经从 npm/yarn 替换成了 pnpm,整体来看无论是在 install 或是 build 阶段都提速了不少 🚀,借此时机,做个总结!🤔  pnpm 简介 从 pnpm 官网 的定义来 👀「pnpm 是一个快速的,节省磁盘空间的包管理工具」。它用于管理 JavaScript 依赖包,

pnpm包管理的高效存储机制解析-爱代码爱编程

掘金 随着 pnpm 的逐渐崭露头角,越来越多的开发者和项目开始倾向于采用 pnpm 作为其包管理工具,以期利用 pnpm 的独特优势来解决 npm 在处理大型、复杂项目时可能遇到的一些问题。特别是在 Vue 3 及其生态中

包管理工具详解-爱代码爱编程

有以下几种: npm、yarn、cnpm、npx、pnpm 包管理工具npm :  Node Package Manager,也就是Node包管理器;  但是目前已经不仅仅是Node包管理器了,在前端项目中我们也在使用它来管理依赖的包;  比如vue、vue-router、vuex、express、koa、react、react-dom、ax

前端包管理工具之从npm到pnpm-爱代码爱编程

前端包管理工具之从NPM到PNPM | DLLCNX的博客 近几年的前端开发者肯定了解npm是什么,而且使用过程中也开始接触yarn,pnpm等等。那么到底为什么会有这么多的包管理工具,它们好像可以交替使用,但是

ts函数?-爱代码爱编程

函数 介绍 函数是JavaScript应用程序的基础。 它帮助你实现抽象层,模拟类,信息隐藏和模块。 在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。 函数 和JavaScript一样,TypeScript函数可以创建有

前端vue架构-爱代码爱编程

1 理解: 创建视图的函数(render)和数据之间的关联; 当数据发生变化的时候,希望render重新执行; 监听数据的读取和修改; defineProperty:监听范围比较窄,只能通过属性描述符去监听已

react中jsx语法入门-爱代码爱编程

JSX语法入门及代码 JSX是一种JavaScript的语法扩展,用于在React中描述用户界面的结构。它允许开发者使用类似HTML的语法来创建React元素,使得代码更具可读性和可维护性。JSX将HTML标签和JavaScript代码结合在一起,可以在其中使用JavaScript表达式,并且可以通过使用大括号{}来嵌入JavaScript代码。React

vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3-爱代码爱编程

纯vue3的语法 一.创建(基于vite) 1.在指定目录下运行 npm create vue@latest 项目名称:英文小写+下划线+数字回车表示确定是、否 左右切换路由、pina、单元测试、端到端的

setimmediate不能在浏览器中执行-爱代码爱编程

setImmediate 函数不是浏览器的标准 API,而是 Node.js 环境中的一个函数。然而,你可以使用 setTimeout 函数实现类似的效果。下面是一个代码示例: // 使用 setTimeout 模拟 se

vue.js的发展史(一)-爱代码爱编程

Vue.js的发展史(一) 什么是Vue? Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。  来源官方解释--

vue3专栏项目 -爱代码爱编程

1、创建Message组件 前面我们获取到了请求错误的信息,所以我们接下来做一个弹出框组件,让错误提示展示出来 我们把这个组件做成一个全局组件,它不仅可以显示错误的信息,还可以添加成功操作的信息,甚至还可以显示一个普通的提示,所以它应该有三种类型,而且它应该和Loader组件即加载组件一样,一看我们就直到是一个全局性质的组件,所以它应该使用Telepo

ant design datepicker日期选择框指定分钟的间隔minutestep属性-爱代码爱编程

 如果你想让分钟选项只能以 15 分钟为间隔选择,你可以将 minuteStep 设置为 15。 注意:minuteStep 是 Ant Design 的 TimePicker时间选择框组件的一个属性。 import React from 'react'; import { DatePicker } from 'antd'; const Minut

(vue3+ts+volar) 全局组件配置类型声明的最佳实践_ts 如何声明全局组件类型-爱代码爱编程

实践方案 问题原因:Vue3并没有对自定义全局组件做TS类型支持处理,而是把这个功能转交Volar实现实现原理:利用TypeScript模块扩充技术,对全局组件的类型进行扩充,从而实现对新注册全局组件的类型保护实现步骤:①声明一个的*d.ts类型文件 ②对类型接口进行类型模块扩充并导出 参考Volar文档 定义全局组件:使用GlobalCompon