41-尚硅谷-尚医通-前端知识点-npm包管理工具

各位，大家好。欢迎继续收看上硅谷视频课程。在前一天的内容中呢，我们主要讲了前端中的一些基础知识，咱们分别讲到了Vs code的安装，ES6的基本语法，Voe中的基本指令，包括AXLS如何发送I克的请求，以及I的UI介绍，包含note JS的安装和基本使用。咱们今天内容中等，还来学习前的中等内部知识，我们主要来学习这几个内容，我把这内容在这里给各位先做一个介绍，然后咱们来详细说明每个内容到底都是什么。那我在里边给大家写一下。咱们今天内容中的一部分呢，给大家讲这个东西叫做NPM包儿管理工具。那这个东西是什么呢？做个简单说明，各位都知道在咱们Java开发中有一个工具叫微问，微问可以干什么？是不是可以管理炸包的依赖，包括构建项目？而在前端开发中有个东西叫NPM，它就类似于咱们的微问，它也能下载依赖和构建项目，而它下载依赖是我们的JS依赖。所以第一个给大家来介绍NPM的包管理工具。

然后这个说完之后，第二部分我们来说一个内容，就是关于前端开发中一个叫模块化的这么一个开发。什么叫模块化？咱们之间在后端中呢？比如说我们类类之间进行调用，咱们有CR了，有service ctrl里面注入service service中是要注入micro展示，实现一个分层的调用。而现在前端开发中也能做模块化，就是我通过一个JS可以去调用另外一个J的方法进行实现，这个叫模块化开发。咱一块实现，看这个怎么做，然后第三个在魔法基础之上，咱们讲到一个工具，这个工具名字叫这个VIVO。

就是一个叫转码器的这么一个工具，VIVO给咱一会儿说明它到底是干什么的。然后除了这个之外，第四个给大家再讲的工具叫做web开口。Web pack是一个打包工具，就是它可以把多个JS打包成一个JS，里边也可以包含CS内容，这是第四部分。然后这些都做完之后，最后一部分那就来搭建一下咱们项目的前端环境，比如我们项目中，之前咱们做了后端介绍开发，咱今天把前端环境做搭建，而搭建过程中咱会选习一个前端框架。进行最终的实现。所以这是关于我们内容的一个基本说明，各位先知道，也就是今天内容呢，主要讲的还是前端中的一些基本知识，这些知识呢，虽然说我们在后面内容中咱们可能不会直接用到，但是绝对都属于我们前端中各位必须要掌握的基础知识。

所以这是一个基本介绍。然后介绍之后呢，咱们下面就先来看我们的第一个内容，关于这个NPM包儿管理工具的这么一个使用。NTM呢称为一个包管理工具，那什么叫包管理工具？我们来看一下NPM全称叫node package manage，就是node的包管理，它是node窄一个包管理工具，是全球最大的模块生态系统，里边所有模块都是开源免费的，也就是说NOEJS，它里边有一个包管理工具叫NM，它相当于什么前端的一个微位。这是关于它的一个基本介绍，因为各位同学都知道微问，咱们在Java开发中我会用到微问，微问可以做的事情就是下载我们的炸包依赖，包括进行项目构建。而现在在前端开发中，咱可以用NPM来下载依赖，包括做项目的构建，而NPM下载的依赖并不是炸包，而是我们的JS文件，比如说各位之前学过j query。

这一块用的时候是需要先引入一个JS文件，那这JS文件咱之前是直接下载下来，然后进行引入，进行复制，但是现在通过NPM这个依赖，可以直接联网把它下载下来，这就叫NPM的包管理工具。那这工具做了介绍，咱们下面看这东西到底该怎么进行使用，给各位做个说明，那我来写一下，就关于我们的第一个内容。NPM管理工具。然后工具要用的话，首先第一步咱们先安装NPM，我说一下怎么做，因为咱们之前呢安装过node JS，而你node GS安装之后，里边就会给你自动安装NPM，所以它不需要额外单独进行安装。

你安装完成了这个node JS之后，它就会帮你安装上。比如说它就会自动安装上，不需要单独安装，所以咱们这个应该之前已经装过了，因为咱们装了notes这东西就有了，然后有之后咱们怎么来查看一下它是否安装成功呢？我们用个命令跟命令跟之前note类似，它叫NPM-V，如果说咱能看到相关的版本，那证明它就安装成功了。所以这是里边的第一步，我们先进安装。然后这个我们来看一下，比如现在我在这里边呢，把我这个终端打开，然后我用NPM-V，大家看这里边呢，一个版本6.4.1，所以证明NPM就已经安装上，这就是他的第一步。

