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 项目了!

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

相关推荐
mldong1 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排2 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60613 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角4 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!4 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰4 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi5 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen6 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马7 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒7 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端