全栈程序员-前端第一节-npm 是什么?

npm = Node Package Manager(Node 包管理器)

简单理解

npm 是 JavaScript/Node.js 的包管理工具,用于:

  • 安装和管理 JavaScript 库/工具
  • 管理项目依赖
  • 运行项目脚本

类比理解

  • npm ≈ Python 的 pip、Java 的 Maven、Go 的 go mod
  • npm 仓库 ≈ 应用商店(存放各种 JavaScript 包)

npm 的主要功能

1. 安装包
复制代码
npm install vite        # 安装 vite 包
npm install react       # 安装 react 库
npm install -D typescript  # 安装开发依赖(-D 表示 devDependencies)
2. 管理项目依赖

项目中的 package.json 文件记录依赖:

复制代码
{
  "name": "my-project",
  "dependencies": {
    "react": "^18.0.0",      // 生产依赖
    "vite": "^5.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0"   // 开发依赖
  }
}
3. 运行脚本

在 package.json 中定义脚本:

复制代码
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

然后运行:

npm run dev # 执行 scripts.dev 中的命令

npm run build # 执行 scripts.build 中的命令

npm 的组成部分

  1. npm 命令行工具:安装 Node.js 时自带
  1. npm 仓库:https://www.npmjs.com(全球最大的 JavaScript 包仓库)
  1. package.json:项目配置文件
  1. node_modules:存放已安装的包

常见 npm 命令

复制代码
npm install          # 安装 package.json 中的所有依赖
npm install <包名>    # 安装指定包
npm uninstall <包名>  # 卸载包
npm run <脚本名>      # 运行 package.json 中的脚本
npm init             # 初始化项目,创建 package.json
npm list             # 查看已安装的包
npm update           # 更新包

npm 与 Node.js 的关系

  • Node.js:JavaScript 运行时环境
  • npm:Node.js 自带的包管理器
  • 安装 Node.js 时会自动安装 npm

实际例子

当你创建一个前端项目时:

复制代码
# 1. 初始化项目
npm init -y

# 2. 安装 Vite
npm install -D vite

# 3. 在 package.json 中添加脚本
# "scripts": { "dev": "vite" }

# 4. 运行开发服务器
npm run dev

文件位置:package.json

它们位于 package.json 文件的 scripts 字段中。示例:

复制代码
{
  "name": "@vitejs/test-wasm",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {                    ← scripts 字段开始
    "dev": "vite",                ← "dev" 在这里,第 7 行
    "build": "vite build",        ← "build" 在这里,第 8 行
    "preview": "vite preview"
  }                               ← scripts 字段结束
}

下一节vite学习 全栈程序员-前端第二节- vite是什么?-CSDN博客

相关推荐
春涧草茶39 分钟前
慢就是快16-1协程
开发语言·前端·python
Oiiouui1 小时前
linux服务器部署Logto后端与对应前端的实现
linux·服务器·前端·后端
前端小D1 小时前
JS核心底层
前端·javascript
律宏阔1 小时前
Taro 4 项目从 npm 迁移到 pnpm 踩坑实录
前端·微信小程序·taro
用户30816998764851 小时前
同一句话问 AI 15 次,答案 15 个:temperature 0 实测也不稳
前端
SameX1 小时前
ArkTS 做 5 态数据流 —— 咖啡电量的代谢状态机怎么驱动 UI
前端
Dovis(誓平步青云)1 小时前
启元 T1 Pro 人机相声搭档:语音-触摸双通道的启元机器人节奏引擎设计
开发语言·前端·javascript·microsoft·交互
爱吃烧烤的技术渣1 小时前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
Dumbness1 小时前
毕设后台导出 CSV 的 4 个坑:date 字段漏了公式防护,搜索框输入 % 能扫全表
node.js·express
MetWeave1 小时前
风的三十年:一个机场的风在变小吗:10,958 天的账(《风不是一个数》系列第 6 篇)
前端·数据可视化