前端工程化基础（二）：前端包管理工具npm/yarn/cnpm/npx/pnpm

前端大菜鸟_2024-01-28 22:15

前端包管理工具

代码共享方案

  • 创建自己的官网， 将代码放到官网上面
  • 将代码提交到GitHub上面，负责让使用者下载
  • 将代码提交到npm registry上面
    • 下载比较方便，使用npm install xxx即可下载相应的代码
    • npm管理的包

npm配置文件

主要用于存储项目的名称，版本号，描述，用到的依赖等相关信息

  • 初始化一个配置文件
    • 从零开始一个项目，可以通过 npm init -y
    • 通过脚手架进行创建（比如vue的vue create）
json 复制代码 
//从零开始初始化一个配置文件
{
  "name": "package_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json常见的属性

json 复制代码 
{
  // 项目的名称，必填
  "name": "package_demo",
  //项目版本号，必填
  "version": "1.0.0",
  //描述信息，对项目的基本描述
  "description": "",
  //记录当前项目是否是私有的，防止将项目发布到npm仓库中
  "private":true,
  //设置程序入口
  //通过require("axios")，实际上是通过axios文件夹中的package.json文件中的main属性查找文件
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  //作者（发布的时候用到）
  "author": "",
  //开源协议（发布的时候用到）
  "license": "ISC"
}
  • scripts属性
    • scripts属性用于配置一些脚本命令 ，以键值对的形式存在
    • 配置之后我们可以通过 npm run 命令的key执行这个命令
    • npm start 和 npm run start是等价的，对于常用的 start、test、stop、restart可以省略run 直接通过npm xxx的方式运行
json 复制代码 
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  • dependencies属性
    • 里面记录了该项目中安装了哪些依赖，以及依赖的版本
    • 后续的开发者，通过 npm install，查找该属性下面的内容，安装相应的依赖
    • 在开发环境以及生产环境都依赖的库
json 复制代码 
 "dependencies": {
    "axios": "^1.6.7",
    "dayjs": "^1.11.10"
  }
  • devDependencies属性
    • 该属性安装一些仅用于 开发环境的依赖
    • 诸如 webpack babel等打包工具，因为这些依赖仅用于项目打包，并不用于项目运行
    • npm install babel --save-dev或者npm install babel -D进行安装
json 复制代码 
 "devDependencies": {
    "babel": "^6.23.0"
  }
  • peerDependencies属性
    • 一种项目依赖关系，这种关系是 对等依赖 ，也就是该项目运行的前提是，需要有peerDependencies所依赖的包
    • 比如element-plus需要依赖与vue3，若没有安装vue3的依赖，则会进行提示

package-lock.json常见的属性

主要是为了锁定依赖的版本号

  • package.json提供了相应依赖的版本号，这个版本号比较宽泛
  • 而在一些实际开发中，并不希望一些版本依赖的频繁变化，因此在 package-lock.json中会将依赖的版本号固定下来
  • 而在该文件中，也会显示 依赖中依赖其他包的情况：比如axios包，依赖了其余包的情况
json 复制代码 
{
    //项目的名称
  "name": "package_demo",
    //项目的版本
  "version": "1.0.0",
    //lock文件的版本
  "lockfileVersion": 1,
    //使用requires来跟踪模块的依赖关系
  "requires": true,
    //项目的依赖
  "dependencies": {
      //项目依赖的名称
    "axios": {
        //实际安装的axios版本
      "version": "1.6.7",
        //用来记录下载地址，registry仓库中的位置
      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
        //用来从缓存中获取索引
      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
        //记录当前模块所需的依赖，即axios所需要的依赖
      "requires": {
        "follow-redirects": "^1.15.4",
        "form-data": "^4.0.0",
        "proxy-from-env": "^1.1.0"
      }
    },
  }
}

依赖版本的管理

semver版本规范 x.y.z 1.0.0

  • X主版本号：发生了重大改变的时候，可能不会兼容前面的API
  • Y次版本号：在主版本的功能上，增加了新的功能
  • Z修订号：当修正了版本的bug
  • X.Y.Z：此种写法，会安装固定的版本
  • ^X.Y.Z ：此种写法，会安装最新的 Y和Z版本，只要YZ发生了变化，就会安装最新的
  • ~X.Y.Z ：此种写法，会安装最新的 Z版本，只要Z发生了变化，就会安装最新的

npm install命令

分为局部安装和全局安装

  • 安装 npm包分为两种情况

    • **全局安装（global install）：**npm install webpack -g，全局安装后，所有项目都可以使用
    • 项目（局部）安装：npm install axios，仅可以在当前项目中使用

  • 通常使用全局安装的都是一些工具包，比如 yarn、webpack ，并不是 axios、express、koa等库文件

  • 而在局部安装的时候，又分为开发依赖和生产依赖

js 复制代码 
//安装的开发和生产依赖
npm install axios
npm i axios

//安装开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack -D

//根据package.json中安装依赖
npm install

原理

  • 在没有 package-lock.json文件的时候 ，运行npm install命令
    • 首先会构建依赖关系
    • 从registry仓库中下载压缩包，并将压缩包放到缓存文件中
    • 将下载的压缩包解压到node_modules文件夹中，完成安装，同时生成package-lock.json文件
  • 若这时候将 node_modules 文件夹删除，但是存在了 package-lock.json 文件，运行npm install命令
    • 首先会检查依赖的一致性：比如某个依赖是否在原先版本的基础上增加了别的依赖，若增加了，就会重新构建依赖关系
    • 若依赖一致，则会查找本地的缓存，：若没有查找到缓存，就会去registry仓库中下载
    • 若查找到了缓存，就会将缓存的压缩包下载，并解压到node_modules文件夹中
  • 支持缓存策略主要是从npm5只会开始的，主要是来自yarn的压力

npm 其他命令

可以去查找npm的官网

  • 卸载某个依赖包

npm uninstall xxx

  • 强制重新build

npm run rebuild

  • 清除缓存

npm cache clean

yarn工具

与npm的作用是相同的

  • 早期由 Google FaceBook等多家公司联合推出来的
  • 当时npm存在很多缺点 下载速度慢，依赖管理混乱
  • 在npm的基础上，运行 npm install yarn -g全局安装yarn
  • 在用法上与npm基本相同，不同的是安装单个依赖时
    • npm使用npm install xxx
    • yarn使用yarn add xxx
  • 在移除某个依赖的时候
    • npm使用npm uninstall xxx
    • yarn使用 yarn remove xxx

cnpm工具

  • 由于一些特殊的原因，某些情况无法很好的从registry中下载一些包
  • 而 淘宝有相关的镜像地址，我们可以将仓库下载地址，改成淘宝的镜像地址
  • 但是，有些人不希望将npm的仓库地址改掉，所以我们可以安装 cnpm
  • 运行 npm install cnpm -g全局安装 cnpm
  • 运行 cnpm config set registry https://registry.npm.taobao.org更改cnpm的镜像
  • 运行 npm config get registry查看仓库地址

npx工具

npx工具主要是使用一些局部命令

  • 比如我们在项目中安装了 webpack，当我们想查看webpack版本的时候，输入 webpack --version，会出现以下错误
  • 这是因为，当我们安装了某些工具时候，运行该工具的相关命令，会从全局去查找相关命令，发现没有，就会报错
  • 而 npx工具，就解决了此问题 ，进入安装了 webpack工具的项目目录中，输入 npx webpack --version即可实现
  • 这是因为 npx工具 就是在局部使用命令，会在项目中的node_modules/.bin目录下去查找相应的执行文件

  • 若不使用npx工具，也可以使用以下两种办法

    • 一是进入到 **node_modules/bin文件夹下面，运行 webpack --version**命令

    • 二是修改 package.json中script中的内容

      json 复制代码 
      "scripts": {
    "start": "node test.js",
    "build": "webpack xxx.js",
    //在package文件中，使用命令，首先会在node_modules目录下查找，而不是去全局查找
    "webpack":"webpack --version"
  },

npm发布自己的包

  • 在自己要发布的代码目录下输入 npm login命令，用于登录自己的npm账号
  • 修改 package.json文件
  • 输入 npm publish即可完成发布
  • 之后就可以让所有人都使用你的包了
  • 当我们更新自己的工具包时候
    • 首先在package.json中更改版本号
    • 之后再运行 npm publish即可
  • 删除发布的包 npm unpublish（一般不会主动删除）
  • 让发布的包过期 npm deprecate

pnpm

  • 前面我们学习的包管理工具，存在一个十分大的痛点
  • 比如，我们创建一个项目，需要npm install许多不同的包，我们电脑上可能同时存在几十个项目
  • 而这些项目的包很有可能都是重复的，会占用不小的电脑内存
  • 而 pnpm就解决了这个问题

什么是pnpm

可以理解成performant npm

  • 具有以下特点
    • 快速：比其他的包管理工具快2倍
    • 高效：
    • 支持monorepos
    • 严格

硬链接和软连接的概念

想要弄清楚pnpm的原理，需要理解硬链接和软连接的概念

  • 硬链接
    • 是电脑文件系统中的多个文件平等的共享一个文件存储单元
    • 删除一个文件名字后，还可以用其他的名字继续访问该文件
  • 软连接
    • 符号连接是一类特殊的文件
    • 其 包含一条以绝对路径或相对路径的形式指向其他文件或目录的引用

pnpm到底做了什么

  • 其他包管理工具，当创建了几十个项目，就会有几十个包的依赖
  • 如果是pnpm，依赖包将 存放再一个统一的位置
    • 如果 同一依赖包使用相同的版本 ，那么 磁盘上只有这个依赖包的一份文件
    • 如果 同一依赖包使用不同的版本，那么仅有版本之间不同的文件会被存储起来
    • 所有文件 都保存再硬盘上的同一位置
      • 当引用依赖时，项目中包含的依赖文件，会硬链接到此位置，不会占用额外的空间

pnpm创建的非扁平的 node_modules目录

  • 首先，先要了解一下什么是扁平的 node_modules 目录
    • 我们在使用npm下载依赖时候，会将这个包地其他依赖，都会存储到 node_modules目录下
    • 比如，我们下载 webpack包 ，而 webpack 有可能依赖了ajv 等等很多包，这些包都会被存储到 node_modules目录下
    • 这样做地目的是，为了防止有重复地依赖包
  • 而pnpm创建地是一个 非扁平化地node_modules目录
    • 在node_modules目录下，实际上是axios的软连接
    • 而 axios实际文件放在了.npm文件夹中

pnpm的安装和使用

npm命令 pnpm等价命令
npm install pnpm install
npm install xxx pnpm add xxx
npm uninstall xxx pnpm remove xxx
npm run xxx pnpm xxx
  • 若又有一些包不再使用，可以使用 pnpm store prune裁剪不使用的包
相关推荐
栈老师不回家15 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙20 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
一颗松鼠25 分钟前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解