npm 与 package.json：依赖和脚本
使用 npm init 初始化项目，添加运行时依赖和开发依赖，编写可复用的 npm 脚本，并了解 semver。
npm 与 package.json：依赖和脚本 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
什么是 npm
npm（Node Package Manager）用于管理项目依赖和脚本。它会读取 package.json 来确定需要安装的内容，并写入 package-lock.json 记录准确版本。npm 注册表中发布的软件包超过两百万个。
初始化项目
npm init -y 会使用默认值创建一个 package.json。-y 标志会接受所有默认选项，不显示提示。
mkdir my-project && cd my-project
npm init -y
# Creates package.jsonpackage.json 文件
主要字段包括：name、version、description、main（入口点）、scripts、dependencies 和 devDependencies。
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "jest"
},
"dependencies": {
"react": "^18.3.0"
},
"devDependencies": {
"vite": "^5.0.0"
}
}安装软件包
npm install package 会将软件包添加到 dependencies。npm install -D package 会将软件包添加到 devDependencies（生产环境不需要）。不带参数运行 npm install 会安装 package.json 中的所有内容。
npm install react react-dom # production dep
npm install -D vite jest eslint # dev deps only
npm install # install all from package.json语义化版本
npm 使用语义化版本：major.minor.patch。^ 前缀允许兼容性更新（主版本相同），~ 前缀只允许修订版本更新。准确版本号不带前缀。
"react": "^18.3.0" // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3" // exactly 1.2.3npm 脚本
在 scripts 字段中定义命令。使用 npm run scriptname 运行命令。内置脚本（test、start）可以直接使用 npm test 或 npm start 运行。
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "jest --coverage",
"lint": "eslint src",
"typecheck": "tsc --noEmit"
}npm run 与 npx
npm run 会运行 package.json 中的脚本。npx 会执行 node_modules 中的软件包，或临时下载并运行该软件包，适合运行一次性命令，例如 npx create-vite@latest。
package-lock.json
package-lock.json 会记录每个已安装软件包的准确版本（以及它们的传递依赖）。请提交此文件，以确保所有开发者和 CI 使用完全相同的版本。切勿手动编辑它。
node_modules 与 .gitignore
切勿提交 node_modules，因为它可能占用数百 MB。请始终将其添加到 .gitignore 中。任何人都可以使用 npm install 将其恢复。
# .gitignore
node_modules/更新和移除软件包
npm update 会在 semver 范围内更新软件包。npm outdated 会显示可以更新的软件包。npm uninstall package 会移除软件包。
npm outdated # show outdated packages
npm update react # update to latest compatible
npm uninstall lodash # remove packagenpm 与 yarn、pnpm 的比较
npm 的替代方案包括：yarn（速度更快、支持工作区和即插即用）、pnpm（节省磁盘空间的符号链接存储、严格的依赖关系管理，以及在多包仓库中最快）。三者的核心命令相似。
# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev快速检查
运行 npm install -D jest 时，-D 标志的作用是什么？
回顾：npm 与 package.json
npm init 会创建 package.json。npm install 会添加依赖。-D 表示 devDependencies。semver 中的 ^ 表示兼容性更新。脚本使用 npm run 运行命令。package-lock.json 会记录确切的版本——请将它提交到版本库中。node_modules 应加入 .gitignore。npx 用于运行一次性软件包命令。
常见问题解答
「npm 与 package.json：依赖和脚本」课时是免费的吗？
是的 — 「npm 与 package.json：依赖和脚本」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「npm 与 package.json：依赖和脚本」这节课中我会学到什么？
使用 npm init 初始化项目，添加运行时依赖和开发依赖，编写可复用的 npm 脚本，并了解 semver。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「npm 与 package.json：依赖和脚本」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- ES 模块：import、export 与动态 import
- npm 与 package.json：依赖和脚本
- Vite：开发服务器与构建
- 打包概念：摇树优化与代码拆分