【前端】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 小时前
cJSON使用
json
码界奇点4 小时前
Python从0到100一站式学习路线图与实战指南
开发语言·python·学习·青少年编程·贴图
老前端的功夫5 小时前
Vue 3 性能深度解析:从架构革新到运行时的全面优化
javascript·vue.js·架构
天天扭码5 小时前
如何实现流式输出?一篇文章手把手教你!
前端·aigc·ai编程
前端 贾公子6 小时前
vue移动端适配方案 === postcss-px-to-viewport
前端·javascript·html
YJlio6 小时前
Active Directory 工具学习笔记(10.8):AdInsight——保存与导出(证据留存、共享与二次分析)
数据库·笔记·学习
GISer_Jing7 小时前
AI营销增长:4大核心能力+前端落地指南
前端·javascript·人工智能
明远湖之鱼7 小时前
一种基于 Service Worker 的渐进式渲染方案的基本原理
前端
前端小端长8 小时前
Vue 中 keep-alive 组件的原理与实践详解
前端·vue.js·spring