node.js：包资源管理器npm

迷南。 2023-06-17 03:55 11阅读 0赞

# 什么是npm #

npm全称node package manager，是node包管理和分发工具。相当于maven

*  npm可以很方便的下载js库，管理前端工程。
 *  最新版本的node.js以及集成了npm工具。

查看当前npm版本：

> 命令行输入： npm -v

# npm命令 #

## 初始化工程 ##

> init命令是工程初始化命令

建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化

npm init

按照提示输入相关信息，如果是用默认值则直接回车即可。

* name: 项目名称
    * version: 项目版本号
    * description: 项目描述
    * keywords: {Array}关键词，便于用户搜索到我们的项目

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

我们之后也可以根据需要进行修改

## 本地安装 ##

> install 安装一个模块，仅用于当前工程.  
> 将js库安装在当前目录下

在上一个工程的基础上执行：

npm install express

可以安装express模块（node的web框架）

如果成功执行了该命令，会在当前目录下出现一个node\_modules文件夹和package-lock.json文件

*  node\_modules文件夹用于存放下载的js库
 *  package-lock.json是当 node\_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。
 *  打开package.json文件，发现刚才下载的express已经添加到依赖列表中了.  
    ![在这里插入图片描述][20191128100113738.png]

关于版本号定义： Redis 1.8.9 主版本.次版本.小版本

> 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。

> 波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。

> 插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

> latest：安装最新版本。

## 全局安装 ##

> 本地安装，会将js库安装在当前目录，全局安装会将库安装到你的全局目录下。

*  查看全局目录在哪里

D:\workspace\node.js\npm>  npm root -g
    C:\Users\LENOVO\AppData\Roaming\npm\node_modules

*  全局安装jquery

npm install jquery -g

## 批量下载 ##

从网上下载某些代码，发现只有package.json,没有node\_modules文件夹，这时我们需要通过命令重新下载这些js库.

进入目录（package.json所在的目录）输入命令

npm install

此时，npm会自动下载package.json中依赖的js库.

## 淘宝NPM镜像 ##

使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。

输入命令，进行全局安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm的版本

cnpm -v

使用cnpm

cnpm install 需要下载的js库

将 课前资料\\前台开发资源\\脚手架\\后台\\vueAdmin-template-master.zip 解压到你自己的练习目录，解压后目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]  
package.json中定义了该工程所需要的依赖，我们需要将依赖下载下来，使用上面学习的命令  
进入解压目录，执行cnpm install命令，效果如下：  
![在这里插入图片描述][20191128101017731.png]  
执行完毕后，我们会发现工程中多了一个 node\_modules 文件夹，里面就是刚才下载下来的相关依赖,如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]

## 运行工程 ##

package.json中定义的脚本如下

*  dev是开发阶段测试运行
 *  build是构建编译工程
 *  lint 是运行js代码检测  
    ![在这里插入图片描述][20191128102326849.png]  
    进入需要运行的工程目录，在命令行窗口执行以下命令：

npm run dev

![在这里插入图片描述][20191128102423344.png]  
![在这里插入图片描述][2019112810243815.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]

## 编译工程 ##

编译后的代码会放在dist文件夹中【前提：先删除dist文件夹中的文件】  
![在这里插入图片描述][20191128102623268.png]  
进入命令提示符输入命令  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]  
dist目录下只有个静态页面，和一个static文件夹,这里面的内容可以直接用于Nginx部署  
![在这里插入图片描述][20191128102911765.png]  
这种工程我们称之为单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。【这里其实是调用了webpack来实现打包的】

[20191128100113738.png]: https://img-blog.csdnimg.cn/20191128100113738.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128100916311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20191128101017731.png]: https://img-blog.csdnimg.cn/20191128101017731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191128101032622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20191128102326849.png]: https://img-blog.csdnimg.cn/20191128102326849.png
[20191128102423344.png]: https://img-blog.csdnimg.cn/20191128102423344.png
[2019112810243815.png]: https://img-blog.csdnimg.cn/2019112810243815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191128102459502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20191128102623268.png]: https://img-blog.csdnimg.cn/20191128102623268.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191128102802531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191128102834145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20191128102911765.png]: https://img-blog.csdnimg.cn/20191128102911765.png