2024从零开始使用“Node.js“的包管理器npm

npc码农

已于 2024-08-08 20:08:39 修改

阅读量1k

点赞数 18

分类专栏：前端开发文章标签： node.js

于 2024-07-29 16:31:02 首次发布

本文链接：https://blog.csdn.net/ssrsrrn/article/details/140742307

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、介绍

Node.js 是一个高效、轻量级的 JavaScript 运行时环境，广泛用于构建各种类型的服务器端应用。它的非阻塞 I/O 模型和丰富的生态系统使其成为现代 Web 开发的重要工具。

简单来说你可以认为它是一个类似网站类应用的“升级装备”可以提高服务速度，加快访问速度，数据传输速度

这个教程主要介绍Node.js的npm(包管理工具)，因为Node.js主要是为后端服务的，后端咱们暂时不涉及

二、安装

上个教程中有说过如何安装，这里增加了一些补充，如果安装了可以跳过

此次安装演示版本为16.2（旧版）

注意：新版本也可以使用这个方法（新版本打开旧版本文件可能会有些许不兼容的问题）

复制连接到导航栏回车进入Node.js首页：https://nodejs.org/zh-cn

Node.js

①首页点击关于

②进入页面点击Node.js版本

③下滑页面选择需要版本点击“发行版”（这里演示16.20.2版本）

注意：在Codename这栏下，有代号的都是长期支持版本（LTS）Long Term Support

例如lron / Hydrogen

④下载node.js的msi包（msi为安装包）

④下载完成点击打开文件

⑤进入安装界面单击Next

⑥勾选同意（用户协议）并点击Next

⑥选择要安装的位置（个人推荐不改安装位置，因为Node.js占用的空间大约为 100 MB 左右。）
点击Next

Node.js在安装后占用80MB左右，而在安装完脚手架后连同npm的安装文件等长期使用也不会有多大

⑦进入自定义安装选项界面，默认Next下一步（表示默认全部安装）

Node.js runtime：Node.js 的运行时环境，是必选项。
corepack Modules：用于简化包管理器（如 Yarn 和 pnpm）的管理
npm package manager：Node.js 的包管理器，也是必选项。
Online documentation shortcuts：在线文档的快捷方式，通常会创建在开始菜单中。
Add to PATH：将 Node.js 的安装路径添加到系统的 PATH 环境变量中，使得你可以在命令行中直接使用 node 和 npm 命令。

⑧不勾选直接Next（勾选后会下载其他工具，这些工具对于前端开发来说不需要）

"Tools for Native Modules" 界面中的选项大概就是询问你是否需要安装可以帮助你编译和构建原生 Node.js 模块的工具（问你要不要改造改造Node.js，它帮你下好工具）

⑨点击Install完成安装

⑩点击Finish完成

安装情况检查

①开始菜单搜索cmd打开

②命令界面输入node -v（如果回车弹出版本号则表示安装成功）

③输入npm -v（如果回车弹出版本号则表示安装成功）

------- ！！！以下教程关于Node.js的包管理器npm的配置！！！------

npm配置（Node Package Manager）：Node.js 的默认包管理器。

这里讲的是安装包和缓存位置，通常这两个东西默认在C盘，如果只是做前端开发通常只会安装一些工具，所以占用的空间不大，但如果你是全站那要改也是可以的，各位可以去找找教程，因为过于麻烦我这里就不赘述了

npm 是世界上最大的包管理器之一，有数以百万计的开源包和库，极大地促进了代码共享和复用。因为是node的默认包管理器，所以在安装时也会自动安装

注意默认情况下win系统npm全局安装的包放在以下位置

C:\Users\<Your-Username>\AppData\Roaming\npm

npm缓存文件放在以下位置：

C:\Users\<Your-Username>\AppData\Roaming\npm-cache

①更改npm的源

cmd打开命令行窗口，使用npm config get registry可查看当前配置的源

更改源可以让我们在开发安装工具的时候更快捷

输入npm config set registry https://registry.npmmirror.com/回车将源更改为淘宝镜像源

三、卸载

卸载方法、使用自带工具卸载

一般情况，当你安装好node.js时，可以直接在开始菜单中找到它

①开始菜单搜索Node.js

②点击打开文件位置

③进入文件目录，双击打开Uninstall Node.js（卸载Node.js）

⑤选择是

