包管理工具--》npm的配置及使用(一)

news2024/12/25 9:06:16

目录

🌟概念

🌟背景

🌟前端包管理器

🌟包的安装

本地安装

全局安装

🌟包配置

配置文件

保存依赖关系

🌟包的使用


🌟概念

模块(module)

通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块主模块

库(library,简称lib)

以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案

包(package)

包含元数据的库,这些元数据包括:名称、描述、git主页、许可证协议、作者、依赖等等

🌟背景

CommonJS 的出现,使 node 环境下的 JS 代码可以用模块更加细粒度的划分。一个类、一个函数、一个对象、一个配置等等均可以作为模块,这种细粒度的划分,是开发大型应用的基石。

为了解决在开发过程中遇到的常见问题,比如加密、提供常见的工具方法、模拟数据等等,一时间,在前端社区涌现了大量的第三方库。这些库使用 CommonJS 标准书写而成,非常容易使用。

然而,在下载使用这些第三方库的时候,遇到难以处理的问题:

  • 下载过程繁琐
    • 进入官网或 github 主页
    • 找到并下载相应的版本
    • 拷贝到工程的目录中
    • 如果遇到有同名的库,需要更改名称
  • 如果该库需要依赖其他库,还需要按照要求先下载其他库
  • 开发环境中安装的大量的库如何在生产环境中还原,又如何区分
  • 更新一个库极度麻烦
  • 自己开发的库,如何在下一次开发使用

以上问题,就是包管理工具要解决的问题

🌟前端包管理器

本门课程讲解的包管理器 npm:重点 yarn:次重点 其他:了解

几乎可以这样认为,前端所有的包管理器都是基于 npm 的,目前,npm 即是一个包管理器,也是其他包管理的基石

npm 全称为 node package manager,即 node 包管理器,它运行在 node 环境中,让开发者可以用简单的方式完成包的查找、安装、更新、卸载、上传等操作

npm 之所以要运行在 node 环境,而不是浏览器环境,根本原因是因为浏览器环境无法提供下载、删除、读取本地文件的功能。而 node 属于服务器环境,没有浏览器的种种限制,理论上可以完全掌控运行 node 的计算机。

npm 的出现,弥补了 node 没有包管理器的缺陷,于是很快,node 在安装文件中内置了 npm,当开发者安装好 node 之后,就自动安装了 npm,不仅如此,node 环境还专门为 npm 提供了良好的支持,使用 npm 下载的包更加方便了。

npm 由三部分组成:

  • registry:入口
    • 可以把它想象成一个庞大的数据库
    • 第三方库的开发者,将自己的库按照 npm 的规范,打包上传到数据库中
    • 使用者通过统一的地址下载第三方包
  • 官网:https://www.npmjs.com/
    • 查询包
    • 注册、登录、管理个人信息
  • CLI:command-line interface 命令行接口
    • 安装好 npm 后,通过 CLI 来使用 npm 的各种功能

node 和 npm 是互相成就的,node 的出现让 npm 火了,npm 的火爆带动了大量的第三方库的发展,很多优秀的第三方库打包上传到了 npm,这些第三方库又为 node 带来了大量的用户

🌟包的安装

安装(install)即下载包 由于 npm 的官方 registry 服务器位于国外,可能受网速影响导致下载缓慢或失败。因此,安装好 npm 之后,需要重新设置 registry 的地址为国内地址。目前,淘宝 https://registry.npm.taobao.org 提供了国内的 registry 地址,先设置到该地址。设置方式为npm config set registry https://registry.npm.taobao.org。设置好后,通过命令npm config get registry进行检查 

npm 安装一个包,分为两种安装方式:

  1. 本地安装
  2. 全局安装

本地安装

使用命令npm install 包名npm i 包名即可完成本地安装

本地安装的包出现在当前目录下的node_modules目录中

