前端工程化之包管理器

在这里插入图片描述

在这里插入图片描述

这里写目录标题

  • 什么是包
  • 包管理工具
  • 常用的包管理工具
    • 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 install 和 npm 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.json 和 packagelock.json 的依赖声明安装项目依赖
若只想安装生产依赖，可以使用npm install --prod 或 npm 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 初阶（三）】多线程代码案例

【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进行通讯

目录 模块简介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编译环境】

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

Docker环境介绍 OpenHarmony为开发者提供了两种Docker环境&#xff0c;以帮助开发者快速完成复杂的开发环境准备工作。两种Docker环境及适用场景如下&#xff1a; 独立Docker环境&#xff1a;适用于直接基于Ubuntu、Windows操作系统平台进行版本编译的场景。基于HPM的Docker环…
阅读更多...
其他编程语言中调用 Python 脚本，如何设置Python脚本的相对路径

其他编程语言中调用 Python 脚本，如何设置Python脚本的相对路径

import os# 假设 script_directory 是你的脚本所在的目录 script_directory os.path.dirname(os.path.abspath(__file__))# 使用 os.path.join 来构建相对路径 relative_path_to_image os.path.join(script_directory, 合并/figure_pic2.png)# 现在你可以使用这个相对路径来加…
阅读更多...
uni-app+vue3 +uni.connectSocket 使用websocket

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

5个 Elasticsearch 核心组件

Elasticsearch 是一个基于 Lucene 的搜索引擎&#xff0c;它提供了分布式、高可用、多租户的能力。Elasticsearch 的核心组件包括节点&#xff08;Node&#xff09;、集群&#xff08;Cluster&#xff09;、索引&#xff08;Index&#xff09;、分片&#xff08;Shard&#xff…
阅读更多...
三下乡社会实践投稿攻略在这里

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

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

Flutter Clipboard实现复制功能

Flutter内置了Clipboard 功能，可以帮助我们完成复制粘贴的功能，比如我们想把“hello flutter”复制到粘贴板，代码如下： TextButton(onPressed: () async {await Clipboard.setData(ClipboardData(text: hello flutter)
阅读更多...
基于SpringBoot设计模式之开端

基于SpringBoot设计模式之开端

文章目录 前言引言开始 前言 为了更好的在项目中&#xff0c;能更加优雅的使用设计模式&#xff0c;比较针对性的解决我们的问题。我将在这个专栏详细的描述23种设计模式&#xff0c;为了与时俱进&#xff0c;我打算通过springboot的形式将23种设计模式全部撸完&#xff01; 引…
阅读更多...
光耦推荐—高速风筒方案中用到哪些光耦型号

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

高速风筒是现代生活中常见的电器设备&#xff0c;广泛应用于家庭、商业和工业领域&#xff1b;光耦是一种能够将输入信号转换成输出信号的元器件&#xff0c;其作用在于将电气信号转换成光信号&#xff0c;从而实现电路的隔离和保护&#xff1b;采用光耦可实现对风机转速和温度…
阅读更多...
【管理咨询宝藏99】离散制造智能工厂战略规划方案

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

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏99】离散制造智能工厂战略规划方案 【格式】PDF版本 【关键词】智能制造、先进制造业转型、数字化转型 【核心观点】 - 推进EHS、品质一致性、生…
阅读更多...
【无标题】QCC 308x 518x 517x增加usb voice 32k采样率

【无标题】QCC 308x 518x 517x增加usb voice 32k采样率

QCC 308x 518x 517x增加usb voice 32k采样率 diff --git a/adk/src/domains/audio/kymera/kymera_usb_voice.c b/adk/src/domains/audio/kymera/kymera_usb_voice.c index 6dd82061..532c4ad8 100755 --- a/adk/src/domains/audio/kymera/kymera_usb_voice.c +++ b/adk/src/dom…
阅读更多...
Failed to start tomcat.service: Unit is not loaded properly: Bad message 如何解决？

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自定义形状切割

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…
阅读更多...
Docker部署RabbitMQ集群（单服务器多端口）

Docker部署RabbitMQ集群（单服务器多端口）

rabbitmq.conf在mq1、mq2、mq3下 ####文件内容 loopback_users.guest false listeners.tcp.default 5672 cluster_formation.peer_discovery_backend rabbit_peer_discovery_classic_config cluster_formation.classic_config.nodes.1 rabbitmq1 cluster_formation.classi…
阅读更多...
SQL注入（sqli-labs第一关）

SQL注入（sqli-labs第一关）

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

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参数传递【#与…
阅读更多...
最新文章

Copyright @ 2022~2023