前端工程化之包管理器

在这里插入图片描述

在这里插入图片描述

这里写目录标题

  • 什么是包
  • 包管理工具
  • 常用的包管理工具
    • npm
      • npm 基本使用
        • 初始化
        • 搜索工具包
        • 下载安装包
        • 导入 npm 包基本流程
        • 生产依赖与开发依赖
        • 全局安装
        • 安装全部依赖
        • 安装指定版本的包
        • 删除依赖包
    • cnpm
      • 全局安装
      • nrm 的使用
    • yarn
      • 全局安装
      • yarn 常用命令
    • pnpm 【推荐使用】
    • 全局安装

什么是包

● 包是一组特定功能的代码集合,英文为:package
● 包,本质上是一种文件系统的集成描述形式,属于模块化的一种超集体现。

包管理工具

集中式管理『包』的应用软件,可以对「包」进行 下载,安装 , 更新 , 删除 , 上传 等操作
借助包管理工具,可以快速开发项目,提升开发效率
包管理工具是一个通用的概念,很多编程语言都有包管理工具

常用的包管理工具

  • npm ( node js 内置 官网)
  • pnpm
  • yarn
  • cnpm

npm

在这里插入图片描述

npm 全称 Node Package Manager ,翻译为中文意思是『Node 的包管理工具』
npm 是 node.js 官方内置的包管理工具,是必须要掌握住的工具
node.js 在安装时会 自动安装 npm
可以通过 npm -v 查看版本号测试,如果显示版本号说明安装成功,反之安装失败

npm 基本使用

