day04【项目前端相关基础知识二】/07-尚硅谷-谷粒学院-前端技术-npm包管理工具

Note JS咱们安装成功了，下面咱们首先先演示里边的第一个内容，就是到了我们的这个课件中D04中的第一个。这个东西叫什么？大家看这词，它叫做NPM，所以下面呢，给大家现在演示这个叫NPM。啊，我来做演示啊。小D位置。NPM，那NPM呢，它到底是什么？给大家先做个解释，然后咱看效果在NPM中，我先说明这里边呢，最终要各位啊，记住几个操作命令。那我们来解释一下啊，先看文档中这里边描述啊，就是第六个文档，什么是NPM呢？它翻译过来叫这个词叫node package manager，就是。节点的包的一个管理啊，No my package manager，这是一个直译，那他说的具体点什么意思呢？这里写到它是no，一个叫包管理工具，而这个工具中啊，里边有什么什么特点，它也是挪中的一个工具，相当于什么，咱之前说那个微稳啊，这是一个特点，那我在里边写下啊。

咱说这个到底是什么啊，我想这个位置。首先第一句话啊，咱们在就是后端那个接口或后端的开发中，咱们使用过一个东西叫ma。这maven咱应该都熟悉啊，咱当时给的项目用的都是ma工程，而maven是干什么的，各位应该更清晰啊，Ma就是它可以构建我们的项目，另外是不是可以管理咱们那个就是炸包的那个依赖呀，比如说现在用微问啊，咱们可以就是联网去下载我们这个依赖，只要你把这个配置好，它能联网，把你相应的炸包都能下载下来，这是ma稳做的事情，就是构建项目，管理你的炸包啊，或者下载依赖，这叫微稳，而咱现在说这个NPM。

啊，NPM它就类似于咱们的微稳，跟它的作用一样，只说NPM它是用在我们的前端中啊，它不是后端用在前端中，而它主要是干什么的，它是管理这个前端的那个依赖的。而前端什么依赖，主要就是这个依赖，前端的JS依赖，它就可以联网去下载这个JS的依赖。比如说我们用这块RY来用这块预览，比如说你有什么asys，它可以联网下载这个预览啊，这个叫NPM，就是一个包管理工具，它主要用于前端管理JS依赖的。啊包管理工具，所以大家把这知道啊，也就是说的简单点，咱们后端用ma问，前端n PM ma是管理炸包的，NPM是管理JS的，这是一个特点啊，Ma问能下载，NPM也能下载。啊，这是咱们说一点啊，就说后面呢，咱们再去找这些东西，不需要到处去复制，比如刚才啊，同学问我说没有没有什么共享的东西，后面咱不需要这么麻烦，直接联网，这些通A都能下载下来，不需要咱各处去找这个东西，这是啊NPM做的事情。

所以大家先知道啊，它就相当于一个前端的ma，跟ma作用一样，只是它是用在前端中。这个啊，咱们大家啊，对对我的通过我的介绍，对他先有一个基本的一个认识。这咱就说完了啊，什么是NPM，然后说完之后咱看第二个啊。第二个就是呢，如果说啊，你要使用NPM，首先要做个安装啊，要安装个NPM，那怎么安装呢？我强调啊，这NPM不需要咱们额外安装，就是在你安装那个no的GS的时候，它会给你，就是顺带着把这个NPM也给你安装上啊，就是也会。安装上。这个啊是一个特点，你装no时候NPM也会装上。

而咱们看一下啊。它装到什么地方，因为我这no我应该是装到了D盘啊，我是放到了。呃，不是这个啊，找一下啊，我是放到了应该是D盘啊node JS。这里啊，我是装到了D盘啊，但是默认咱可以装到C盘，然后nos中咱看啊在里边呢，默认个地方叫no models，把这点开，大家看是不是有NPM，这是它装NOES中会帮咱们装进去的，不需要咱们额外去装啊，就是这个特点，所以这个不需要咱们装了，而咱就看一下它是否安装成功啊，就是查看是否安装，那怎么查看，还是使用一个命令。跟刚才no的差不多，它叫NTM-V啊，就这个命令咱们直接查看一下就可以了，那咱们现在我给他来看一下啊，就是我的课件中写到就是这个NPM-V啊，咱们来到这里边，我现在终端打开啊，随便打一个终端，然后在里边呢，我输入命令叫NPM-V，咱们回车，然后大家看目前有个版本号，那就证明NPM已经安装成功了。

啊，就是这么一个基本方式啊，你装都是S里面就有，不需要你再额外安装啊，用这个就可以做到。这个啊，我们做这个说明，这是关于NPM，然后这些说完之后，下面再来演示NPM那个具体操作。啊，就是第三个啊，我们来演示NPM的。具体操作在操作中呢，主要给大家来演示这么几个操作啊，我先列出来，然后一会具体说，首先第一个操作咱演示NPM，对于我们的项目做一个叫初始化的这么一个操作啊，一会会解释什么叫初始化，然后第二个就是我们用NPM。

