node.js：包资源管理器npm

最新推荐文章于 2024-01-07 17:50:42 发布

OceanStar的学习笔记

最新推荐文章于 2024-01-07 17:50:42 发布

阅读量236

点赞数

分类专栏：前端

原文链接：https://www.bilibili.com/video/av55381234?from=search&seid=3525806271676407262

版权

前端专栏收录该内容

6 篇文章 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已经添加到依赖列表中了.

关于版本号定义： 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 解压到你自己的练习目录，解压后目录结构如下：
在这里插入图片描述
package.json中定义了该工程所需要的依赖，我们需要将依赖下载下来，使用上面学习的命令
进入解压目录，执行cnpm install命令，效果如下：

执行完毕后，我们会发现工程中多了一个 node_modules 文件夹，里面就是刚才下载下来的相关依赖,如下图：
在这里插入图片描述

运行工程

package.json中定义的脚本如下

dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测

进入需要运行的工程目录，在命令行窗口执行以下命令：

npm run dev

在这里插入图片描述

编译工程

编译后的代码会放在dist文件夹中【前提：先删除dist文件夹中的文件】
在这里插入图片描述
进入命令提示符输入命令

dist目录下只有个静态页面，和一个static文件夹,这里面的内容可以直接用于Nginx部署

这种工程我们称之为单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。【这里其实是调用了webpack来实现打包的】