【前端】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 指定的依赖
相关推荐
沪飘大军18 小时前
ll-llm:一个零依赖、可插拔的 OpenAI 兼容 LLM 代理
javascript
kyriewen19 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H20 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
山河木马20 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
MartinYeung520 小时前
[论文学习]大语言模型安全综述:攻击、防御、对齐、度量与护栏的深度解析
学习·安全·语言模型
陆枫Larry21 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
AOwhisky21 小时前
Python 学习笔记(第三期)——流程控制:条件判断与循环结构
运维·笔记·python·学习·云原生·流程控制·循环
心中有国也有家21 小时前
AtomGit Flutter 鸿蒙客户端:白噪音场景的视觉设计
学习·flutter·华为·harmonyos
Appthing21 小时前
在 TanStack Start 中使用 VitePWA 的正确配置
javascript
心中有国也有家21 小时前
AtomGit Flutter 鸿蒙客户端:呼吸练习的完整生命周期
学习·flutter·华为·harmonyos