【前端】Node.js 项目依赖管理的基础(一)

详解:

1. npm
  • 定义:npm(Node Package Manager)是 Node.js 的包管理工具,用于安装、管理和共享 JavaScript 代码包。
  • 功能
    • 安装和卸载依赖包。
    • 管理项目的依赖关系。
    • 运行项目的脚本。
    • 发布和分享自己的包。
2. package.json
  • 定义package.json 是一个 JSON 文件,包含有关项目的元数据和依赖项的信息。
  • 内容
    • 项目名称、版本、描述等基本信息。
    • 依赖项dependencies)和开发依赖项(devDependencies)的列表,指定需要安装的包及其版本范围。
    • 脚本 (如 starttest 等),用于定义常用命令。
  • 作用
    • 作为项目的配置文件,npm 根据此文件管理项目的依赖和执行脚本。
3. package-lock.json
  • 定义package-lock.json 是一个自动生成的文件,记录了当前安装的依赖包的确切版本及其依赖树。
  • 内容
    • 包的具体版本、来源和依赖关系的详细信息。
  • 作用
    • 确保项目的依赖版本一致性,避免因依赖的更新而导致的问题。
    • 使得在不同环境中(如开发、生产)安装依赖时能够得到相同的结果。
  • 注意:每当你安装或更新依赖时,npm 会自动更新此文件。
4. node_modules
  • 定义node_modules 是一个文件夹,包含项目中所有安装的依赖包及其子依赖。
  • 内容
    • 具体的包文件和代码,按照依赖关系嵌套存放。
  • 作用
    • 提供项目运行所需的所有依赖,npm 在安装时会将依赖的代码放入此文件夹。
相互关系
  • npm 使用 package.json 来了解项目的依赖和脚本,并在安装时参考此文件。
  • 当执行 npm install 时:
    • npm 根据 package.json 中列出的依赖安装相应的包,并在 node_modules 中创建这些包的文件。
    • 同时,npm 会生成或更新 package-lock.json,记录每个依赖的确切版本和结构。
  • package-lock.json 确保在不同的开发环境或生产环境中,安装相同的依赖版本,避免不一致的问题。
总结
  • npm 是包管理工具。
  • package.json 是项目的配置文件,定义了依赖和脚本。
  • package-lock.json 记录了确切的依赖版本,确保一致性。
  • node_modules 是实际存放依赖包的地方。

关系:

┌───────────┐

│ npm │

│ (包管理器) │

└─────┬─────┘

│ 使用

┌───────────────┐

│ package.json │

│ (配置文件) │

└─────┬─────────┘

│ 生成

┌───────────────────┐

│ package-lock.json │

│ (锁定版本文件) │

└─────┬─────────────┘

│ 包含的依赖

┌─────────────┐

│ node_modules│

│ (依赖文件夹)│

└─────────────┘

总结:

项目 定义 作用 关系
npm Node Package Manager,Node.js 的包管理工具 安装、管理和共享 JavaScript 代码包 使用 package.json 管理依赖和执行脚本
package.json 项目的配置文件,包含项目的元数据和依赖项 定义项目的基本信息、依赖关系和脚本 npm 根据此文件安装依赖并生成或更新 package-lock.json
package-lock.json 记录确切的依赖版本及其依赖树的文件 确保依赖版本一致性,避免版本冲突 由 npm 根据 package.json 生成或更新
node_modules 存放项目中所有安装的依赖包的文件夹 提供项目运行所需的所有依赖 包含由 package.jsonpackage-lock.json 指定的依赖
相关推荐
前端小小王3 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发13 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
_oP_i28 分钟前
HTTP 请求Media typetext/plain application/json text/json区别
网络协议·http·json
娃哈哈哈哈呀35 分钟前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
爱吃西瓜的小菜鸡2 小时前
【C语言】判断回文
c语言·学习·算法
小A1593 小时前
STM32完全学习——SPI接口的FLASH(DMA模式)
stm32·嵌入式硬件·学习
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
岁岁岁平安3 小时前
spring学习(spring-DI(字符串或对象引用注入、集合注入)(XML配置))
java·学习·spring·依赖注入·集合注入·基本数据类型注入·引用数据类型注入
武昌库里写JAVA3 小时前
Java成长之路(一)--SpringBoot基础学习--SpringBoot代码测试
java·开发语言·spring boot·学习·课程设计