4、Node.js与npm生态：环境搭建、package.json管理、npm scripts编写、npx使用、依赖管理策略

聊到前端工程化，Node.js 和 npm 就是绕不开的基石。说实话，我见过不少新手直接跳过这步，结果后面被各种环境问题折磨得够呛。这一章，咱们就把这块硬骨头啃下来。

4.1 环境搭建：别小看这一步

Node.js 的安装其实没啥技术含量，但版本选择是个坑。我个人习惯用 nvm（Node Version Manager）来管理多版本。为什么？因为不同项目可能依赖不同版本的 Node，你想想看，一个老项目用 Node 14，新项目用 Node 18，来回切换多麻烦。

安装 nvm 后，几条命令就能搞定：

# 安装指定版本
nvm install 18.16.0

# 切换版本
nvm use 18.16.0

# 设置默认版本
nvm alias default 18.16.0

我在项目中遇到过最头疼的事：同事用 Node 16 开发，CI 环境却是 Node 14，结果跑构建时报错说某个 API 不支持。嗯，从那以后我强制团队统一用 nvm，并在项目根目录放一个 .nvmrc 文件，写上 18.16.0。这样谁进来都知道该用哪个版本。

4.2 package.json 管理：项目的身份证

package.json 说白了就是项目的元数据文件。它告诉 npm 这个项目叫什么、依赖什么、怎么运行。我见过有人把 package.json 写得乱七八糟，依赖版本全写 *，结果一升级就崩。

这里有几个关键字段，你得记牢：

字段	作用	我的建议
name	项目名称	用小写字母加连字符，比如 my-awesome-app
version	版本号	严格遵循 semver 语义化版本
scripts	可执行脚本	后面会详细讲
dependencies	运行时依赖	只放生产环境需要的包
devDependencies	开发时依赖	构建工具、测试框架放这里

4.3 npm scripts 编写：自动化从这里开始

npm scripts 是前端工程化的核心。说白了，它就是帮你把重复的命令封装起来。比如你每次都要跑 webpack --mode production，写个脚本就省事了。

一个典型的 scripts 配置长这样：

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production",
  "lint": "eslint src/",
  "test": "jest",
  "precommit": "npm run lint && npm run test"
}

这里有个小细节：pre 和 post 钩子。比如你定义了 prebuild，那运行 npm run build 时会先执行 prebuild。我曾经用这个机制在构建前自动清理旧文件，省了不少事。

4.4 npx 使用：临时工的好帮手

npx 是 npm 5.2 之后自带的一个工具。它的作用很简单：帮你执行 node_modules 里的命令，或者临时下载一个包来用，用完就删。

举个例子，你想用 create-react-app 创建一个新项目，但又不想全局安装它：

npx create-react-app my-app

npx 会先检查本地有没有这个包，没有就去下载，执行完再清理。我个人习惯用 npx 来跑一些不常用的工具，比如 npx eslint、npx prettier。这样既不用全局安装，也不会污染环境。

为什么会这样？因为全局安装的包多了，版本冲突是常有的事。npx 完美解决了这个问题——每次都用最新的，或者指定版本。

4.5 依赖管理策略：别让版本成为噩梦

依赖管理是前端工程化里最头疼的问题之一。我刚开始做项目时，直接 npm install 一把梭，结果某天升级了一个小版本，整个项目崩了。嗯，从那以后我学乖了。

这里有几个策略，你照着做基本不会踩坑：

• 锁定版本：用 package-lock.json 或 yarn.lock 锁定依赖版本。别问为什么，问就是血的教训。
• 区分依赖类型：运行时依赖放 dependencies，开发工具放 devDependencies。别混着放。
• 定期更新：用 npm outdated 查看哪些包有更新，再用 npm update 安全升级。
• 使用 --production：CI 环境安装依赖时，加上 --production 只装生产依赖，能省不少时间。

最后说一句，依赖管理没有银弹。你想想看，一个项目可能有几百个依赖，每个依赖又有自己的依赖，这就像一张巨大的网。我的建议是：能少装就少装，能锁定就锁定，能定期更新就别拖。

好了，Node.js 和 npm 生态这块就聊到这儿。下一章咱们会深入 CI/CD 流水线的搭建，到时候这些知识都会用上。