网页成品杭州网站优化效果

代码共享方案

放到npm仓库，下载到本地放到node_modules

npm配置文件

必须填写的属性：name、version
name是项目的名称；
version是当前项目的版本号；
description是描述信息，很多时候是作为项目的基本描述；
author是作者相关信息（发布时用到）；
license,是开源协议（发布时用到）；
private属性记录当前的项目是否是私有的；当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式；

配置文件获得方式

• npm init
• cli脚手架生成

常见属性：

必须填写的属性：name、version

name是项目的名称；
version是当前项目的版本号；
description是描述信息，很多时候是作为项目的基本描述；
author是作者相关信息（发布时用到）；
license是开源协议（发布时用到）；

private属性：

private属性记录当前的项目是否是私有的；
当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式；

main属性：

比如我们使用axios模块const axios=require(‘axios’)
如果有main属性，实际上是找到对应的main属性查找文件的；

scripts属性：

scripts属性用于配置一些脚本命令，以键值对的形式存在；口配置后我们可以通过npm run命令的key来执行这个命令；
npm start和npm run start的区别是什么？
它们是等价的：
对于常用的start.、test、stop、restart可以省略掉run直接通过npm starts等方式运行；

dependencies属性

dependencies属性是指定无论开发环境还是生成环境都需要依赖的包：通常是我们项目实际开发用到的一些库模块vue、vuex、ue-router、.react、react–dom、axios等等：与之对应的是devDependencies;

devDependencies属性

一些包在生成环境是不需要的，比如webpack、babel等，这个时候我们会通过npm install webpack-save-dev,将它安装到devDependencies属性中；

peerDependencies属性

还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；
比如element-plus是依赖于vue3的，ant design是依赖于react、react-dom;

项目安装

1. 项目安装会在当前目录下生成一个node modules文件夹，我们之前讲解require查找顺序时有讲解过这个包在什么情况下被查找；
2. 局部安装分为开发时依赖和生产时依赖：

#默认安装开发和生产依赖
npm install axios
npm i axios
#开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack -D
#根据package.json中的依赖包
npm install

npm install原理

1. 执行npm install’它背后帮助我们完成了什么操作？
2. 我们会发现还有一个称之为package-lock.json的文件，它的作用是什么？
3. 从npm5开始，npm支持缓存策略（来自yarn的压力），缓存有什么作用呢？
   

yarn

cnpm

npx

npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。

以webpack为例：

​ 全局安装的是webpack5.1.3
​ 项目安装的是webpack3.6.0

执行webpack --version

显示结果会是webpack5.1.3,事实上使用的是全局的，为什么呢？

原因非常简单，在当前目录下找不到webpack时，就会去全局找，并且执行命令；

执行局部命令

方式一：明确查找到node module下面的webpack
方式二：在scripts定义脚本，来执行webpack;.

./node modules/.bin/webpack --version
"scripts":{
"webpack":"webpack --version"
)
npx webpack --version

npx的原理非常简单，它会到当前目录的node modules/bin目录下查找对应的命令；

以前包管理工具的痛点：

每一次安装都要安装这些插件，就会造成磁盘很多冗余文件，于是pnpm就诞生了。

pnpm

1. 快，节省内存
2. 支持monorepos

OS硬链接和软连接的概念

硬链接（英语：hard link)是电脑文件系统中的多个文件平等地共享同一个文件存储单元：
删除一个文件名字后，还可以用其它名字继续访问该文件：

指向的是同一个，修改了a，b也会被影响。

编辑东西在硬链接里面编辑，软连接编辑不了

符号连接(软连接)

符号链接（软链接、Symbolic link)是一类特殊的文件：
其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用：

快捷方式：保存一个文件的快捷方式（路径）。不能够通过软连接来编辑。

也是为什么当硬链接删除掉，符号链接没用了！

测试软硬连接

1. 文件的拷贝：再在磁盘里面复制一份文件，然后再创建一个硬链接指向磁盘里面的文件。
2. 文件的硬链接：创建两个方式共享同一个文件 —cmd测试
3. 创建一个符号连接指向硬链接的地方，不能够通过符号连接，来更改源文件的内容。 — cmd测试

pnpm的工作原理

当使用npm或Yarn时，如果你有100个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存100份该相同依赖包的副本。如果是使用pnpm,依赖包将被存放在一个统一的位置。

1. 如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件；
2. 不同的版本，也只会保存不相同的文件
3. 所有文件都保存在硬盘上的统一的位置
   1. 当安装软件包时，其包含的所有文件都会硬链接到此位置，而不会占用额外的硬盘空间

创建非扁平的node_modules

当使用npm或Yarn安装依赖包时，所有软件包都将被提升到node_modules的根目录下。因为npm觉得，不同包如果依赖的其他包相同的时候，不应该再次创建一个包，因此所有的包都会被提升到同一目录结构当中。

但是pnpm完美解决了这个问题，它虽然是非扁平的结构，但是它并不是生成真正的文件在这里，他是生成一个硬链接指向磁盘中的位置。

pnpm的存储store

pnpm在依赖查找的时候，会先去pnpm store中查找硬链接，pnpm store中是一大堆的hash字符，通过这写hash字符，可以查找到硬链接，再将本项目的node_modules指向这个硬链接。

pnpm store path 查找路径指令

释放pnpm空间

有时候删除了项目，所有的项目都没有依赖到那个包，但是pnpm store里面不会自动删除这个包。如果我们想要释放pnpm的空间，可以使用pnpm store prune这个命令。

总结：

1. npm
2. yarn
3. cnpm
4. pnpm

参考

codewhy包的讲解

s指向这个硬链接。

pnpm store path 查找路径指令

释放pnpm空间

有时候删除了项目，所有的项目都没有依赖到那个包，但是pnpm store里面不会自动删除这个包。如果我们想要释放pnpm的空间，可以使用pnpm store prune这个命令。

总结：

1. npm
2. yarn
3. cnpm
4. pnpm

参考

codewhy包的讲解