全栈程序员-前端第一节-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博客

相关推荐
风骏时光牛马9 分钟前
从零到精通AI全栈学习路线
前端
Autumn_ing9 小时前
Design.md生成UI怎么验收?举例运营后台的颜色、状态和数据核对
前端·ui·ai·设计系统·paico·ai生成ui·design.md
keyipatience9 小时前
JavaScript学习(1)书写位置,变量、数据类型、运算符
开发语言·前端·javascript·css·学习
朱涛的自习室10 小时前
我给 Gemini 4 和 DeepSeek 搞了套「末位淘汰」,AI 干活会更猛吗?(Day 3)
android·前端·后端
java1234_小锋12 小时前
【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构
前端·html·html5
鶴哥只手遮天13 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方13 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
小天源13 小时前
智叟云集系统架构解析:从品牌 AI 可见度监测到前后端协同
人工智能·react.js·系统架构·node.js·react·ai监测·ai品牌监测
用户5304297657913 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain13 小时前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai