00:00
各位同学大家好,咱们继续来学习前段中的基础知识,下面呢,我们来讲解前段中的下一个内容,这个内容是什么呢?我这里没有写到,给大家写一下啊,这个内容它的名字叫做NPM,下面再来学习NPM中的相关内容。那NPM呢?到底是什么?给各位同学先做个介绍,然后咱们通过例子详细来进行演示,我在图里边给各位同学来画一下NPM的相关内容。那我们来看一下啊,NPM呢是一个简称,它的全称叫这个名字,我们看到node package manager,它是no的一个,什么叫做包管理工具,也就是NPM是一个包管理工具,然后他干什么呢?各位看后面一句话啊,它是全球最大的模块生态系统里边所有的模块都是开源免费的,也是notes的包管理工具,它相当于什么前端的慰问。
01:01
这是它的一个描述,那这句话给各位复制出来,咱们说的更通俗点,它到底什么含义,给大家写一下啊。各位可以这么理解,咱们在后端开发中是不是用到了微微啊?那大家跟我一起来想一下,这个微稳到底是干什么的?各位要知道啊,这里写一下微问是干什么的?首先各位知道微问第一个作用是不是它能构建我们的项目,然后第二个作用是不是能管理你的依赖,就是联网,我们能下载依赖,这是微问的两大作用,构建项目和管理依赖,这各位要特别清楚。而NPM跟它作用类似,NPM用在我们的前端开发中,那NPM到底什么作用,我在里边写一下,首先第一个作用。NM能管理前端的依赖,什么叫前端依赖呢?大家注意啊,咱们后端的依赖中很多是不是都是炸包,而前端依赖就是咱们说的JS文件,比如说大家看啊,咱们之前写的代码里边,那随便找个代码,咱看这个代码。
02:11
各位看里边啊,你看这两行什么意思,是不是引入JS文件,一个是voe的,一个是AXLS的,而现在我们做法就是还需要找到文件在页面中引入,而用NPM之后,咱们可以联网直接下载依赖就可以直接使用,这是它的第一个作用,管理前端依赖,而前端依赖中大部分都是我们的JS文件,这是它的第一个作用,然后怎么下载,一会演示。另外还有第二个作用,用NPM能够创建出那个标准的一个前端的这么一个项目。什么叫标准前端项目呢?说明啊,各位都知道微稳微文件的项目是不是有一个固定的结构,包括里边的文件夹,包括它有那个po点叉文件,而咱前端开发中各位要知道啊,就是你要这么来理解,前端并不是只是简单写个页面,前端也有一个标准的项目结构,而用NPM能创建出一个标准的前端项目,咱们在标准前端项目中才能用到前端的一些高级特性,所以这是它的两大作用,第一个管理前端依赖,第二个创建标准的前端项目,这个项目类似于咱们微问的这么一个用法。
03:28
所以以上是对于他的一个介绍,那介绍之后咱下面啊,看一下这个到底该怎么去用,给各位做个说明。那我们来说一下啊,我想这里。首先第一部分各位知道啊,你要用NPM,我们首先需要先进行安装,但是这个安装呢,我们不需要额外安装。就是你在安装那个noe,它会自动把这个NM就已经给你安装了,你安装no之后,NM就已经完成安装,那咱们直接看就可以了,怎么看写一下啊,就是你。
04:08
打开你的CMD窗口。或者说你在那个Vs code中查看都可以,然后在里边输入一个命令,这命令各位应该能猜到啊,跟之前差不多,NM-V这个命令。我写一下,然后你如果说能看到版本号就证明安装成功了,那我们来试一下啊,我就在这里边直接用了,或者你用CMD是一样的,我在里边打开这个窗口,然后用命令NPM-V回车。大家看啊,如果说你能看到版本号证明NPM就安装成功了,这是它一个安装过程很简单,装完了note s这就会自动装上,这各位给头知道。然后这个之后我们再继续往下看,下面呢,我们先演示NPM呢,怎么创建一个前端的标准项目,就先把这个做演示,那我写一下啊,咱看第二部分。
05:12
NPM中呢,有它的这么一个命令,这命令可以创建一个前端的标准的这么一个项目,命令是什么,我写一下啊,就是写下这过程第一步。你先创建一个空的一个文件夹。然后咱们。文件夹里边使用你的那个终端打开,或者说CMD打开。打开之后使用命令,这命令叫做n PM init,咱一般加个杠Y都是用默认的,这样的话就可以把这个前端的标准项目进行创建,各位记住这个命令,N PM init初始化,然后加个杠外,我们一般都用默认的就可以了,这是一个创建。那下面呢,给各位演示一下,咱们看这项目啊到底长什么样子,我来进行实现。
06:04
那咱看一下啊,首先我在里边建个空文件夹,我们起个名字就叫这个NPMDEMO。创建创建之后用终端打开啊,咱给它打开一下,然后打开之后用命令n PM init就可以了,其实咱一般加个杠Y,我先不加杠Y,咱先试一下啊,比如现在你看我回车。各位注意啊。这里边不是报错,是它的提示信息,他告诉你啊,这过程中将要创建一个package文件,然后在里面会保存一些内容,然后它里面有什么内容,我们看一下,第一个啊,叫package name,就类似于我们没中的坐标括号中是默认值,如果你回车用默认值,不回车可以自己写个值。第二个版本号,第三个描述,包括这个叫entry point,是程序的入口。
07:02
什么叫入口呢?说明一下啊,大家知道。咱们后端中程序入口一般是不是一个问方法,而前端一般是个JS文件,这叫入口,下面用一的什么测试的,相关的get的,相关的关键字等等,作者这些都是用默认值,最后问你是否OK,然后回车,现在就完成了。所以咱们通过这个过程,前端的项目就创建了,创建之后大家看一下啊,在里边多了一个文件。叫开点Jason,有咱们刚才那种,而这文件就类似于咱们微稳中那个po点叉L,跟那个文件是类似的,作用也是相似的,所以现在咱们用命令把这个文件就完成了创建。这各位给他知道啊。然后创建之后,我可以再演示一下啊,比如这么演示,我把这文件先删掉。然后删掉之后呢,我用这个命令。各位看啊,Nt MIT杠回车。
08:03
你看这过程啊,就是现在杠Y之后表示都用默认值,不需要咱们点很多次回车,直接用默认值把文件创建出来,所以这样的话咱就完成了第一个作用,NPM创建一个前端的标准项目,最终生成文件,用命令就是n PM init进行实现。这个我们就也是完成了,大家把这命令记住就可以了,很简单一个命令啊,后面咱们肯定会一直用到。然后这个之后我们再看下一个操作,我想这里啊。下一个什么操作呢?NPM可以去下载你的依赖,那我们做演示,那怎么下载写一下啊,它有两个过程或者两种操作,第一个过程。你可以用ninit。啊,就是不叫因死斗啊因死斗。加上你的依赖的名称。
09:02
这样的话就能下载依赖,这是它的第一个特点,那下面呢,给各位同学演示一下啊,咱先看一下上面都演示过了,咱往下看就是里边的这个命令,比如说加个J块令啊,这么做是下载最新的离开指盈版本,然后把这个依赖可以连网下载,在联网之前咱可以设一下它那个镜像。镜像各位知道啊,Ma稳中咱们曾经配置过阿云镜像,目的就是一个目的,为了保证下载速度更快,而现在同样咱们NPM也可以配置一个淘宝镜像,都是阿里提供出来的,然后配置之后你的下载速度更快,不配置也可以,因为它默认连的是国外的这个镜像地址,可能速度比较慢,所以咱一般配这个国内镜像,而国内淘宝它会这么来做。每十分钟到他那官网去同步一次,尽量保证跟官方服务同步,所以咱下面做个配置,这个不需要你写,咱直接啊复制就可以了,首先我在里边做个设置。
10:08
会车。然后回头之后咱们来做个查看n PM config list,看咱们是否设置成功。然后大家看啊,就是这个位置是不是就淘宝现在就完成了啊,完成之后咱们来下载依赖用命令n PM in j query。然后回车,现在它就会联网,把依赖下下来,也是咱们用这个命令进行实现,各位记住啊,N PM in加上你的依赖名称就可以了。然后下载之后它会怎么样呢?大家看一下这个特点啊,你发现啊,里边多了很多东西,首先有个node models,注意啊,这里边是什么?就是这块这个文件,这就有了,就依赖下载下来了,然后多了一个文件叫package lock。
11:01
说一下look什么意思啊,大家来看这单词look什么意思?是不是有锁的意思呀,它就表示锁定你依赖的版本,因为咱们刚才下载的依赖用的是最新的,比如现在啊,我说一下这个场景,比如说我给各位发代码的时候,其实我只需要发我的配置文件,这依赖是不是不需要发给各位,好比说咱在后端项目中,我只需要把我微微那个po点叉L发给各位,然后仓库不需要给各位,你根据配置文件是不是能下载进来,而下载依赖的时候呢,这里边有一个版本的锁定,用lock锁定住我这里边比如J就只能下3.6.0的版本,这是那个版本锁定,跟微稳中类似。在这个啊,是咱们看到这个特点,然后这个之后呢,下面还有一个操作,我再写一下啊,还有什么操作,就刚才我提到的。根据配置文件,我们能下载依赖,这是一个特点,然后怎么下载用命令。
12:05
NPM因死斗。就可以了,不需要加别的东西,这样的话就能根据配置文件现在依赖,因为大家看啊,在配置文件中呢,它多了一个地方,这个地方dependence是不是就是依赖,所以咱们根据它也能下载,这是我们的第二个操作,那咱们演示一下啊,我把这依赖先删掉。你看删掉了,然后在里边我用命令。这命令小队下面啊,N PM in道回车,现在就会根据配置文件,现在依赖你看啊。依赖是不是也出来了?所以以上就是NPM的基本使用,各位把这两个特点记住,我再重复一遍啊。首先第一个。NM能创建一个前端的标准项目,用命令nmit。咱一般杠Y用默认值,然后第二个下载依赖n PM in的加依赖名称,另外你能够根据配置文件下依来,它就直接写上n PM in都就可以了。以上就是NPM一个基本使用,各位知道啊,它就相当于一个前端的慰问的这么一个工具。
13:19
这个说到这里,然后下面呢,还有几个小细节,咱也看一下就可以了,就大家看这个。这什么意思啊,我这么做是不是下最新版本这块位,然后这么显示锁定版本,然后还有两个就是你不同的安装方式,这个叫局部,这叫全局,剩下什么意思啊,什么叫局部?你看啊,局部表示其实我现在这么做就是局部,它表示这个依赖只在我当前项目中能用,如果换个项目,这依赖用不了,这叫局部,然后他加个参数就是杠杠CDV。还有一个叫杠G或者global全局,什么叫全局?全局表示我只要在这个NPM或者在这个中,那这个依赖都能使用,这叫全局安装,咱默认用的是局部,就这里边多了一个依赖。
14:11
建议各位知道一下啊,一个局万装只是当前项目能用一个全局所有项目都能使用,另外你可以更新,包括可以卸载啊,但是重点是两大作用,一个是初始化项目,一个是下载依赖,包括根据配置文件下载依赖,就是各位把这个NPM给他记住,咱后面会一直用到这么一个NPM这么一个工具。所以以上啊是咱们针对前端这个知识的一个讲解。
我来说两句