npm 与 package.json

npm（Node Package Manager）是 Node 生态的默认包管理器；package.json 则是每个前端项目的「身份证」——记录依赖、脚本、入口与元数据。无论最终用 Vite 还是 Next.js，几乎都会先遇到这两个概念。

学习目标

• 读懂 package.json 常见字段（name、scripts、dependencies）
• 会用 npm install、npm run 管理依赖与任务
• 理解 lockfile（package-lock.json）为何重要

package.json 核心字段

{
  "name": "my-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "^19.0.0"
  },
  "devDependencies": {
    "vite": "^6.0.0",
    "typescript": "^5.0.0"
  }
}

字段	含义
dependencies	运行时需要的包（打进产物或服务器）
devDependencies	仅开发/构建用（Lint、测试、打包器）
scripts	可复现的命令别名，npm run dev 即执行 dev 脚本
private: true	防止误 npm publish 到公共仓库

常用命令

npm install              # 按 lockfile 安装
npm install lodash       # 加生产依赖
npm install -D eslint    # 加开发依赖
npm run build            # 跑 scripts.build
npm update               # 在 semver 允许范围内升级

javascript-core 的 ES Module 语法（import/export）在源码里写；npm 负责把这些模块从 node_modules 解析进来。

lockfile 与 semver

版本号 ^19.0.0 表示 兼容 19.x 的最新 minor；~ 更保守，只升 patch。

• package-lock.json：npm 生成，锁定完整依赖树
• 团队应 提交 lockfile，保证 CI 与同事机器装到同一棵树
• 删 lock 重装可能引入间接依赖升级——PR 里要 diff lock

node_modules 直觉

import react from 'react'
    → 解析到 node_modules/react/package.json 的 exports/main

路径过深、体积过大是常态；下一课 ft-yarn-pnpm 介绍替代方案。

与框架课的关系

• react-essentials 项目：npm create vite@latest 会生成初始 package.json
• nextjs-essentials：create-next-app 同样依赖 npm 脚本驱动 next dev / next build
• typescript-essentials：typescript 通常放在 devDependencies

练习

• 新建空目录，npm init -y，手动加 scripts.test: "echo ok" 并运行
• 安装一个包，观察 package.json 与 lockfile 变化
• 解释 dependencies 与 devDependencies 各举一个例子

小结

package.json 声明「要什么」；lockfile 锁定「装到了哪一版」；scripts 统一团队命令。 下一课对比 Yarn 与 pnpm 的差异与选型。