【前端】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 指定的依赖
相关推荐
一尘之中2 小时前
从C语言底层设计到系统架构评估:软件架构知识体系全景
学习·系统架构·ai写作
NiceCloud喜云2 小时前
Opus 4.8 的 Effort Control 怎么选:Low 到 Max 五档策略
android·java·大数据·前端·c++·python·spring
wordbaby3 小时前
React Native + RNOH:跨页面数据回传的最佳实践与避坑指南
前端·react native
GISer_Jing3 小时前
Three.js着色器编译机制深度解析
javascript·webgl·着色器
丷丩3 小时前
MapLibre GL JS第22课:查看本地GeoJSON
前端·javascript·map·mapbox·maplibre gl js
油炸自行车3 小时前
Claude Code 错误:API Error: 400 Failed to deserialize the JSON body into the
开发语言·javascript·json·trae·claude code·api error 400
星夜夏空994 小时前
FreeRTOS学习(4)——内存映射
数据库·学习·mongodb
Front思4 小时前
AI前端工程师需要具备能力+
前端·人工智能·ai
不羁的木木4 小时前
ArkWeb实战学习笔记05-综合实战:构建混合应用
笔记·学习·harmonyos
橙橙笔记4 小时前
Python的学习第一部分
python·学习