初始化
  • 创建一个空目录,然后以此目录作为工作目录 启动命令行工具 ,执行 npm init
  • npm init 命令的作用是将文件夹初始化为一个『包』, 交互式创建 package.json 文件
  • package.json 是包的配置文件,每个包都必须要有 package.json
  • package.json 内容示例:
{
"name": "1-npm", #包的名字
"version": "1.0.0", #包的版本
"description": "", #包的描述
"main": "index.js", #包的入口文件
"scripts": { #脚本配置
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", #作者
"license": "ISC" #开源证书
}

在这里插入图片描述

搜索工具包
  1. 命令行 『npm s / search 包名』
  2. 网站搜索 网址是 https://www.npmjs.com/ (推荐
下载安装包

我们可以通过 npm installnpm i 命令安装包

如:

npm install uniq --save   或   npm i uniq -S

运行之后文件夹下会增加两个资源

  • node_modules 文件夹 存放下载的包

  • package-lock.json 包的锁文件 ,用来锁定包的版本

  • 关于package-lock.json 中的版本限制的说明:

    • ^:锁定主版本号,接受所有以1开头的版本,如:1.0.2等,但不包括2.0.0。
    • ~:允许安装小版本的更新,但不包括次要版本的更改。~1.0.1 允许 1.0.x。
    • >:允许比指定版本更高的版本,但不包括指定版本本身。>1.0.1 允许 1.0.2, 1.1.0, 2.0.0等。
    • <:允许比指定版本更低的版本。<1.0.1 允许 1.0.0 及更早的版本。
    • >=:允许指定版本及更高的版本。>=1.0.1 允许 1.0.1 及其之后的版本。
    • <=:允许指定版本及更低的版本。<=1.0.1 允许 1.0.1 及其之前的版本。
    • *:允许任何版本,这种情况下最不限制,但也最不稳定。
  • 如果没有任何符号,只写版本号,如 1.0.1,这意味着严格要求安装这个特定版本。


导入 npm 包基本流程
  1. 在当前文件夹下 node_modules 中寻找同名的文件夹
  2. 在上级目录中下的 node_modules 中寻找同名的文件夹,直至找到磁盘根目录

生产依赖与开发依赖

我们可以在安装时设置选项来区分 依赖的类型 ,目前分为两类:

类别命令描述说明
生产依赖npm i -S 包名

npm i --save 包名
-S 等效于 --save, -S 是默认选项
包信息保存在 package.json 中 dependencies 属性
开发环境、生产环境都要用的,是生产依赖包。
开发依赖npm i -D 包名

npm i --save-dev 包名
-D 等效于 --save-dev

包信息保存在 package.json 中 devDependencies 属性
只有开发环境用到的包,是开发依赖包。

全局安装

我们可以执行安装选项 -g 进行全局安装

npm install -g 包名
  • 全局安装的命令不受工作目录位置影响
  • 可以通过 npm root -g 可以查看全局安装包的位置
  • 通过 npm list -g 查看全局包的列表
  • 不是所有的包都适合全局安装,通常是命令行工具包,才适合全局安装。

安装全部依赖

在项目协作中有一个常用的命令就是 npm i ,通过该命令可以依据 package.jsonpackagelock.json 的依赖声明安装项目依赖
若只想安装生产依赖,可以使用npm install --prodnpm i --omit=dev

npm i
或
npm install

安装指定版本的包

项目中可能会遇到版本不匹配的情况,有时就需要安装指定版本的包,可以使用下面的命令的

## 格式
npm i <包名@版本号>## 示例
npm i jquery@1.11.2

查看一个包的所有版本

npm view 包名 versions

删除依赖包
## 局部删除
npm remove 包名
npm r 包名
## 全局删除
npm remove -g 包名
npm r -g 包名

以上就是对包管理工具进行了一个初步的介绍,其余的几种包管理工具的核心,概念和使用方法都是大同小异,只要将 npm 掌握了,其它的也就很容易上手了。


cnpm

在这里插入图片描述
cnpm 是一个 npm 的替代工具,cnpm 服务器部署在国内,主要用于在国内优化 npm 包的下载速度,cnpm 由淘宝团队创建和维护,又称:淘宝镜像。

  • npm原始服务器地址:https://registry.npmjs.org/
  • cnpm服务器地址为:https://registry.npmmirror.com/
  • cnpm:官网

全局安装

  • 对于cnpm 的使用有两种方式:
    • 第一种方式:安装 cnpm 包管理器
 npm install cnpm -g --registry=https://registry.npmmirror.com

该种方式是全局安装了 cnpm 包,并且切换了包的下载源,以后全局用 cnpm 命令即可,cnpm兼容npm命令

  • 第二种方式:仅修改npm服务器地址
npm config set registry https://registry.npmmirror.com

该种方式只是修改了npm服务器地址,以后还是用npm命令
npm 原始远程服务器地址为 https://registry.npmjs.org/

查看下载服务器源地址

npm config get registry

nrm 的使用

nrm(NPM Registry Manager)是一个用于管理npm注册表的工具,方便用户在多个npm注册表之间切换。它适用于在不同的npm源之间快速切换

  • 安装
npm install nrm -g
  • 列出可用地址
nrm ls
  • 添加新地址
nrm add 别名 URL
  • 切换到指定地址
nrm use 别名
  • 测试各地址速度
nrm test
  • 删除地址
nrm del 别名

yarn

在这里插入图片描述
yarn是一个快速、可靠的依赖管理工具,由 Facebook 在 2016 年开发,yarn的优势如下:

  • 速度:yarn使用并行安装机制来加快速度。
  • 缓存:yarn会缓存每个下载过的包,无需重复下载。
  • 界面:yarn提供更详细的输出,包括进度条等等。
  • 安全:yarn会通过算法校验每个安装包的完整性。
  • yarn:官网

备注:以上 yarn 的优势,目前最新的 npm 也都基本具备了。所以这些优势如今并不明显

全局安装

npm i yarn -g

备注安装 yarn 后,需要在系统全局配置环境变量

yarn 常用命令

yarn 命令功能描述对应 npm 命令
yarn init初始化包npm init
yarn -v查看版本号npm -v
yarn add 包名安装某个包npm install 包名
yarn add 包名 -D安装某个包(开发依赖)npm install 包名 -D
yarn global add 包名全局安装一个包npm install 包名 -g
yarn global dir查看全局安装位置npm root -g
yarn global list查看全局安装列表npm list -g
yarn install安装全部依赖npm install
yarn remove 包名删除包npm remove 包名
yarn run 别名运行命令别名npm run 别名

pnpm 【推荐使用】

在这里插入图片描述

pnpm(“performant npm”)是一个高效的包管理工具,与npm和yarn类似。它通过硬链接软链接共享依赖库,从而节省磁盘空间和加速安装过程。并且很好的解决了幻影依赖的问题

pnpm:官网
点击了解幻影依赖

全局安装

npm install pnpm -g

在这里插入图片描述


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/10060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我国吻合器市场规模不断扩大 国产化率有所增长

我国吻合器市场规模不断扩大 国产化率有所增长 吻合器是替代手工切除或缝合的一种医疗器械&#xff0c;其工作原理与订书机十分相似&#xff0c;可利用钛钉对组织进行离断或吻合。经过多年发展&#xff0c;吻合器种类逐渐增多&#xff0c;根据手术方式不同&#xff0c;吻合器大…

【JavaEE 初阶(三)】多线程代码案例

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多线程知识 目录 1.前言2.单例模式2.1饿汉方式2.2饿汉方式 3.阻塞队列3.1概念3.2实现 4.定时器4.1概念4.…

支付宝小程序如何去除页面下拉回弹

描述&#xff1a;支付宝小程序页面下拉时会产生回弹&#xff0c;如果页面上有拖拽功能&#xff0c;会有影响 解决方法&#xff1a; 页面xx.config.js中设置&#xff1a;allowsBounceVertical: “NO” 官方文档&#xff1a;https://opensupport.alipay.com/support/FAQ/7110b5d…

WT32-ETH01作为TCP Client进行通讯

目录 模块简介WT32-ETH01作为TCP Client设置电脑作为TCP Server设置连接并进行通讯总结 模块简介 WT32-ETH01网关主要功能特点: 采用双核Xtensa⑧32-bit LX6 MCU.集成SPI flash 32Mbit\ SRAM 520KB 支持TCP Server. TCP Client, UDP Server. UDP Client工作模式 支持串口、wif…

鸿蒙OpenHarmony技术:【Docker编译环境】

Docker环境介绍 OpenHarmony为开发者提供了两种Docker环境&#xff0c;以帮助开发者快速完成复杂的开发环境准备工作。两种Docker环境及适用场景如下&#xff1a; 独立Docker环境&#xff1a;适用于直接基于Ubuntu、Windows操作系统平台进行版本编译的场景。基于HPM的Docker环…

uni-app+vue3 +uni.connectSocket 使用websocket

前言 最近在uni-appvue3websocket实现聊天功能&#xff0c;在使用websocket还是遇到很多问题 这次因为是app手机应用&#xff0c;就没有使用websocket对象&#xff0c;使用的是uni-app的uni.connectSocket 为了方便测试这次用的是node.js一个简单的dom&#xff0c;来联调模拟…

Apache Flume Agent内部原理

Apache Flume Agent内部原理 Apache Flume 是一个可扩展的、分布式的日志收集、聚合和传输系统。在 Flume 中&#xff0c;Agent 是一个独立的进程&#xff0c;负责接收、传输和处理数据。Agent 内部包含多个组件&#xff0c;每个组件都有不同的功能和责任。 1. Source&#xff…

三下乡社会实践投稿攻略在这里

在当今信息爆炸的时代&#xff0c;如何让自己的声音被更多人听到&#xff0c;成为许多人和企业所关心的问题。其中&#xff0c;向各大媒体网站投稿&#xff0c;成为了一种常见的宣传方式。但是&#xff0c;如何投稿各大媒体网站&#xff1f;新闻媒体发文策略又有哪些呢&#xf…

光耦推荐—高速风筒方案中用到哪些光耦型号

高速风筒是现代生活中常见的电器设备&#xff0c;广泛应用于家庭、商业和工业领域&#xff1b;光耦是一种能够将输入信号转换成输出信号的元器件&#xff0c;其作用在于将电气信号转换成光信号&#xff0c;从而实现电路的隔离和保护&#xff1b;采用光耦可实现对风机转速和温度…

【管理咨询宝藏99】离散制造智能工厂战略规划方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏99】离散制造智能工厂战略规划方案 【格式】PDF版本 【关键词】智能制造、先进制造业转型、数字化转型 【核心观点】 - 推进EHS、品质一致性、生…

Failed to start tomcat.service: Unit is not loaded properly: Bad message 如何解决?

错误 “Failed to start tomcat.service: Unit is not loaded properly: Bad message” 通常意味着的 tomcat.service systemd 配置文件存在语法错误或配置不正确。为了解决这个问题&#xff0c;一步步检查和修正这个服务文件。 1. 检查 tomcat.service 文件 首先&#xff0c…

CSS文字描边,文字间隔,div自定义形状切割

clip-path: polygon( 0 0, 68% 0, 100% 32%, 100% 100%, 0 100% );//这里切割出来是少一角的正方形 letter-spacing: 1vw; //文字间隔 -webkit-text-stroke: 1px #fff; //文字描边1px uniapp微信小程序顶部导航栏设置透明&#xff0c;下拉改变透明度 onP…

SQL注入(sqli-labs第一关)

sqli-labs第一关 方法一&#xff1a;手工注入 来到第一关&#xff0c;图上说我们需要一个数字的参数 于是我们先手工注入?id1 and 11 跟?id1 and 12发现页面没有报错 每张截图上面页面中有select查询语句&#xff0c;这是我在第一关的源码中加上了echo "$sql ";…

SSM【Spring SpringMVC Mybatis】——Mybatis(二)

如果对一些基础理论感兴趣可以看这一期&#x1f447; SSM【Spring SpringMVC Mybatis】——Mybatis 目录 1、Mybatis中参数传递问题 1.1 单个普通参数 1.2 多个普通参数 1.3 命名参数 1.4 POJO参数 1.5 Map参数 1.6 Collection|List|Array等参数 2、Mybatis参数传递【#与…

STL——stack容器【栈】

stack基本概念&#xff1a; 概念&#xff1a; 是一种先进后出的数据结构&#xff0c;它只有一个出口 因为只有一端可以调用&#xff0c;所以栈不支持遍历操作 栈的操作&#xff1a; 栈中进入数据称为&#xff1a;入栈(push) 栈中弹出数据称为&#xff1a;出栈(pop) 生活中…

C#编程模式之享元模式

创作背景&#xff1a;各位朋友&#xff0c;我们继续学习C#的编程模式&#xff0c;本文主要介绍享元模式。享元模式是一种结构型设计模式&#xff0c;它主要用于减少创建对象的数量&#xff0c;从而提高程序性能。它通过共享对象的方式来减少内存的使用&#xff0c;特别是系统中…

【多客陪玩】陪玩小程序源码APP+小程序+公众号开发 -源码交付,线下可爆改家政,整理师等功能

简述 随着电竞行业的快速发展&#xff0c;电竞陪玩APP正在逐渐成为用户在休闲娱乐时的首选。为了吸引用户和提高用户体验&#xff0c;电竞陪玩APP开发需要定制一些特色功能&#xff0c;并通过合适的盈利模式来获得收益。本文将为您介绍电竞陪玩APP开发需要定制的特色功能以及常…

深入学习指针3

目录 前言 1.二级指针 2.指针数组 3.指针数组模拟二维数组 前言 Hello,小伙伴们我又来了&#xff0c;上期我们讲到了数组名的理解&#xff0c;指针与数组的关系等知识&#xff0c;那今天我们就继续深入到学习指针域数组的练联系&#xff0c;如果喜欢作者菌生产的内容还望不…

Python GraphQL服务器实现库之tartiflette使用详解

概要 Tartiflette是一个为Python编写的GraphQL服务器实现,它建立在现代异步编程库如asyncio之上,提供了高性能的GraphQL执行环境。Tartiflette专注于提供最佳的开发者体验,支持最新的GraphQL特性。 安装 安装Tartiflette相对简单,但需要依赖于一些系统级的库。 首先,需…

ORACLE ODA一体机存储节点电源故障的分析处理

近期&#xff0c;某用户的ORACLE ODA一体机在例行机房巡检时出现亮黄灯告警&#xff1b;用户反馈次问题后我们立刻通过远程方式&#xff0c;登陆ODA的控制台进行查看&#xff1b; 对于ODA一体机&#xff08;2个计算节点1个存储节点&#xff09;&#xff0c;计算节点可以通过il…