它能够下载JS的依赖啊，主要给大家演示这两操作啊，那咱来具体说一下啊，这两个都是什么意思。好，我们来演示啊。首先第一个呢，比如我现在啊，在我这里边呢，我就先建一个文件夹，文件夹，比如我就叫NPM。DEMO啊，这是一个文件夹，咱创建好了，里边什么都没有，但是现在你注意啊，我这只一个空文件夹，我现在呢，像文件夹作为一个前端的一个项目结构，什么意思呢？比如我们啊，之前咱建立一个就是后端的项目，比如我们建一个idea中建个Java项目，那Java工程肯定是个BOO，而在BOO里边应该有各种那种就是相关的文件，比如说啊，咱随便找一个。不等。是这个啊。你看啊，我们建了损部之后，大家发现啊，里面有各种文件，比如有什么home等等一些列文件，这是我们一个项目结构，而现在我们做前端也能做成类似效果，在前端中里边也可以有一些相关的文件，比如说在后端中核心是po，咱前端中也有类似文件，所以我们后面呢，在做这个项目中，大家要明确啊，前端并不是简单就几个页面，里边也能做各种功能，所以咱们前端要构建成一个前端类型项目，那怎么做？咱就需要用NPM对项目做个初始化，让它变成一个前端项目，而不是一个普通文件夹，如果你不初始化，那它有很多功能是做不到的。

啊，这个叫初始化，那怎么初始化，这给大家写一下啊，咱就需要啊使用一个命令做到。这命令是什么呢？我想这位置啊，它叫做。NPM。Init就init。对角。项目初始化的命令，那咱们来试一下啊，到这里边怎么试，注意啊，这个终端关掉，你点这个删除这个图标啊，就关掉了，然后在里边呢，我们右键在NMDEMO中打开终端这个位置啊，然后打开之后呢，在里边用我刚才说那命令叫n PM init。

当我们输入之后，咱一回车。然后看效果啊。你注意啊。这里不是报错，他让咱们输入一些就是你项目中一些信息啊，但是信息呢，咱一般用默认的，咱看一下啊，第一个叫pack name，就是你包名字，默认就是项目名字，咱直接点回车，或者你新书一个咱一般默认的，我直接回车，第二个版本号咱就用默认的啊，第三个就是向描述，然后第四个这叫entry point，就是你程序的入口，等于咱们就是在我们的后端入口，一般是main方法，在前端入口一般是个GS文件啊，咱用默认的会车，然后这是你的测试的什么东西，这是G的仓库，这些啊，咱都默认会车。

然后最后我们一回车之后，他告诉我们是否确定，咱们写一个yes，就是确定，然后最后回车，现在项目就初始化完成了，然后初始化之后呢，它会有什么样的效果呢？大家看啊，你看在文件夹，在文件夹里边多了一个文件。大家看这文件。这文件是不是叫packer点，这是它初始化之后的一个标志，里边会有一个文件叫packer点啊，就这么一个文件。我写一下啊，就是我们的项目初始化之后。它会啊，生成一个文件，这文件名字就叫这个package。点。啊，这个文件，而这个文件什么意思呢？也可以这么理解，它就类似于。啊，类似于咱们那个后端那个就是后那个文件啊，跟这个文件很类似，就类似于这个文件，所以这个啊，是咱们前端项目数始化最终生成的这么一个叫派点这的文件，这个咱就做到了啊。

然后这里边啊，这是我们的一个操作，但是大家会发现啊，我刚才过程中呢，是不是点了很多次回撤呀，而我现在比如说我想让他呀，都用默认的，不需要咱点回车，那这命令可以稍微给它简化一下，怎么做啊，演示一下啊。这个文件我先删掉，一会儿再来看这文件啊，先删除。删除之后我们来测试一下啊，就是CLS啊，清屏嘛，把它往上滑一下啊这位置，然后在里边，现在里边没有东西，那咱们怎么让它默认呢？写个nt mititt加一个叫杠Y，杠Y表示用的都是默认的，比如说现在我们有回车。你看啊，没有让我们去点它这文件生出来了啊，所以咱们用这个命令啊，NP mitt，咱可以加一个杠Y，让它用的都是默认的这些值。

