前端包管理工具

一、代码共享方案

name：项目的名称
version：项目版本
description：描述
author：作者
license：开源协议
private：true
- npm不能发布它，防止私有项目或模块发布出去的方式
- main属性：设置程序的入口
script：配置脚本命令npm run xxx
start、test、stop、restart可以省略run
dependencies：开发和生产环境都需要依赖的包：npm i axios
devDependencies：开发依赖，有一些包在生成环境是不需要的，比如webpack、babel、vue-loader
这个时候通过npm install webpack --save-dev安装到devDependencies属性中
- 简写：npm install webpack -D
peerDependencies：对等依赖，你依赖的一个包，它必须是以另外一个宿主包为前提的
- element-plus：必须安装vue
engines：指定 Node 和NPM 的版本号
browserslist：浏览器兼容情况

本地/局部安装：在哪个文件夹就安装到哪个文件夹里面，不会添加到环境变量里面
- 会在当前目录下生成一个node_modules文件夹
- 又分为
  - 开发依赖： -D
  - 生产依赖
全局安装：npm i webpack -g
- 必须依赖 webpack-cli -g
- 一般安装的都是工具包：yarn、webpack
原理
- 从远程registry 中进行下载
- 若本地两个仓库都有 axios
- 存在缓存的概念，通过算法去找对应的包==》标识符（integrity）
  - 在package-lock.json中
- package-lock.json：确定死的版本，一般不修改
  - name：项目的名称
  - version：项目的版本
  - lockfileVersion：lock文件的版本
  - requires：使用requires来跟踪模块的依赖关系
  - dependencies：项目的依赖
卸载某个包：npm uninstall webpack npm ininstall axios -D
强制重新build：npm rebuild
清除缓存：npm cache clean

npx是 npm5.2之后自带的一个命令
在安装项目之前，先创建package.json
- 手动创建：npm init -y
- npm i webpack-cli -D（开发依赖，打包）
- 在里面script执行命令，优先在modules的bin里面找
- 全局安装webpack：npm i webpack@3.6.0 -g
使用 npx 直接（优先）在node_modules下面的bin文件中优先查找
- webpack 对源代码进行打包
- 默认情况下运行全局的
局部命令的执行
- 必须进入到目录，在终端使用如下命令 ./node_modules/.bin/webpack --version
- 修改scripts脚本：“webpack”: “webpack --version”
- 使用npx：npx webpack --version

performant 高性能的 npm
- 快速/高效/严格/支持 monorepos /严格
- 速度快、节省磁盘空间
vue 源码已经开始使用 pnpm 了
使用的公司：Microsoft、ByteDance
依赖包将被存放在一个统一的位置
- 同一依赖包使用相同的版本，磁盘上只有依赖包这一份文件
- 同一依赖包需要使用不同的版本，仅有版本之间不同的文件会被存储起来
- 所有文件都保存在硬盘上的统一的位置
  - 建立硬链接，不会占用额外的硬盘空间
pnpm 创建非扁平的 node_modules目录873
安装npm install pnpm -g
当使用npm或yarn安装依赖包时，所有软件包都将被提升到node_modules的根目录下
a. 源码可以访问本不属于当前项目所设定的依赖包
通过硬链接和软连接的方式连接起来
整个结构嵌套的层级有点多,不会随便引入非自己安装的依赖pnpm的存储store
获取对应目录：pnpm store path
从store中删除当前未被引用的包来释放store的空间：pnpm store prune

硬链接：电脑文件系统中的多个文件平等地享有同一个文件存储单元
符号链接：一种特殊的文件，包含有一条绝对/相对路径指向其他文件或者目录的引用
copy aaa.js ffff.js----------文件拷贝
- 会在硬盘中复制出来一份新的文件数据
mklink /H bbb.js aaa.js----------建立了硬链接
- bbb.js ：新文件
- aaa.js：原文件
- 指向了磁盘中的同一份数据
- 只能操作文件
mklink aaa.js hhh.js-------建立软连接
- 快捷方式
- 找到原文件
- 再找到磁盘中的数据