然后安装之后怎么做呢？给各位说一下。在NPM操作中的里边有几个基本的命令，这命令是它一个使用，首先第一个命令叫n PM initt，就是初始化，也就是说我们做一个前端项目的时候，首先项目要先进行初始化，就好比说咱们建一个Java工程的时候，里面有一些相关的初始化文件，或者说有一个po点差不文件，而前端项目也需要做初始化，那我们用n PM nit进行初始化操作。然后输入化之后才能用里面的其他东西，就是在里边咱也可以改它的镜像，各位之前用VIVO的时候应该改成过阿里云的镜像，现在用的也是阿里巴巴里边的淘宝镜像，然后用完之后咱们用NPM，因此豆可以下载依赖，包括做它的其他操作。

那咱们下面把这效果给各位就来演示一下，我来说一下第一步安装KM，然后第二步呢，我们做法就是创建一个项目的文件夹，然后在里面进行项目的初始化操作，这个操作我们使用一个命令进行。然后这个命令就叫做npinit进行初始化，这是里边的第二步操作，咱们项目要做一个初始化操作，那我下面给大家来操作一下。比如各位看，比如现在呢，我在里边呢，我就重新建一个文件夹，这个文件夹我就叫NPMDEMO把它创建，然后创建之后大家看目前是不是一个空文件夹呀，里边什么都没有，然后咱怎么做，我在文件夹点右键，然后在终端中打开。

打开之后，你之前有终端，我把之前那个给它先删掉，咱们在终端中打开，然后打开之后用命令NP mititt做初始化，现在我一会车大家看它效果你看啊，这里边我强调目前并不是报错，它需要你输一些信息，首先第一个信息叫做package名称，默认就是你项目名称，你可以单独输入，如果你不输入直接回车，那就用默认值，咱一般都用默认值。第二个版本1.0.0，我也回车，第三个描述默认为空，包括有一个叫entry point。安什么意思？都应该认识，是不是有记录的意思，表示你程序的入口，比如说咱们Java程序问方法是会作为入口，咱们的前端项目用JS作为入口，这是一个入口默认值，然后咱回车，包括你的测试的com的，包括你的GI的仓库地址，以及它的搜索关键字作者。

包括license等等，咱们都回说，最终这里边会生一个文件，他告诉你说是否OK，咱们输入一个yes，然后最终这里边把项目就完成了初始化，这就是他的一个步骤。然后初始化之后，大家看在某文件夹中，我们清晰的发现多了一个文件吗？大家看多了什么？是不是叫做拍点J，然后在里边你发现是不是有我们刚才那些默认值啊，这样的话咱们把项目就初始化了，而拍点J就类似于咱们Java项目中那个po点叉L，跟它是类似的，这是关于项目初始化操作，最终就生成了。这么一个文件，所以各位把律知道，然后初始化过程中，大家发现刚才咱们做的时候呢，是不是要点很多次回车呀，比如我现在我不想点回车，让它都用默认的，那咱可以在命令后面加上一个参数叫杠Y都直接使用默认的值，而不需要你每次点回车，那比如说咱们也试一下。

我现在把这文件先给它删掉。然后删掉之后，我现在再用终端打开。打开之后在里边输入NP mitt-Y，然后咱回车。回车之后大家看。文件是不是生成了，不需要咱们每次都点这个推车，这样的话呢，咱就把这个初始化的操作咱们就完成了，比如说我们用前端开发中，首先你对项目先做初始化，然后初始化就是用n PM nitt-Y这个命令我们进行实现。

这是我们的第二步，咱就完成了，然后完成之后呢，下面咱就在这个项目中可以做一些相关的操作了。那做什么操作，咱们往下来看，我们看这部分。首先NPM在说过，就像一个前端的微，它能够下载依赖，而下载依赖之前咱们可以改一下它那个镜像地址。什么叫镜像呢？就是它有一个远程的一个仓库，然后这里边我们改成淘宝的地址，因为这个地址是国外的，咱用淘宝，淘宝会每隔十分钟去同步一次，尽量保持数据与官方同步。所以咱把镜像给它改一下，里边有一个改的命令，就是n PM con site进行修改，那这个我就直接复制一下，再给它改一下就可以了。然后到里边，比如现在我给他执行一下飞车。改了这个地址回车之后咱做个查看，用n PM config list看一下当前这个。

仓库的地址，我们看地址是不是就是这个宝的地址，也就是里边的这个淘宝，这样的话咱就改完了，然后一会儿下载都是通过淘宝进行下载，这是关于地址修改，这不需要各位记，你知道怎么改就可以了，然后这个做到之后，咱们下面来下载一下这个镜像来做个测试，就下载一个依赖做个测试，通过刚才配置的镜像进行下载。然后写一下第三步。我的做法就是下载依赖的这么一个测试，然后怎么测试呢，也是使用命令，这命令叫做n PM in。后面加上你那个依赖的一个名称就可以了，那比如说我们来试一下，假如我现在啊，我想下载一个这块一，那我们就直接n PM install加上j query，它就可以帮我们联网下载下来，那大来试一下啊。