这是啊，我们用的准备第一个项目初始化，然后初始化之后咱看一下刚才我们生成的文件叫p Jason，大家看啊，这里边都是刚才我们回车之后，也就是里边的这些基本信息，比如你的名字，版本号等等。啊，这个做到了啊，包括比如说咱们后面有那个GS什么依赖，里面会多出一些东西啊，这是目前是一个初始的状态，这个咱们就做到了啊，第一个命令各位记住啊，项目初始化啊，就是里面这部分NP mitt，再加个杠Y用的都是默认的，最终生成这个文件。啊，这单调完成了啊，大家把这命令牢牢记住啊，后面啊，咱应该也会用到。然后这个说完之后，咱看第二个啊，第二个也是什么呢？刚才我提到了NPM呢，类似于咱的微问，它也能去下载依赖，只是它下载是JS依赖，那第二个给大家演示NPM该怎么去下载依赖啊，我来做个说明，这位置也是有一个命令。

啊，写一下啊，现在依赖命令，它的命令是什么呢。命令叫做NPM。因此的加上你那个依赖的名称，比如你下载j query啊加j query这个是它那个基本的命令。啊，这各位给他知道啊，然后这里边啊，我们来做个演示。但是在用这命令的时候呢，其实咱也可以配置这么一个东西叫镜像。这个词不知道各位是否记得啊，咱们在学ma的时候，咱微里边是不是应该配置过阿里云的镜像，或者说更多的镜像，而现在咱用NPM也能配镜像，不配置也可以，但是你要明确啊，咱配镜像的目的是什么呢？是就保证下载更快呀，因为这个镜像我们这里用到还是投保的，就是阿里巴巴的嘛，啊，都是他的镜像，它会每隔十分钟到你的它那个官方同步一次，保证数据是最新的，而我们用淘宝镜像肯定会下载更快，如果不用它啊，连的应该不是国内网啊，下载会比较慢，所以咱们可以来个镜像，但是不配置也可以啊，这个不需要各位记这个命令啊，咱直接复制就可以了，那我来设置一下啊，设置它这个镜像，用淘宝镜像，然后咱们用命令来下载一下这依赖。

啊，那咱试一下啊。我先说这里啊，我先给他。清屏一下啊CLS，然后在里边首先设置这个淘宝镜像，这命令不需要记啊，咱直接设置就可以了。现在回车，然后试了之后咱来看一下这个镜像是否成功，叫n PM conig list。这个回车，然后大家看里边这个位置。这是不是就是淘宝啊，淘宝镜像就完成了，然后都是了之后下面呢，咱就来下载这么一个依赖，比如说我现在啊，我想下这么一个叫J块依赖，然后咱们用命令，就刚才我们刚说过的叫n PM in store，加上你依赖名称，我们就叫j query，现在一回车，这里边就会多出来一个依赖啊，咱看目前只有一个文件，那我们现在下载咱试一下啊，J query。

咱一会车，然后注意啊，现在他在联网下载啊，因为这个比较小，他就马上下载成功了，但是大家发现啊，在下载之后，这里边就多了点东西。啊，他就多出了这些东西。我把这个啊给大家接过来啊。然后这里边我们用的命令就是这个命令。啊，就是你看到的应该是这种现象啊。N PM in加一个角这块啊，咱是用到这个东西，然后下载之后看到就是这个效果啊，然后这个效果咱看一下啊，首先它多文件夹叫no models，咱们看啊，在no models里边是不是有你的这块这个内容啊，这个就下下来了，它就在这里边多了一个jaquiry，然后除了它之外，下面还多了一个文件，这个文件叫lock。

那先观察我们这个文件啊，这个文件中大家仔细看啊，这个位置多了一个地方，大家看这个地方。你看它啊，这个地方什么意思呢？如果咱们熟悉微问，应该很好理解，Dependence是不是就是依赖呀，它就表示咱们目前下载这块RY就是这个依赖啊，这块依赖包括目前我们这里边默认它给我们下的是一个最新版本，3.4.1这个版本啊，这是我们看到的都是这个。然后这里边啊，比如说我刚才用的命令是写的j query，它默认给我们下最新版本的j query啊，把这个下下来了，然后这里边啊，还有一个叫local。这文件什么意思呢？给大家也说一下啊，就是它生成一个特点啊，也就说现在呢，我们下的是最新版本，但是这里边log就表示锁定我当前项目只能用默认这个三点C1版本就不能用别的版本啊，也就是说什么意思呢？举这么一个例子啊。

比如说啊，咱们在后端开发中，那我比如说我给大家发项目，我是不是只需要把我的项目，比如那个po文件发给各位是不是可以了，我不需要把我仓库发给各位，各位直接联网，通过我的po物文件是不是能下载那个依赖啊。这应该能理解吧，就是我给你们po文件，你们通过我的po文件把那个依赖应该能下下来，而现在同样啊，现在比如说后面我给大家发这个工程的时候，这个不需要发给你们，我只需要把这文件发给各位，各位通过它这能下载下来，怎么下，因为会演示，但你下载版本这里边，因为这位置版本这块它可能在不断更新，所以我加了log之后就表示什么意思，你用我这个文件只能去下3.4.1，不能下加版本，锁定了你当前用的版本号，就是3.4.1，这个叫lo lo是不是有锁的意思，就是锁定你当前用的版本。

