AI教你常识之 npm / pnpm / package.json

下面我会以一个初学者友好的方式,通过常见应用场景 + 示例 + 配置文件说明,帮你彻底搞懂 npm / pnpm 的常用命令和 package.json 的作用。


🧩 一、npm 和 pnpm 是什么?

  • npm(Node Package Manager)是 Node.js 默认的包管理工具,用于安装、管理项目依赖。
  • pnpm 是一个更快、更节省磁盘空间的 npm 替代品,使用"硬链接+符号链接"共享依赖,避免重复安装。

✅ 初学者建议:先用 npm 学会基础,再尝试 pnpm(命令几乎一样,性能更好)。


📁 二、核心配置文件:package.json

这是每个 Node.js 项目的"身份证"和"说明书",记录:

  • 项目名称、版本、描述
  • 依赖包(dependencies / devDependencies)
  • 脚本命令(scripts)
  • 入口文件、作者、许可证等

示例 package.json:

json 复制代码
{
  "name": "my-first-app",
  "version": "1.0.0",
  "description": "我的第一个 Node 项目",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1",
    "jest": "^29.7.0"
  },
  "author": "你的名字",
  "license": "MIT"
}

🛠️ 三、常用命令场景 + 示例


🎯 场景1:初始化项目(生成 package.json)

bash 复制代码
# npm
npm init -y

# pnpm
pnpm init -y

-y 表示使用默认配置快速生成。你会得到一个基础的 package.json


🎯 场景2:安装依赖包(生产依赖)

比如安装 Express 框架:

bash 复制代码
# npm
npm install express

# pnpm
pnpm add express

✅ 效果:

  • 下载 expressnode_modules/
  • 自动写入 package.jsondependencies
  • 生成/更新 package-lock.json(npm)或 pnpm-lock.yaml(pnpm)

🎯 场景3:安装开发依赖(只在开发时用)

比如安装 nodemon(自动重启服务):

bash 复制代码
# npm
npm install --save-dev nodemon

# pnpm
pnpm add -D nodemon

✅ 效果:

  • 安装到 node_modules/
  • 写入 devDependencies(不是 dependencies)
  • 开发依赖不会随项目部署到生产环境

🎯 场景4:运行脚本(scripts)

package.json 中定义脚本:

json 复制代码
"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js",
  "test": "jest"
}

运行:

bash 复制代码
# npm
npm run dev
npm start     # "start" 可省略 run
npm test      # "test" 也可省略 run

# pnpm
pnpm dev
pnpm start
pnpm test

💡 小技巧:npm startnpm test 是特殊脚本,可不加 run


🎯 场景5:卸载包

bash 复制代码
# npm
npm uninstall express

# pnpm
pnpm remove express

✅ 效果:

  • node_modules/ 删除
  • package.json 和 lock 文件中移除

🎯 场景6:安装所有依赖(克隆项目后必做)

当你从 GitHub 克隆别人的项目,通常只有 package.json,没有 node_modules

bash 复制代码
# npm
npm install

# pnpm
pnpm install

✅ 效果:

  • 根据 package.json 安装所有依赖
  • 生成 node_modules/(pnpm 会更小更快)

🎯 场景7:全局安装工具(比如 create-react-app)

bash 复制代码
# npm
npm install -g create-react-app

# pnpm
pnpm add -g create-react-app

⚠️ 注意:全局安装的包不会写入当前项目的 package.json,而是安装到全局目录。


🎯 场景8:更新依赖

bash 复制代码
# 查看哪些包可更新
npm outdated
pnpm outdated

# 更新某个包
npm update express
pnpm update express

# 更新所有(谨慎使用)
npm update
pnpm update

🎯 场景9:执行本地安装的命令行工具

比如你本地安装了 eslint,想运行它:

bash 复制代码
# npm
npx eslint .

# pnpm
pnpm exec eslint .
# 或直接
pnpm eslint .

npx / pnpm exec 会优先查找本地 node_modules/.bin/ 中的命令。


📦 四、lock 文件的作用

  • npm : package-lock.json
  • pnpm : pnpm-lock.yaml

它们的作用是:

✅ 锁定依赖的精确版本号,确保团队协作/部署时安装完全一致的依赖。

⚠️ 不要手动修改 lock 文件!它由包管理器自动生成。


🧪 五、完整小项目示例

假设你要做一个 Express 服务:

步骤1:初始化

bash 复制代码
mkdir my-app
cd my-app
npm init -y

步骤2:安装依赖

bash 复制代码
npm install express
npm install --save-dev nodemon

步骤3:创建 index.js

js 复制代码
// index.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

步骤4:配置 scripts

package.json 中添加:

json 复制代码
"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js"
}

步骤5:运行!

bash 复制代码
npm run dev
# 访问 http://localhost:3000

🧭 六、npm vs pnpm 命令对照表

场景 npm pnpm
初始化 npm init -y pnpm init -y
安装生产依赖 npm install xxx pnpm add xxx
安装开发依赖 npm install -D xxx pnpm add -D xxx
卸载 npm uninstall xxx pnpm remove xxx
安装所有依赖 npm install pnpm install
运行脚本 npm run dev pnpm dev
执行本地命令 npx xxx pnpm exec xxx
全局安装 npm install -g xxx pnpm add -g xxx

💡 pnpm 命令更简洁,比如 pnpm dev 等价于 npm run dev


✅ 七、给初学者的建议

  1. 先掌握 npm,它是行业标准,文档丰富。
  2. 再尝试 pnpm,速度快、省空间,适合大项目。
  3. 不要手动改 node_modules,永远用命令管理依赖。
  4. 提交 package.json 和 lock 文件 到 Git,但忽略 node_modules/(写进 .gitignore)。
  5. scripts 是好帮手,把常用命令写进去,一键运行。

📌 附:.gitignore 示例(Node.js 项目)

gitignore 复制代码
node_modules/
.env
.DS_Store
npm-debug.log*
dist/

🎉 总结

你现在已经掌握了:

  • package.json 是什么、怎么写
  • 如何安装、卸载、运行依赖
  • scripts 的妙用
  • npm 与 pnpm 的核心命令对比
  • lock 文件的重要性

从今天开始,你可以自信地初始化、管理、运行 Node.js 项目了!

有问题随时问,编程路上不孤单 😊🚀

相关推荐
wyzqhhhh34 分钟前
less和sass
前端·less·sass
Nan_Shu_6142 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel3 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始4 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible4 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫4 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评4 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner4 小时前
【html】canvas实现一个时钟
前端·html
林烈涛4 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99995 小时前
Unocss
开发语言·前端