当前位置: 首页 > ds >正文

前端包管理工具

每当我们说起npm,基本都是构建的问题,那么你了解npm吗?今天就和大家详细说一下npm。

什么是npm?

其实npm本质就是双重身份,最初是nodejs的包管理工具,另外还有一层就是一个巨大的,公共的集中式的软件包仓库,就是我们所说的“注册库”。

为什么要用npm?

npm其实主要有以下几点好处

  1. 依赖管理: 现代软件开发严重依赖第三方库和框架(如 React, Vue, Angular, Express, Lodash, Webpack 等)。npm 让查找、安装、更新和移除这些依赖变得极其简单和自动化。
  2. 代码复用: 开发者可以将通用的功能(如日期处理、HTTP 请求、UI 组件)封装成包,发布到 npm Registry。其他开发者无需重复造轮子,直接安装使用即可,极大提高了开发效率和代码质量。
  3. 生态系统: npm 构建了一个庞大且活跃的开源生态系统。数百万的包覆盖了从前端 UI、后端框架、构建工具、测试库到实用工具等几乎所有开发领域。
  4. 项目标准化: npm 通过 package.json 文件(见下文核心概念)标准化了项目的元数据、依赖项定义和脚本命令,使得项目结构清晰,易于协作、分享和部署。
  5. 构建和任务自动化: npm 脚本 (npm run) 可以方便地定义和执行项目构建(如转译、打包)、测试、启动开发服务器等重复性任务。

以上就是npm 的一个简单介绍,那么npm 的核心是什么呢?就是我们常见的package的包,这个包里面包含package.json的这么一个文件如下图

package.json

在这里插入图片描述
那么我们下来就对上面这个进行剖析;

package.json中有很多的属性,其实必须填写的只有两个,一个是name,另外一个就是version,两个属性组成了一个npm模块的唯一标识。

npm包命名的规则

name就是我们所说的模块的名称,其命名需要遵循官方的一些规范和建议。

  • 包名会成为模块的url,命令行中的一个参数或者一个文件夹的名称,任何非url安全的字符在包名中都不能使用,可以使用validate-npm-package-name的api来检测包名是否合法;
  • 语义化包名,可以帮助开发者更快找到需要的包,能够一定程度上避免意外获取错误的包;
  • 若包名称存在一些符号,则需要将符号去除后不能与现有的包名重复。
  • 如果你的包名与现在的包名字相近也不可以,如果想发,可以发布到你的作用域下面。

温馨提示:我们可以执行npm view packageName可以查看包是否被占用,并可以查看它的一些基本信息,如果没有被使用,则会抛出404

描述信息

{"description": "xxxxxxxxxxxxxxxxx","keywords": ["ant","component","components","design","framework","frontend","react","react-component","ui"]
}

description用于添加模块的描述信息,方便别人了解你的模块
keywords用于给你的模块添加关键字。主要是方便模块检索的,比如你使用npm search的时候,就会到这两个字段中进行匹配。然后进行展示。

author字段和contributors字段,author这个字段是作者,一个author对应一个人,contributors 意思是贡献者信息,一个 contributors 对应多个贡献者,值为数组。

homepage 是指定该仓库的主页,repository 指定模块的代码仓库;

de 在这里插入图片描述

依赖配置

比如说项目可能依赖一个或多个外部的依赖包,根据依赖包的不同用途,我们将它们配置在下面几个属性下,
dependencies、devDependencies、peerDependencies

配置规则

在依赖配置中,一般的配置规则如下:
dependencies

  "dependencies": {"@element-plus/icons-vue": "^2.3.1","animate.css": "^4.1.1","axios": "^1.7.2","color": "^4.2.3","echarts": "^4.8.0","element-plus": "^2.7.6","hotkeys-js": "^3.13.7",},

依赖配置遵循下面几种配置的规则

  • 依赖包名称:VERSION:是一个遵循SemVer规范的版本号配置,npm install 时将到npm服务器下载符合指定版本范围的包;
  • 依赖包名称:DWONLOAD_URL:是一个可下载的tarball压缩包地址,模块安装时会将这个.tar下载并安装到本地;
  • 依赖包名称:LOCAL_PATH:是一个本地的依赖包路径,例如 file:…/pacakges/pkgName。适用于你在本地测试一个npm包,不应该将这种方法应用于线上;
  • 依赖包名称:GITHUB_URL:为 github 的 username/modulename 的写法,例如:ant-design/ant-design,你还可以在后面指定 tag 和 commit id;
  • 依赖包名称:GIT_URL:我们平时clone代码库的 git url,其遵循以下形式
<protocol>://[<user>[:<password>]@]<hostname>[:
http://www.xdnf.cn/news/17970.html

相关文章:

  • 基于wireshark的USB 全速硬件抓包工具USB Sniffer Lite的使用
  • 【lucene】DocumentsWriterFlushControl
  • 负载因子(Load Factor) :哈希表(Hash Table)中的一个关键性能指标
  • C++ 滑动窗口、二分查找
  • Ubuntu 22.04 远程桌面设置固定密码的方法
  • 快手入局外卖?上桌了,又没上
  • 第4节课:多模态大模型的核心能力(多模态大模型基础教程)
  • 18.13 《3倍效率提升!Hugging Face datasets.map高级技巧实战指南》
  • 顺序表插入删除
  • list模拟实现
  • 2025 年电赛 C 题 发挥部分 1:多正方形 / 重叠正方形高精度识别与最小边长测量
  • 36 C++ STL模板库5-string
  • %in%与`==
  • pnpm常用命令;为什么使用pnpm?
  • CV 医学影像分类、分割、目标检测,之【肺结节目标检测】项目拆解
  • 华为6730交换机恢复接口默认配置
  • 疏老师-python训练营-Day45Tensorboard使用介绍
  • elasticsearch冷热数据读写分离!
  • 数学建模-非线性规划模型
  • Linux编程1:进程和线程
  • 目标检测-动手学计算机视觉12
  • 爱情的本质及模拟推演
  • 机器翻译:Hugging Face库详解
  • 模型选择与调优
  • Java 并发新范式:用 Structured Concurrency 优雅收拾多线程烂摊子
  • Linux软件编程:进程和线程
  • 【软考中级网络工程师】知识点之入侵防御系统:筑牢网络安全防线
  • Linux中Samba服务配置与使用指南
  • 计算机毕设大数据选题推荐 基于spark+Hadoop+python的贵州茅台股票数据分析系统【源码+文档+调试】
  • 百川开源大模型Baichuan-M2的医疗能力登顶第一?