啊，这个啊是咱们看到这个文件，也就是说重复一遍啊，下载依赖在no Mo中，然后这个log锁定你当前用的版本，它在拍摄里边有，你就是生成这个依赖这个配置。啊，这个啊，我们就。把这一部分做到了啊，关于怎么下载进来啊，你把这记住啊，然后下载中还有几个特点啊，你跟它差不多，我就不一一演示了，大家看这两个。大家看啊，这是什么意思呢？给大家截过来啊，你看这句话。因为刚才呢，我写的中，我是不是只写j query，他就给咱们下了最新版本，但是如果说我现在比如说我就想下某一个指定版本，你可以加上这么一个版本号，艾特，加上你的具版本号，比如你这么写就会下这个二点一点几的版本啊，这是指定版本啊，这就不演示跟它效果一样，就是你指定某一个版本。

这个啊，各位给他知道。所以这是关于我们怎么去用NPM下载依赖这答案后面会一直用到啊。然后除了这个之外，咱再看第三个内容啊。第三个给大家说什么呢？就是刚才我提到的，比如现在啊，我给大家就是只发那个pack那个配置文件，那我们现在就是如何根据我这个package啊PA package这个文件。去下载我们的依赖，就好比说怎么根据po文件加依赖啊，那咱们来说这个东西，也就是说呢，我后面发给大家，项目中没有这个东西，我把这些删掉。而我里边呢，只有配置文件，在配置文件中，大家看是不是有这个依赖这么一个配置，那我下面就说一下怎么根据配置文件把依赖下载下来。

啊，这个啊是咱要说的第三个，而这做法跟上面基本上一样，咱们也是使用一个命令。啊，使用命令，而命令跟刚才一样，它就叫做NPM。In死斗后面不加别的东西，又叫n PM in死斗，这样的话就能根据配置文件下载依赖，这命令叫n PM in install啊这是咱说的第三个，那咱们来测试一下啊，到里边我先清屏啊，你看啊，目前这里边它是只有配置文件没有依赖，那我们用命令。NPM。Install啊，注意别写错啊，会错，然后咱看结果啊，大家看啊，你发现。这个文件夹是不是出来了，这块里是不是有了啊，这就是我们也是这么一效果，根据配置文件叫依赖啊，但是有一个特点，就是引用命令必须要进入到当前这个项目的文件夹中，也就是说你在项目位置点右键，然后进入，你别在别在目录中点啊，那它不好使啊，那用命令也不好不生效啊。

这各位注意啊，所以咱们这个完成了啊，就是怎么去。NPM初始化这个项目怎么下载依赖，怎么根据配置文件下载依赖？这三个命令各位记住啊，咱后面都要用到第一个初始化，第二个下载，第三个根据配置文件下载。这个啊，我们就说完了啊，然后说完之后呢，最后我的课件中啊，还有几个命令啊，咱看一下啊，剩下几个不需要各位去记了啊，咱就大概看一下，因为后面有个用到大家用的时候直接用就可以了，那我们看啊，这里边还有一个命令，这个命令。还是因此到，但是后面加不同参数，这表什么意思呢？它就表示啊，在我们这个项目中安装一些相关的插件，什么叫插件呢？比如说咱们之前装的这些是不是叫插件。但是咱用命令也能装插件，那怎么装？就是里边的定命令，一个叫杠杠C-DV简写叫杠D，一个叫杠D啊，它的全称应该叫杠杠global啊，而这两个什么意思，大概说一下啊，第一个它叫做当前环境安装，这叫全境安装，什么意思呢？比如用第一个命令，那这个安装的插件只能在我当前工作区中用，你换个工作区就不能用了。

而全局什么意思，你所有工作区只要在我note宅环境中都能使用啊，就是两种装插件方式，一个是当前环境，一个是全局，就是所有都能用，这是当前工作区才能用，这各位知道一下啊，不需要你记后面咱用直接复制就可以了，主要各位记得是我刚才的这三个命令。第一个初始化，第二个下载依赖，第三个根据配置文件下载依赖，这个啊我们做到了，但是有前提条件，这些操作咱的项目都需要先初始化啊才能完成这个空档。这是关于啊，咱说的NPM，然后还有几个，比如说这个包更新包卸载啊，这些基本上用不到啊，这些就了解一下，你把我写这几个重点给他记住。

啊，所以咱们啊，这个就做了一个说明啊，关于这个NPM的部分。NPM各位理解为它就是一个叫包管理工具，类似于咱的ma ma是下载炸包的，而NPM是下载我们的JS的，而NPM中三个命令包括NPM咱们的装no JS中它已经帮咱装上了，你用这个命令能看到是否装成功。这个啊，这张图我先保存一下啊。就是第四个咱说的叫。NPM。啊，这个是。