pnpm新建vite+vue3项目 以及pnpm和npm的区别
构建前需要安装以下配置
Node环境 npm环境
安装pnpm
npm install -g pnpm
设置镜像源
pnpm config set registry https://registry.npm.taobao.org/ # 检查 pnpm config get registry
配置pnpm环境
- 在终端运行pnpm create vite (项目名称)
- 确认项目名称
- 选择框架
- 选择开发语言
- cd (项目名称)
- pnpm i || pnpm install
- pnpm dev || pnpm run dev
添加包
pnpm install 包 // pnpm i 包 pnpm add 包 // -S 默认写入dependencies pnpm add -D // -D devDependencies pnpm add -g // 全局安装
移除包
pnpm remove 包 //移除包 pnpm remove 包 --global
npm 和 pnpm的区别
稍微解释一下
pnpm的原理在于不会傻瓜式的无脑存储相应的副本,而是进行差异文件的比对,只会增加变化了的文件,相当于这些多个项目相同的部分都共享了一个版本的依赖。这样的话,硬盘空间可以得到大量的缩减,同时加快了安装速度。
说简单点就是pnpm比npm加载速度快很多很多
npm
npm 会出现幽灵依赖,依赖分身的问题
幽灵依赖
幽灵依赖在npm@3.x的版本中就已经出现了,因为有了提升的特性,假设项目中没有在package.json中显性声明要安装D@1.0.0,但是npm已经将他提升到根部,此时在项目中引用D并进行使用是不会报错的。但是由于我们没有显性声明,假如一旦依赖A不再依赖D或者版本有变化那么此时install后代码就会因为找不到依赖而报错!!!
依赖分身 // 项目的根node_modules node_modules A B C node_modules D@2.0.0 D(@1.0.0 )
比如我们A,B引用的是D@1.0.0,而C,E引用的是D@2.0.0,项目中D@1.0.0已经被依赖提升到顶部了,那么C,E的node_modules中均会有 D@2.0.0 的依赖,因此他会被重复安装。
pnpm
原文链接 https://www.jianshu.com/p/6c695a0692e0
pnpm 号称 performance npm,与npm的依赖提升和扁平化不同。pnpm采取了一套新的策略:内容寻址储存;
还是使用上面的例子: 项目依赖了A、B、C,之后A依赖D@1.0,B依赖D@2.0,而C也依赖D@1.0,使用 pnpm 安装依赖后 node_modules 结构如下
// 项目的根node_modules node_modules .pnpm A@1.0.0 node_modules A => <store>/A@1.0.0 D => ../../D@1.0.0 D@1.0.0 node_modules D => <store>/D@1.0.0 B@1.0.0 node_modules B => <store>/B@1.0.0 D => ../../D@2.0.0 C@1.0.0 node_modules C => <store>/C@1.0.0 D => ../../D@1.0.0 A => .pnpm/A@1.0.0/node_modules/A B => .pnpm/B@1.0.0/node_modules/B C => .pnpm/C@1.0.0/node_modules/C
我们看到,pnpm拥有自己的.pnpm目录,他会以平铺的方式来存储所有包,以依赖名加上版本号的名字为命名,实现了版本的复用。而且他不是通过拷贝机器缓存中的依赖到项目目录下,而是通过硬链接的方式,这能减少空间占用。
至于根目录下用于项目使用的依赖,则是通过符号链接的方式,链接到它的 .pnpm 目录下的对应位置。
shamefully-hosit
默认情况下,通过pnpm的node_modules你只能访问到在 package.json 文件中声明的依赖,只有依赖项才能访问未声明的依赖项。你可能需要需要再.npmrc文件中声明了 shamefully-host=true,他才会像npm平铺的方式,我们才能使用package.json没有显性声明的幽灵依赖。
不过事实上,pnpm的严格模式能够帮助我们避免一些低级错误。正常情况下,是不推荐使用羞耻提升的。