进入加载页面

⑥检查Node.js卸载

cmd打开命令提示符，输入node -v回车，弹出提示而非版本号则表示卸载成功

⑦检查npm卸载

一般情况下各个版本node.js安装会自动携带npm，卸载时也会同时卸掉，但以防万一

输入npm-v，弹出提示而非版本号表示卸载完毕

⑧最后彻底删除npm所安装的文件以及缓存

删除全局安装目录：
- 打开文件资源管理器或命令行。
- 删除 C:\Users\<Your-Username>\AppData\Roaming\npm 目录中的所有文件和子目录。
删除缓存目录：
- 打开文件资源管理器或命令行。
- 删除 C:\Users\<Your-Username>\AppData\Roaming\npm-cache 目录中的所有文件和子目录。

四、使用npm

注意：这里只介绍npm

通常npm在项目文件下使用，使用时

1、项目文件打开使用

①打开文件夹进入项目文件下第一级目录（使用vue项目举例）

②项目文件导航栏输入cmd回车打开命令窗口

2、VSCode打开

①界面找到右上角三个点，单击

②弹出提示框选择终端，单击

③弹出新窗口点击新建终端

④开始使用

五、npm命令介绍

1、初始化项目

①默认设置初始化项目

npm init -y

②询问配置初始化项目

npm init

2、安装依赖

安装项目所需的前端依赖包

①语法

npm install axios

②举例

初始化新项目：在创建一个新项目时，需要安装一些基本的依赖包，如 react 和 react-dom。
```
npm install react react-dom
```
添加新功能：在项目开发过程中，添加新功能时可能需要引入新的依赖包，例如使用 axios 进行 HTTP 请求。
```
npm install axios
```
安装开发工具：为了提高开发效率，可以安装一些开发工具和测试框架，如 eslint、jest 和 webpack。
```
npm install --save-dev eslint jest webpack
```
安装特定版本依赖：在某些情况下，需要安装特定版本的依赖包以确保项目的稳定性。
```
npm install lodash@4.17.20
```
安装项目中的所有依赖：根据 package.json 文件中的依赖列表，一次性安装项目中的所有依赖。
```
npm install
```

3、全局安装包

全局安装主要用于需要在命令行中随时调用的工具

注意：全局安装包冗长用于命令行工具，如果全局安装包过多容易导致冲突

①语法

npm install -g <package-name>

②举例

构建工具：如 webpack、gulp、grunt 等，用于项目的自动化构建。
```
npm install -g webpack 
npm install -g gulp 
npm install -g grunt
```
脚手架工具：如 create-react-app、vue-cli、angular-cli 等，用于快速创建项目模板。
```
npm install -g create-react-app 
npm install -g @vue/cli 
npm install -g @angular/cli
```
包管理器：如 yarn、pnpm 等，用于管理项目依赖。
```
npm install -g yarn 
npm install -g pnpm
```

4、卸载包

卸载包用于删除项目中不再需要的依赖。

①语法

npm uninstall <package-name>

②举例

删除 axios 包：

npm uninstall axios

5、更新包

①语法

npm update <package-name>

②举例

更新 lodash 包：

npm update lodash

6、查看包信息

查看包的详细信息，包括版本、依赖等：

①语法

npm info <package-name>

②举例

例如，查看 axios 的信息：

npm info axios

7、列出全局安装的包

列出所有全局安装的包及其版本信息。

①语法

npm list -g --depth=0

8、安装项目中的所有依赖

根据 package.json 文件中的依赖列表，安装项目中的所有依赖：

①语法

npm install

9、运行项目

通过 npm 运行项目中的脚本。

①语法

npm run <script>

通过在 package.json 文件的 scripts 部分定义的自定义脚本的基本命令（你可以在 scripts 部分定义任意多个脚本）然后通过 npm run <script> 来运行它们。

也就是如果script定义的是serve那命令就是npm run serve

②举例

{ 
    "scripts": { 
        "serve": "vue-cli-service serve" 
    } 
}

你可以使用以下命令运行该脚本：

npm run serve

10、清理缓存

清理 npm 的缓存，以解决一些缓存相关的问题。（通常找不到问题所在就试试）

①语法

npm cache clean --force

11、修复漏洞、

当发现依赖包存在安全漏洞时，可以使用命令进行自动修复。

npm audit fix