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

前端包管理工具

每当我们说起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.lryc.cn/news/621240.html

相关文章:

  • hive加载csv中字段含有换行符的处理方法
  • Spring-cloud-openfeign-设置超时时间
  • 数据结构:用两个栈模拟队列(Queue Using 2 Stacks)
  • 8.14网络编程——TCP通信基础
  • 【22-决策树】
  • 零基础-动手学深度学习-10.3. 注意力评分函数
  • 20道CSS相关前端面试题及答案
  • torch.nn中Sequential的使用
  • 【代码随想录day 20】 力扣 538.把二叉搜索树转换为累加树
  • CMake语法与Bash语法的区别
  • 扩展用例-失败的嵌套
  • 流式数据服务端怎么传给前端,前端怎么接收?
  • jenkins在windows配置sshpass
  • 设计模式笔记_行为型_状态模式
  • 【JavaEE】多线程 -- 线程状态
  • 纸箱拆垛:物流自动化中的“开箱密码”与3D视觉的智能革命
  • 面试题之项目中灰度发布是怎么做的
  • Flink on YARN启动全流程深度解析
  • 会议通信系统核心流程详解(底稿1)
  • Linux软件编程:进程和线程
  • C#面试题及详细答案120道(01-10)-- 基础语法与数据类型
  • Flink Stream API 源码走读 - socketTextStream
  • 2025H1手游市场:SLG领涨、休闲爆发,何为出海新航道?
  • 广告灯的左移右移
  • Day43 复习日
  • FPGA+护理:跨学科发展的探索(五)
  • Kotlin Data Classes 快速上手
  • 【深度学习】深度学习基础概念与初识PyTorch
  • 报数游戏(我将每文更新tips)
  • IPTV系统:开启视听与管理的全新篇章