05-Node.js基础（四）

最新推荐文章于 2024-04-17 17:05:00 发布

落日橙子乳酸菌

最新推荐文章于 2024-04-17 17:05:00 发布

阅读量310

点赞数

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

本文链接：https://blog.csdn.net/m0_48670609/article/details/123062132

版权

前端工程化开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

八、npm

npm 概述

npm （Node Package Manager）是 Node.js 的包管理工具。
包，就是一坨代码，就是 Node.js 的第三方模块。
比如 jQuery ，比如 BootStrap ，都是一坨代码。
npm 是一个可以在命令行运行的命令，跟随 Node.js 一起安装。
也就是说，如果本地已经安装了 Node.js ，那么就安装了 npm ，可以通过命令 npm --version

测试一下，如果能看到版本号则说明 npm 安装成功，否则就需要重新安装 Node.js 。
npm 的作用：
npm 可以下载（在 Node.js 中通常称为安装）包和包的依赖。
比如项目中需要使用 BootStrap ，那么就需要下载，除了要下载 BootStrap 以外，还需要下载 jQuery ，这个 jQuery 实际上就是 BootStrap 的依赖。或者说，BootStrap 中的一些功能是基于 jQuery 的语法来写的。这就是依赖。
手动下载和 npm下载对比：
手动下载：打开网站——找到资源——点击下载
npm 安装：npm install <package-name>
比如想要下载 BootStrap ，那要先去 BootStrap 官网，找到下载地址才能下载，而如果使用 npm 安装，只需要知道 BootStrap 的名字即可。并且，想要使用 BootStrap ，还必须要下载 jQuery ，因为是依赖关系，而 npm 安装方式，不需要关心依赖，直接下 BootStrap ，后面的 jQuery 会根据依赖关系自动地下载，因为 npm 不仅能安装包，还能安装包的依赖。
我们自己下载的时要找到下载地址，如果使用 npm 安装时 npm 去哪里下载呢？
npmjs.com，其实这个网址就是 npm 的镜像源。

npm 镜像源

npm 镜像源是 npm 管理的 Node.js 包的资源地址，网址 npmjs.com 。
也就是说，当我们在命令行敲安装命令时，实际上是跑到 npmjs.com 这个网站上去下载。
那么，npmjs.com 上面的东西是怎么来的呢？
是发布上去的。比如 jQuery 的作者将 jQuery 发布到了 npmjs.com 上， BootStrap 的作者将 BootStrap 发布到了 npmjs.com 上，Vue 的作者也发布上去，等等。将来如果有能力，自己也可以写，然后发布上去。

npmjs.com 就相当于手机端的应用商店，如果想在手机端下载 app 要去应用商店下载。

修改 npm 镜像源

为什么要修改 npm 镜像源？
因为 npm 默认的镜像源默认的资源地址是国外的，我们下载东西到国外去下就会舍近求远。所以，考虑到下载速度，下载效率的问题，一般来说，安装完 Node.js 后，还要把 npm 的镜像源改成国内的。国内的镜像源有很多，最常用的是淘宝的，即：
https://registry.npmjs.com ——> https://registry.npm.taobao.org
修改 npm 镜像源的命令行命令如下：
npm config set registry https://registry.npm.taobao.org
验证是否修改成功，可以通过获取来验证：
npm config get registry
在这里插入图片描述

使用 npm 安装包

安装命令：npm install <package-name>
安装可以分两种：
全局安装：多个项目都能用到这个包，那么就可以将包当做全局工具使用
项目安装（局部安装）：只有当前项目用到这个包

全局安装

全局安装就是把包当成全局命令来使用
全局安装的命令就是在之前的命令后面加一个表示全局的参数，即：
npm install <package-name> --global 或者简写为 npm i <package-name> -g
全局安装操作步骤：

明确需求，想让包实现什么样的功能
在 npmjs.com 网站找到合适的包
通过 npm 命令安装包
使用包

示例：
首先第一步明确需求：压缩文件；
第二步：在网站找
之前学习 fs 时压缩文件用的 minify ，所以在网站首页的搜索框输入关键词 minify ，得到 minify 这个包的介绍，安装命令以及使用代码等（https://www.npmjs.com/package/minify）：
在这里插入图片描述

第三步通过 npm 命令安装：npm i minify -g
第四步代码演示：
VS Code 编辑器中：
在这里插入图片描述
可以安装包，也可以卸载包：npm uninstall minify -g ，卸载后再压缩文件就会报错：

项目（局部）安装

局部安装就是包只在当前项目中使用
局部安装步骤：

创建项目目录（mkdir project）
进入项目目录（cd project）
初始化项目（npm init）
初始化过程中 npm 命令会帮我们生成 package.json 文件，项目就相当于一个自定义模块，所以需要声明一个 package.json 文件
在项目中安装包
在项目中安装包与全局安装包是有区别的，全局安装用的是 --global 参数，而在项目安装用 --save 参数。

局部安装命令：npm install <package-name> --save ，简写为：npm i <package-name> -S
刚才演示全局安装时，安装了 minify 又卸载了，现在演示在项目中安装 minify ：
第一步，创建目录 05.NPM
第二步，cd 进入项目目录
第三步，初始化目录：命令行输入 npm init 回车，得到一个交互式问答的页面，Package name 是项目名称，后面括号中的是默认的项目名称，当然也可以自己给项目命名，比如写 npm-local-install，这是自己起的项目名；然后后面问项目版本，默认是 1.0.0，也可以自己指定版本，如果想使用默认版本那么就直接回车；然后后面是 descriptions 项目描述，可以写一些项目的描述信息；然后就是 entry point 入口文件，默认的是 index.js ；后面是 text command 测试的命令，没有测试命令就直接回车；再后面是 git repository ，就是 git 的仓库地址，比如将自己的项目托管到 GitHub 等的话就有一个网址，就可以写在这里；再后面是 keywords ，关键字，将来把包发布出去时，别人可以通过关键字来找到这个包；再下一个是 author，作者；后面是 license 授权许可，默认 ISC ；最后，所有问题都问完了，会给一个 package,json 文件的最终效果；随后问 Is this OK? 默认 yes ，回车即可。生成的 package,json 文件中的内容就是刚才交互式窗口中填写的内容。
在这里插入图片描述
有了 package,json 文件后，才可以进行项目安装
npm install minify --save 安装，安装完成其实是安装到了 node_modules 中，里面包含 minify 以及一些依赖：

第四步，执行时注意：minify 不是在全局目录下，而是在 node_modules 中的 .bin 目录下：
在这里插入图片描述
所以命令应该是：

–save 与 --save-dev

在项目安装中，用到了参数 --save，除了这个参数，还有一个参数 --save-dev。
npm install <package-name> --save-dev ，简写为 npm i <package-name> -D
–save 与 --save-dev 对比：

–save / -S 安装的包
开发和上线都需要，开发环境要用，上线之后也要用，例如 jQuery
安装好后，包的信息会写入 package.json 的 dependencies 中；
–save-dev / -D 安装的包
只在开发环境使用，上线之后就不需要了，例如 minify ，开发时已经压缩了上线之后就不需要了，已经有了 style.min.css，就不需要再压缩了，上线后只需要运行 style.min.css 就可以了，压缩的过程在线上运行时是不需要的。
安装好后，包的信息会写入 package.json 的 devDependencies 中