随着开发的进展,node_modules目录会变得异常庞大,目录下的内容不适合直接传输到生产环境,因此通常使用.gitignore文件忽略该目录中的内容 本地安装适用于绝大部分的包,它会在当前目录及其子目录中发挥作用 通常在项目的根目录中使用本地安装 安装一个包的时候,npm 会自动管理依赖,它会下载该包的依赖包到node_modules目录中 如果本地安装的包带有 CLI,npm 会将它的 CLI 脚本文件放置到node_modules/.bin下,使用命令npx 命令名即可调用

全局安装

全局安装的包放置在一个特殊的全局目录,该目录可以通过命令npm config get prefix查看

使用命令npm install --global 包名 或 npm i -g 包名

重要:全局安装的包并非所有工程可用,它仅提供全局的 CLI 工具

大部分情况下,都不需要全局安装包,除非:

  1. 包的版本非常稳定,很少有大的更新
  2. 提供的 CLI 工具在各个工程中使用的非常频繁
  3. CLI 工具仅为开发环境提供支持,而非部署环境

🌟包配置

目前遇到的问题:

  1. 拷贝工程后如何还原?
  2. 如何区分开发依赖和生产依赖?
  3. 如果自身的项目也是一个包,如何描述包的信息

以上这些问题都需要通过包的配置文件解决

配置文件

npm 将每个使用 npm 的工程本身都看作是一个包,包的信息需要通过一个名称固定的配置文件来描述

配置文件的名称固定为:package.json

可以手动创建该文件,而更多的时候,是通过命令npm init创建的

配置文件中可以描述大量的信息,包括:

  • name:包的名称,该名称必须是英文单词字符,支持连接符
  • version:版本
    • 版本规范:主版本号.次版本号.补丁版本号
    • 主版本号:仅当程序发生了重大变化时才会增长,如新增了重要功能、新增了大量的API、技术架构发生了重大变化
    • 次版本号:仅当程序发生了一些小变化时才会增长,如新增了一些小功能、新增了一些辅助型的API
    • 补丁版本号:仅当解决了一些 bug 或 进行了一些局部优化时更新,如修复了某个函数的 bug、提升了某个函数的运行效率
  • description:包的描述
  • homepage:官网地址
  • author:包的作者,必须是有效的 npm 账户名,书写规范是 account <mail>,例如:zhangsan <zhangsan@gmail.com>,不正确的账号和邮箱可能导致发布包时失败
  • repository:包的仓储地址,通常指 git 或 svn 的地址,它是一个对象
    • type:仓储类型,git 或 svn
    • url:地址
  • main:包的入口文件,使用包的人默认从该入口文件导入包的内容
  • keywords: 搜索关键字,发布包后,可以通过该数组中的关键字搜索到包

使用npm init --yesnpm init -y可以在生成配置文件时自动填充默认配置

保存依赖关系

大部分时候,我们仅仅是开发项目,并不会把它打包发布出去,尽管如此,我们仍然需要package.json文件

package.json文件最重要的作用,是记录当前工程的依赖

  • dependencies:生产环境的依赖包
  • devDependencies:仅开发环境的依赖包

配置好依赖后,使用下面的命令即可安装依赖

## 本地安装所有依赖 dependencies + devDependencies
npm install
npm i

## 仅安装生产环境的依赖 dependencies
npm install --production

这样一来,代码移植就不是问题了,只需要移植源代码和package.json文件,不用移植node_modules目录,然后在移植之后通过命令即可重新恢复安装

为了更加方便的添加依赖,npm支持在使用install命令时,加入一些额外的参数,用于将安装的依赖包保存到package.json文件中

涉及的命令如下

## 安装依赖到生产环境
npm i 包名
npm i --save 包名
npm i -S 包名

## 安装依赖到开发环境
npm i --save-dev 包名
npm i -D 包名

🌟包的使用

nodejs 对 npm 支持非常良好

当使用 nodejs 导入模块时,如果模块路径不是以 ./ 或 ../ 开头,则 node 会认为导入的模块来自于 node_modules 目录,例如:

let _lodash = require("lodash");

它首先会从当前目录的以下位置寻找文件

node_modules/lodash.js
node_modules/lodash/入口文件

若当前目录没有这样的文件,则会回溯到上级目录按照同样的方式查找

如果到顶级目录都无法找到文件,则抛出错误

