网站建设与管理好学吗,网页设计图片超链接,网站设计收费标准,dedecms 做电商网站代码共享方案
放到npm仓库#xff0c;下载到本地放到node_modules
npm配置文件 必须填写的属性#xff1a;name、version name是项目的名称#xff1b; version是当前项目的版本号#xff1b; description是描述信息#xff0c;很多时候是作为项目的基本描述#xff1b…代码共享方案
放到npm仓库下载到本地放到node_modules
npm配置文件 必须填写的属性name、version name是项目的名称 version是当前项目的版本号 description是描述信息很多时候是作为项目的基本描述 author是作者相关信息发布时用到 license,是开源协议发布时用到 private属性记录当前的项目是否是私有的当值为true时npm是不能发布它的这是防止私有项目或模块发布出去的方式 配置文件获得方式 npm initcli脚手架生成 常见属性
必须填写的属性name、version
name是项目的名称 version是当前项目的版本号 description是描述信息很多时候是作为项目的基本描述 author是作者相关信息发布时用到 license是开源协议发布时用到
private属性
private属性记录当前的项目是否是私有的 当值为true时npm是不能发布它的这是防止私有项目或模块发布出去的方式
main属性
比如我们使用axios模块const axiosrequire(‘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;
项目安装
项目安装会在当前目录下生成一个node modules文件夹我们之前讲解require查找顺序时有讲解过这个包在什么情况下被查找局部安装分为开发时依赖和生产时依赖
#默认安装开发和生产依赖
npm install axios
npm i axios
#开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack -D
#根据package.json中的依赖包
npm installnpm install原理 执行npm install’它背后帮助我们完成了什么操作我们会发现还有一个称之为package-lock.json的文件它的作用是什么从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 --versionnpx的原理非常简单它会到当前目录的node modules/bin目录下查找对应的命令
以前包管理工具的痛点 每一次安装都要安装这些插件就会造成磁盘很多冗余文件于是pnpm就诞生了。
pnpm 快节省内存支持monorepos OS硬链接和软连接的概念 硬链接英语hard link)是电脑文件系统中的多个文件平等地共享同一个文件存储单元 删除一个文件名字后还可以用其它名字继续访问该文件 指向的是同一个修改了ab也会被影响。 编辑东西在硬链接里面编辑软连接编辑不了 符号连接(软连接) 符号链接软链接、Symbolic link)是一类特殊的文件 其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用 快捷方式保存一个文件的快捷方式路径。不能够通过软连接来编辑。 也是为什么当硬链接删除掉符号链接没用了 测试软硬连接 文件的拷贝再在磁盘里面复制一份文件然后再创建一个硬链接指向磁盘里面的文件。文件的硬链接创建两个方式共享同一个文件 —cmd测试创建一个符号连接指向硬链接的地方不能够通过符号连接来更改源文件的内容。 — cmd测试 pnpm的工作原理
当使用npm或Yarn时如果你有100个项目并且所有项目都有一个相同的依赖包那么你在硬盘上就需要保存100份该相同依赖包的副本。如果是使用pnpm,依赖包将被存放在一个统一的位置。 如果你对同一依赖包使用相同的版本那么磁盘上只有这个依赖包的一份文件不同的版本也只会保存不相同的文件所有文件都保存在硬盘上的统一的位置 当安装软件包时其包含的所有文件都会硬链接到此位置而不会占用额外的硬盘空间 创建非扁平的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这个命令。
总结 npmyarncnpmpnpm 参考 codewhy包的讲解 s指向这个硬链接。
pnpm store path 查找路径指令
释放pnpm空间
有时候删除了项目所有的项目都没有依赖到那个包但是pnpm store里面不会自动删除这个包。如果我们想要释放pnpm的空间可以使用pnpm store prune这个命令。
总结 npmyarncnpmpnpm 参考 codewhy包的讲解
