【前端】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 分钟前
GitLab使用操作v1.0
学习·gitlab
路有瑶台6 分钟前
MySQL数据库学习(持续更新ing)
数据库·学习·mysql
gqkmiss22 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃27 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰31 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye38 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm40 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
_半夏曲1 小时前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat
zmd-zk1 小时前
flink学习(2)——wordcount案例
大数据·开发语言·学习·flink
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化