上面提到的入口文件按照以下规则确定

  1. 查看导入包的package.json文件,读取main字段作为入口文件
  2. 若不包含main字段,则使用index.js作为入口文件

 🌟写在最后 

包管理工具--》栏目将详细讲解前端包管理器,包括npm,yarn,及其他包管理器,如果文中出现有瑕疵的地方各位通过评论或者私信联系我,我们一起进步,有兴趣的伙伴可以关注订阅一下:点击查看更多实用技巧与知识

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

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

相关文章

解决windows下git操作提示用户名密码错误的问题

当代码从一个平台切换到另一个平台的时候&#xff0c;需要做两步操作&#xff0c;第一步就是更新git的仓库地址&#xff0c;在项目的.git/config文件里面修改&#xff0c;这一步做完之后&#xff0c;就可以推送代码到新的仓库了&#xff0c;这里就是重点来了。 一般第一次推动代…

数据结构与算法复杂度介绍

目录 一、基本概念 二、时间复杂度 【2.1】时间复杂度概念 【2.2】大O的渐进表示法 【2.3】举例时间复杂度计算 三、空间复杂度 一、基本概念 数据结构&#xff1a;相互之间存在一种或者多种特定关系的数据元素的集合。在逻辑上可以分为线性结构&#xff0c;散列结构、树…

关于 ignore

当使用 insert into xxx 时&#xff0c;可能出现因数据类型错误插入失败的情况&#xff0c;如图所示&#xff1a; 当出现这种情况时&#xff0c;可以通过 ignore 来“强制”插入&#xff0c;提示插入成功 但是这种操作会带来隐患如图&#xff1a; 时间有问题&#xff0c;但是时…

SMU200A/罗德与施瓦茨SMU200A信号发生器

181/2461/8938产品概述 R&S SMU200A信号发生器旨在满足现代通信系统研发及其生产中遇到的所有要求。R&S SMU200A矢量信号发生器不仅将多达两个独立的信号发生器组合在一个只有四个高度单位的机柜中&#xff0c;还提供无与伦比的RF和基带特性。 Rohde & Schwarz S…

如何让Android平台像网络摄像机一样实现GB28181前端设备接入?

技术背景 好多开发者在做国标对接的时候&#xff0c;首先想到的是IPC&#xff08;网络摄像头&#xff09;&#xff0c;通过参数化配置&#xff0c;接入到国标平台&#xff0c;实现媒体数据的按需查看等操作。 像执法记录仪等智能终端&#xff0c;跑在Android平台&#xff0c;…

mysql主从同步步骤(一主一从)

1、主库添加binlog配置&#xff0c;并设置server-id server-id124 # 设置日志格式,日志路径(注意路经需要mysql用户有权限写&#xff0c;默认地址放在datadir的目录下) binlog_formatmixed log-binmysql-bin# 设置binlog清理时间(秒), binlog每个日志文件大小 binlog_expire_l…

线上问诊:数仓开发(三)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 线上问诊&#xff1a;数仓开发(二) 线上问诊&#xff1a;数仓开发(三) 文章目录 系列文章目录前言一、ADS1.交易主题1.交易综合统计2.各医院交易统计3.各性…

行业追踪,2023-09-04

自动复盘 2023-09-04 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

实时操作系统Freertos开坑学习笔记:(四):临界段保护、列表与列表项

前言 废话不多说&#xff0c;直接看主要要探究的问题&#xff1a; 一、临界段代码保护 1.什么是临界段&#xff1f; 图里面说&#xff0c;临界区的代码是不能被打断的&#xff0c;它运行时不能被中断打断&#xff0c;也不能由于非阻塞任务延时而切换到其他任务去。 比如说…

【Java转Go】Go中使用WebSocket实现聊天室(私聊+群聊)

目录 前言功能效果&#xff08;一人分饰多角.jpg&#x1f60e;&#xff09;用户上线、群聊私聊和留言下线 实现思路代码服务端 chat.go 完整代码客户端 html 完整代码 最后 前言 之前在Java中&#xff0c;用 springbootwebsocket 实现了一个聊天室&#xff1a;springbootwebso…