N PM in。这块呗，然后咱们对车大家看它的效果啊，你看现在它在联网，因为比较小，所以马上就要完成了，下载完成之后大家发现里边是不是多了东西。做了什么，是不是多了一个叫no models，然后在no model里面大家发现是不是就是我们这块这个相关的文件，他把这个叫下载下来了。这是我们提到的这么一个方式，然后除了这个之外，里边还多了一个文件夹，或者一个文件叫lock，是不是我说一下look什么意思啊，大家看啊。首先咱看packson中里面多了一个地方是叫dependence，就是目前有依赖，它目前版本是3.5.1，也就是目前我们下的是最新版本，而现在lo什么意思？Lo的意思就是锁定当天项目，你只能用这个版本进行操作。

也就是说呢，说的更通俗点，比如说啊，我给大家再发这个项目的时候，我是不是不需要发来依赖的，我只需要把配置文件发给各位是不是可以了，各位根据配置文件是不是能下载依赖，但是下载依赖过程中，因为这里边我没有指定版本，它默认肯定下是最新的，因为这个最新版本在不断更新，所以咱多了一个lo lo什么意思，锁定下载版本，就是约定是3.5.1个版本。所以这样的话，咱们就完成了依赖下载，用n PM install加上j query，然后进行这么一个下载。各位把这个给他记住，就是如何通过NPM下载依赖，然后下载依赖之后他把依赖文件就放到了no model里边，有这个相关的依赖。就是咱们现在看到的。视频效果，所以这就是关于NPM一个如何下载依赖的演示。

各位把这个给他知道。然后下载依赖之后呢，咱们可以继续往下来看看下面几个静管命理，然后大家看啊，我刚才下载的时候是不是直接写的这块RY，它表示下载就是最新的，但是我现在能指定你下那个版本，比如我指定加个is2.1.x。那就下这个版本，这个位置到知道。另外在里边呢，In豆也能够安装，或者说一些依赖，然后它里边有两种方式，一个叫杠杠C，一个叫杠杠global，杠杠global是全局安装，什么叫全局安装，比如我现在。只要在我这个NOEJS环境中，我这依赖下载之后都能使用，因为咱们目前都是在这么一个NOEJS环境中，那我依赖一下载一安装都可以用，这叫global全屏安装，还一个叫局部安装，就是杠刚SIM，什么意思呢？只在我当前的工作驱动能用，也就是说只有在我这里面能用，你换个工作区就用不了了，这叫居万桩，这两种方式各位都知道就可以了，后面咱会用到。

一个全局安装，我环境中都能用，一个局部安装，只在当前的工作区才能使用，这是关键财务，然后还有一些其他的，比如说我这里边你可以更新，可以卸载等等。这就是关于NPM中一个基本命令，各位主要记两个就足够了，一个叫nit初始化，一个叫因死动下载依赖。这咱们就完成了，然后完成之后呢，我们再做第四个测试。第四个测试什么呢？给大家强调啊，因为我现在啊，后面发给各位项目的时候，咱们是不是不需要这个NPM，就是no的这个models发给各位，而我只需要发给各位这个配置文件是可以的，那比如现在我做这么一个测试，我把这依赖删掉，只保留我们的配置文件，因为配置文件中是不是有这个依赖的配置，那我现在做个事情，根据配置文件把依赖下载下来。

各位应该能理解啊，就是咱们之前用过微微有po文件，里面是不是有配置，然后根据配置依赖是不是能下载，现在同样我在这里边可以根据配置文件去下载依赖，然后写一下这个怎么做。就是现在这过程中只有配置文件，没有依赖，咱们可以下载一下，那怎么下载给各位演示。这里边啊，我先来一个CLS，就是清屏，然后在里边呢，咱直接用NPM。因动就可以了，后面不加加东西，这样就表示根据配置文件能下载依赖，大家看依赖是不是出来了。这是关于。这么一个基本命令如何根据配置文件下载依赖，那我们就直接使用这个命令。

叫做NPM。因此动而不加加东西，这样的话就能完成这么一个下载。所以说到这里为止呢，我就把这个NPM的相关操作给大家就演示完成了，然后咱们后面呢，在创建项目的时候，首先第一步先做个初始化，然后初始化之后咱们可以根据配置文件下载依赖，或者我直接下载依赖，这样的话咱就完成了NPM操作，这是我们前台开发中一个很重要的工具。它就类似于咱们Java中这个微微，也是进行依赖管理，就是Java中式管理，Java依赖NPM式管理，JS依赖的这么一个工具。