npm 入门教程

一、什么是 npm

在学习前端开发或者 Node.js 开发时，几乎绕不开一个工具，那就是 npm。
npm 的全称是 Node Package Manager，也就是 Node 包管理器。它是 Node.js 官方默认提供的包管理工具，主要作用是帮助开发者安装、管理和发布各种 JavaScript 包。

简单来说，npm 就像一个“软件仓库 + 安装工具”的组合。
以前如果我们想使用别人写好的代码，可能需要自己去网上下载文件，再手动复制到项目里，不仅麻烦，而且不方便维护。而有了 npm 之后，只需要一条命令，就可以快速把别人发布好的包安装到本地项目中。

如今，npm 不仅服务于 Node.js 生态，也广泛应用于前端开发中。像 React、Vue、TypeScript、Vite、Webpack 等常见工具和框架，基本都是通过 npm 来安装和管理的。因此，掌握 npm 的基础用法，对于任何想学习现代 JavaScript 开发的人来说都非常重要。

二、npm 的作用

npm 的核心作用主要有以下几个方面：

1. 安装依赖包

开发项目时，很多功能不需要自己从零开始写，比如发送网络请求、处理日期、操作文件、构建前端页面等。这时候就可以直接使用别人已经写好的包，通过 npm 下载安装。

例如：

这条命令就会把 axios 这个包安装到当前项目中。

2. 管理项目依赖

一个项目通常会依赖很多第三方包，如果全靠手动记录会非常混乱。npm 会把这些依赖记录到 package.json 文件中，方便以后统一管理。

3. 执行脚本命令

npm 不仅能安装包，还可以执行项目中定义好的脚本命令。比如启动项目、打包项目、运行测试等，都可以通过 npm 来统一执行。

例如：

4. 发布自己的包

如果开发者写了一个通用工具，也可以通过 npm 发布到公共仓库，供其他人下载安装使用。这也是 npm 生态越来越庞大的原因之一。

三、安装 npm

npm 并不需要单独安装，因为它通常会随着 Node.js 一起安装。
也就是说，只要安装了 Node.js，一般就已经自带 npm 了。

安装完成后，可以在终端中输入以下命令检查是否安装成功：

如果能正确显示版本号，就说明 Node.js 和 npm 都已经安装成功。

例如：

其中：

• node -v 用来查看 Node.js 版本
• npm -v 用来查看 npm 版本

四、npm 的基本工作原理

要理解 npm，首先要明白它和项目目录之间的关系。

当我们在一个项目中使用 npm 时，通常会看到几个重要的文件或文件夹：

1. package.json

这是项目的核心配置文件之一，用来记录项目名称、版本、依赖、脚本命令等信息。

例如：

2. node_modules

这是 npm 安装依赖后生成的文件夹，里面存放项目所需的所有包。
一般来说，这个目录会很大，因为依赖之间还会有自己的依赖。

3. package-lock.json

这个文件会记录更精确的依赖安装信息，用来保证不同环境下安装结果尽可能一致。
简单理解，它像是依赖的“锁定清单”。

五、初始化一个 npm 项目

在开始使用 npm 管理项目之前，通常需要先初始化项目。

进入一个空文件夹后，执行以下命令：

执行后，npm 会询问一系列问题，比如项目名称、版本号、描述、入口文件等。你可以逐个填写，也可以直接一路回车使用默认值。

如果想更快一点，可以使用：

这条命令会直接生成一个默认的 package.json 文件，非常适合快速开始。

六、安装包的常见方式

1. 安装普通依赖

例如：

安装后，express 会被写入 dependencies 中。
这类依赖通常是项目运行时需要用到的。

2. 安装开发依赖

例如：

或者：

开发依赖一般用于开发阶段，比如打包工具、测试工具、代码检查工具等，运行生产环境时不一定需要。

3. 全局安装

例如：

全局安装通常用于命令行工具，这样安装后可以在系统任意位置直接使用对应命令。

不过现在很多项目更推荐局部安装，然后通过 npx 或 npm scripts 调用，这样版本更容易统一。

七、卸载和更新包

1. 卸载包

例如：

执行后，npm 会删除对应包，并更新 package.json。

2. 更新包

例如：

如果不指定包名，也可以更新当前项目中允许范围内的依赖。

3. 查看过时的包

这个命令可以帮助我们查看当前依赖是否有更新版本。

八、npm run 的基本用法

在实际开发中，npm run 非常常用。

我们可以在 package.json 中写入脚本，例如：

然后在终端中执行：

这样做的好处是：

• 命令统一管理
• 团队协作时更容易理解
• 不需要记住很长的终端命令

对于 start 这种特殊脚本，有时还可以直接写：

九、package.json 中常见字段

package.json 是 npm 项目的核心文件，因此了解其中常见字段很有必要。

1. name

项目名称。

2. version

项目版本号，通常遵循语义化版本规则，例如 1.0.0。

3. description

项目描述信息。

4. main

项目入口文件。

5. scripts

定义可执行脚本命令。

6. dependencies

生产环境依赖。

7. devDependencies

开发环境依赖。

一个简单示例如下：

十、npm install 背后做了什么

很多初学者只会用 npm install，但不知道它具体干了什么。实际上，这条命令会完成几件事：

1. 读取 package.json
2. 下载对应依赖包
3. 安装到 node_modules 目录
4. 生成或更新 package-lock.json

如果项目已经有 package.json，那么直接执行：

npm 就会自动安装项目所需的全部依赖。
这也是为什么很多开源项目拉下来后，第一步总是先执行 npm install。

十一、npm 和 npx 的区别

很多人刚接触时容易把 npm 和 npx 混淆。

npm

主要用于 安装和管理包。

npx

主要用于 临时执行包中的命令。

例如：

这表示直接运行 create-vite，即使你没有全局安装它，也可以临时调用。

因此，npm 更像“安装工”，而 npx 更像“执行工”。

十二、一个简单示例

下面通过一个简单例子，演示 npm 的基本使用流程。

第一步：创建项目文件夹

第二步：初始化项目

第三步：安装一个包

第四步：创建 index.js

第五步：运行代码

如果终端成功输出结果，就说明 npm 包已经正常安装并使用成功了。

十三、使用 npm 时的注意事项

1. 不要随意删除 package-lock.json

很多初学者看到这个文件不懂，就直接删掉。实际上它对依赖版本锁定很重要，尤其是在团队协作中。

2. 一般不要把 node_modules 上传到仓库

因为这个目录太大，而且可以通过 npm install 重新生成。通常会在 .gitignore 中忽略它。

3. 注意全局安装和本地安装的区别

不是所有工具都适合全局安装。对于项目依赖，通常更推荐安装到项目本地。

4. 看清楚报错信息

npm 的报错看起来很多，但很多时候关键问题就在最后几行，比如网络问题、权限问题、版本不兼容等。