用BAPI创建销售订单条件价格有多个

说明&#xff1a; 在用BAPI_SALESORDER_CREATEFROMDAT2创建销售订单的时候&#xff0c;业务配置的是Z001自动出来的&#xff0c;我在BAPI条件那块赋值更改标识也是U&#xff0c;但是创建出来的单据还是有两条件类型。 解决方法&#xff1a; LOGIC_SWITCH-PRICING G .即可

AP9193 升压恒流驱动芯片 美容护肤仪 美容灯 锂电池升压驱动IC

AP9193 是一款高效率、高精度的升 压型大功率 LED 灯恒流驱动控制芯片。 应用领域 LED 灯杯 电池供电的 LED 灯串 平板显示 LED 背光 恒流充电器控制 大功率 LED 照明 AP9193 内置高精度误差放大器&#xff0c;固 定关断时间控制电路&#xff0c;恒流驱动电路等&#xff…

签到系统怎么设计

背景 相信签到系统大家都有接触过&#xff0c;更多的是使用。但是有思考过这种系统是怎么设计的吗&#xff1f;比方说我统计一下每个月中每天的签到情况&#xff0c;怎么设计呢&#xff1f;今天一篇文章告诉你。 首先&#xff0c;我们熟悉的思维是&#xff1a;我设计一个数据…

电商平台-业务中台-SPU,SKU,SN概念简介

什么是SPU &#xff08;Standard Product Unit)? SPU标准属性是商品基本属性&#xff0c;基本属性中最核心两个属性是品牌和型号&#xff0c;电商平台一般采用 品牌和型号 来确定SPU&#xff08;Standard Product Unit&#xff09;标准化管理单元&#xff0c; 例如:小米 10 就…

Vue3 el-tooltip 根据内容控制宽度大小换行和并且内容太短不显示

el-tooltip 根据长度自适应换行以及显隐 环境 vue: "3.2.37" element-ui: "2.1.8"要求 tooltip 根据内容自动换行如果内容超出显示省略号显示&#xff0c;不超出不显示 tooltip 代码 组件 // ContentTip 组件 <template><el-tooltipv-bind&qu…

excel中的引用与查找函数篇1

1、COLUMN(reference)&#xff1a;返回与列号对应的数字 2、ROW(reference)&#xff1a;返回与行号对应的数字 参数reference表示引用/参考单元格&#xff0c;输入后引用单元格后colimn()和row()会返回这个单元格对应的列号和行号。若参数reference没有引用单元格&#xff0c;…

SOME/IP TTL 在各种Entry 中各是什么意思?有什么限制?

1 服务发现 SOME/IP SD 服务发现主要用于 定位服务实例检测服务实例状态是否在运行发布/订阅行为管理SOME/IP SD 也是 SOME/IP 消息,遵循 SOME/IP 消息格式,有固定的 Message ID、Request ID 以及 Message Type 等。并对 SOME/IP Payload 进行了详细的定义。 SOME/IP SD …

2023-9-4 快速幂求逆元

题目链接&#xff1a;快速幂求逆元 #include <iostream> #include <algorithm>using namespace std;typedef long long LL;LL qmi(int a, int k, int p) {LL res 1;while(k){if(k & 1) res (LL) res * a % p;k >> 1;a (LL) a * a % p;}return res; }i…

能力和结果之间的关系

大家好,这里是大话硬件。 今天这篇文章想和大家分享前段时间的一点工作体会,关于个人能力和工作结果之间的关系。 其实这些感悟是在上周三晚上下班,走在回家的路上,脑海中突然出现这样的体会,回到家里立马写了下来。因为是即时的灵感,完全是因为工作状态触发,立刻写下…

手写RPC框架--4.服务注册

RPC框架-Gitee代码(麻烦点个Starred, 支持一下吧) RPC框架-GitHub代码(麻烦点个Starred, 支持一下吧) 服务注册 服务注册a.添加服务节点和主机节点b.抽象注册中心c.本地服务列表 服务注册 a.添加服务节点和主机节点 主要完成服务注册和发现的功能&#xff0c;其具体流程如下&…