前端包管理工具

一、代码共享方案

• npm 进行发布上传 npmregistry
• npm 进行安装

二、npm 包管理工具

2.1 介绍

• 安装 node 的时候自动安装

• node package manager：Node 包管理工具

• 可以通过 npm 安装说明已经上传到这个仓库里面了

• npm 官网查看是否有发布：npmjs.org

2.2 npm的配置文件

• package.json
• 记录着项目的名称、版本号、项目描述
• 项目所依赖的其他库的
• npm init：自动生成 package.json
• 手动从零开始创建项目：npm init -y:所有东西都是yes
• 通过脚手架创建项目：vue create shopping：会搭建好这个项目所需要配置的东西，包括 package.json

2.3 常见的属性

• 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：浏览器兼容情况

2.4 semver版本规范

• X.Y.Z
• X：主版本号，可能不兼容之前的版本，发生了重大版本更新
  • vue3 不兼容 vue2 版本的一些 api
• Y：次版本号，增加了新特性和新功能，但是兼容之前的版本
• Z：修订号，没有新功能，修正了之前的bug
• x.y.z：明确的版本号
• ^x.y.z：x 是保持不变的，y 和 z 永远安装最新的版本，后面两者动态
• ~x.y.z：x 和y 是保持不变的， z 永远安装最新的版本

2.5 npm install 命令

• 本地/局部安装：在哪个文件夹就安装到哪个文件夹里面，不会添加到环境变量里面

  • 会在当前目录下生成一个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

2.6 npm 发布自己的开发包

• 编写自己的工具/库/框架
• 必须包含 package.json
• 除了在github也可以发布在registry
• 步骤
  • 注册npm账号 https://www.npmjs.com
  • 在vscode里面登录：npm login
  • 修改 package.json
  • 发布到 npm registry上：npm publish
  • 更新仓库
    • 修改版本号：最好符合 semver 规范
    • 重新发布
  • 删除发布的包：npm unpublish
  • 让发布的包过期：npm deprecate

三、 yarn 工具

• 早期的 npm 存在安装依赖速度缓慢、版本依赖混乱等问题

• npm5 之后进行很多升级和改进

• npm i yarn -g

• 初始化：yarn init

• 安装包：yarn add axios

• 与npm 区别

四、cnpm工具

• registry 是国外的服务器
• 淘宝的镜像服务器十分钟更新一次，进行备份
• 查看npm镜像：npm config get registry
• 设置npm的镜像：npm config set registry=https://registry.npm.taobao.org
• 安装一个新的工具：npm install cnpm -g
• 设置cnpm的镜像：cnpm config set registry=https://registry.npm.taobao.org

五、npx工具

• 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

六、pnpm 使用和原理

• 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-------建立软连接
  • 快捷方式
  • 找到原文件
  • 再找到磁盘中的数据