00:00
大家好,我是学习园地的特约讲师高国峰,下节课咱们在web派里边配置了ES lint,可以呢,对我们的J语法进行检查了。那随着咱们这个学完呢,当然还有一些其他的呢,咱们嗯还没有去加,比如说咱们在讲NTM的时候呢,讲了bbo去。转化ES6的语法,让这个兼容性,那这个呢,大家也可以自行去配置一下啊,那基本上呢,咱们可以打包所有的资源了。那我们就可以拿外派D可以去开发了。但是在开发过程中呢,我们还会遇到一些问题,什么问题呢?不是说问题啊,会拖延我们开发慢的一个情况,因为我们在对代码进行改动的时候,开发的时候我们经常会这样,比如说打开我们的代码,不管是HTM代码,还是CS sa代码,还是加va代码,我们通常呢,都是开发的阶段呢,是不断写这些代码的,对不对?那我写过一个代码,哪怕就是一点点的,我想看效果就是怎么办呢,都得重新编译打包。外。
01:00
重新编译打包,然后呢,重新给我们生成我们那个B的目录,打包好的一个文件,你看用了三秒多对吧,接近四秒,然后给我们重新生成这个文件,然后我们想看效果,点开这个文件,然后我们还得打开,重新打开浏览器,然后呢看效果。看到了吧,这样的一个过程。这个呢就得耗时懂吗?如果我们。有项目很大很大的话,对不对,那这块有可能耗费几十秒。那也就是我们随便写一点点代码都要耗费几十秒,不管是二条代码还是C代码,还是什么加入S代码都会是这样的,那么有没有一种办法啊?编译打包变成自动的,浏览器打开是自动的,有代码改变就让它自动刷新呢,有这样的服务器就是我们这节课要讲的什么。Server开发服务器。它是一个什么服务器呢?给我们提供了一个开发功能的一个服务器,就是一个类似一个web服务器。相当于用它之后,就相当于帮我们自动编译了,那它怎么自动编译呢?什么是自动编译呢?只要是你自己写的,或者是嗯包里的东西啊,只要是。
02:09
HTM文件,CS文件加C文件,任何文件只要是内容有改变,你在一保存的时候,它就监听的改变,那它就会自动去帮我们编译打包。还可以自动打开浏览器,然后自动刷新看结果。那也就是我们以后在改代码的时候想看结果,只要一保存就能看到结果,对吧,这个过程是很快的。那这个过程为什么快呢?因为它这个打包编译是在内存中进行的,而不是在我们什么硬盘中进行的。也就是不会生成这个目录文件。在内生中进行,我们就是看结果嘛,所以呢,在开发中配置DV server是非常有帮助的,可以大大的提高我们的开发效率,最起码减去了我们这个打包编译的一个等待时间。那我们需要下载这个DV server,那就是NPM。
03:00
使用NTM,然后呃,Install安装web web pack-dev-serve serve这个包在开发阶段使用,所以呢,我加个嗯,杠杆DV server。然后等待他下载就可以了。我们等待一下。网速比较慢,所以呢,下载的速度会比较慢。他需要依赖好多包,所以呢下载速度呢会慢一些,你看依赖好多包。对吧。所以们装完第一呃server之后。那我们的这里边的容量就会很大,对吧,当然了,以后比如说项目,嗯,给你拷过去,运行的时候是不用给你拷这个目录的,对吧,第三方这个开单目录了。你只要拷过去之后,它会按那个package.js文件里边内容,你n PM install一下就全把这包又重新下载一下。
04:00
那我们下完这个了,那怎么运行呢?怎么运行呢,如果。它现在在这个,呃,Web pack点里边,这里边是可以配置的,但是不用配置,直接用命令就可以直接启动这个服务器。怎么启动?如果你用的是外派四的话,你在当前目录下只用这个web pack-D-server通过这个命令去执行,如果想在当前目录下执行的话,NPX是一样的。或者是这样去执行,当然咱们外派五这个不支持五一回车的话,你看。不是那个命令之类的,对不对,执行不了。那我们怎么执行呢?我们直接用web。Pack通过它来执行,然后我们后边加上serve变加R对吧,这样的话就启动web pack server这个服务器了,来我们启动一下。看好这个运行的时候。你看他在这块就监听着。监听着什么呢?咱们一点点来看啊,监听着我们文件的变化,在这是停止不动的啊,因为它是一个骚的服务器,在呃,固定的IP和端口这块监听着我的变化,那比如说我在这块加了一行。
05:11
二。只要我有小小的改动,你看它不是说你写代码的时候,它就进行自动帮你编译打包运行,你看我只要到那,然后保存一下CTRLS保存,我只要一保存,你看重新编一下,采用了这块用了接近四秒,这块才用了88毫秒,对吧,每次有改动它都会给我们自动运行。拜拜。就是自动编译。是这样一个,那自动编译完之后。那现在咱没设置打开浏览器对吧。那我们就得手动的打开浏览器,看一下他给我们在哪个IP的端口监听。你看。零这个地方,我我打开浏览器。然后我们输入lock lo CL冒号8080,在这下边一回车,你看才可以。刷新一下。
06:01
这样的话,我们在写代码的时候,你看。银行四。保存。然后我们就不用自己打包的过程了,这块我们刷新一下,你看直接就可以了,那就说它不能自动打开浏览器和自动刷新吗?可以啊,但是呢,如果现在你用的是外派四,那直接就可以了,但是外派五用的时候。外派五用的时候,你需要在这里边加一个参数。九八派五不支持自动打关运行,支持你得加上一个选项,它get。插盖目标什么呢?Web方式正确运行。为什么没有用自动的大盖外这种方式去运行,也就是这块给你显示注释。在web pack5这个版本的之后的版本怎么呢,需要加上。加上这个配置项才可以。自动刷新。
07:00
什么叫自动刷新浏览器,你看一下。嗯,现在呢,这里边我们加上了,咱说了只有你写在自己的文件里边,这是自己的文件保存的时候才会刷新这个配置文件呢,是它在启动的时候加载读取里边的内容的,所以这里边儿的文件如果有改动,想要它生效的话,我们就必须干嘛呀。我们必须在这里边把它结束掉,CTRLC结束掉。结束了之后重新运行才会读取配置文件,所以在配置文件改动的时候,别忘了重新启动一下,那它还是8080端口。你看这块啊,还是8080端口,那我这块最小化一下,看一下在我的文件里边,我这不加了一行四吗?我再加一行五你看。第二我直接CTRLS保存一下,下边变异了,你看这块我出来了对不对,再给你看一下效果。一行六。一二保存。你看这边六就自动出来了,编译打包,是不是我们就不用那种编译打包等待刷新这样的一个过程了。对吧,这样就可以实现我们想要的这个结果了。
08:03
那么我们有没有办法可以,比如说这个服务器现在给我们相当搭了一个外部服务器,对不对?默认是这个,那这个外部服务器我们能不能对这个DV server进行我们想要的配置呢?可以,你可以通过命名行参数进行配置,你比如说我想把端口改掉那个。域名改掉都可以,我是不行的,比如说改端口。杠杠什么?PT端口,比如说改成3003对吧,端口呢,你设置一般都在呃一到65535之间,没有被别的服务器占用的一个端口,你都可以随便设置对不对。或者是3000吧都可以,3000应该也没有被占用,但是指定主机的话,你可以后都可以指掉,然后就先改变一下端口,你看再启动一下。你看变成了3000这个端口。然后服务器在哪,在这监听着,那我这会现在再访问这8080就无效了,你看一直转圈圈对不对,访问不了,那如果把它改成3000。你看。一样可以了,看一下。我这块再写上压气变化压压。
09:03
是不是也可以了,对吧,那同样。我在写JS代码的时候,它也会自动给我刷新,假如我在这里边这话吧。啊。之后F12 f12我先把这个控制台。给我们。拿过来一下,比如这块 conco.rog我这块。写上一行一保存一下。你看自动给我刷新对吧。Cons穿松点rog。一二。自动刷新对吧,加表错误这个不用管,因为什么,因为我们现在你看做了一些语法检查,这些东西,我们都都没有加这个东西,对不对。一行一行二就可以了,对不对,不要上节课讲的ES进来进行语法检查,那都会自动刷新就可以了。那么我们现在在开发过程中,每次运行的时候,这里边是可以指定很多参数的,不光是这个,我这里边把所有要指定参数都给你写在这了,你看啊,在下边把这个拽上来。
10:13
写在备注里边,你看可以有这么多参数可以使用,不光可以改变端口对不对和呃主机当然好多都都是默认的,还可以什么编译的时候指定压缩,指定G这个压缩对吧,还可以指定什么主机还可以设置。当然外派可以直接设置那个开发模式还是生产模式,对不对,你看可以配置这么多形象。哪一个都可以使用对吧,那配置选就导致我们这个命令行使用的时候非常的长,那每次写都比较麻烦,所以呢,通常我们将这个命令行写在哪呢?我们会写到我们的。这个里边你看做成开发模式和呃运行模式两种,会写到我们的package机里边,在这里边,这里边呢,有一个专门执行脚本的地方,你家还记得吧,是这个地方对不对,那我们这里边执行这两个,比如说如果我现在是开发模式,我就做一个dev的命令,让它执行dev的时候执行什么呢?执行后边的命令,什么命令呢?就是呃我们写的,比如说呃,Web。
11:10
Pack serve,记着没有什么,没有那个R2,然后假如说我们指定杠杠。PT端口3000对吧,然后呢,呃,我们还可以设置模式。玩在前面吧,比如说杠杆什么呢?呃,Mode,这是外派本身的命令,对不对?指上dev,比如说开发模式嘛,Develop ment开发模式,这样的话我们在运行什么。运行这个命令的时候,他就直接给我们执行这个了。然后呢,我们打包的时候。比如说我们加上build。实际我们在打包运行上线的时候,我们就可以执行这个web pack,直接执行它,对不对?当然模式我们直接叫做生产模式,Mode模式,Pro production直接变成生态模式,既然这两个命令,那我们就不用在命令行上执行这么多了,那我们直接干嘛呀?
12:06
你看直接我想编一打包。你看原来的编译打包内存里边这块没有这个对不对,你看我编译打包原来是使用web pack对不对,那我现在直接用什么。直接给你打包的时候,这里边儿,因为这个模式在密码上指定模式,这个模式就可以不用了,对不对,在配置文件就可以不用了,你要配置文件,不然的话配置文件来回两个都都去改,改变嘛,比较麻烦对不对。你上下打包的时候,指定一个那个指定一个,对,但是你这边不用注释也没关系,因为你在命令行里边使用的它会优先级会比它高,对不对,但是呢,为了知道我们在面命厂里配置这个开发模式和生产模式了,我们在这块保存一下,然后。你看我们运行模式的时候,比如说我们通过这个插件csi编译的。我们。呃,打开。看一下其他的地方。呃,其他地方不需要。啊,不需要动了。
13:00
那就这样吧。那。我们现在不使用ipad去打包了,我们直接运行杰森里边的脚本,怎么运行啊,你比如说我想编辑上线,那我们就是执行build的这个,那就是NPM,什么ru运行什么build,我这个命令下去之后,它就会找这个命令执行。执行的这个命令看到了吗?编译打包,然后会给我们生成我们这个目录。你看。生成我们的目录对不对。然后在这个里边,你看我们,而TL的都我们编译好了,这上线的一个情况的,GSS的,你看这样的,对吧,GSSGS的都给我们压缩优化了对吧,都给我们打包了这图片的。对吧,自己的。就整个项目都给我们打包用了,但是在开发阶段我们不用执行这个对吧,你比如说把这个去掉。开发阶段,我们每次运行的时候,你也不用管它什么参数都写到那里边去了,对不对,我们直接什么NPM清加NPM,什么ruv开发嘛,开发模式。
14:01
它执行的是这个命令,然后端口是这个,在这块会一直监听着,你看一直监听着这样的话,我们只要是文件有变化。一号八。ER保存你看就会更新。看到了吧,是这样的一个情况。那有的说这些配置项是不是有点复杂呀,对吧,在命令行里边写的确是咱们还需要这么写,是比较复杂,所以呢,一般的有命令行可以指定后边选项参数的,那我们在配置文件名都可以指定,那我们配置d server在哪指定呢?通常我们都在这个下边指定。使用什么d server在这块。命令行的配置的这块都可以配置,它肯定比命令行要怎么要丰富的多,比如说我们这里边PT。端口号我们指定3001。3001对吧,不用3000了,3001你多少号,你做什么都行啊,然后呢,比如说com。为什么没有提示Co,呃SS编译,使用G这个编译,让他打包的时候压缩一下,对吧,使用G这个压缩,那比如说我们想呃自动打开浏览器O音。
15:11
自动开启浏览器都可以了。那这块可以了,当然改进文件的时候一定要重启对不对,那我这块当然其他选项还可以去配置啊,就是主机啊什么的,那我这块就不用指定端口号了。就不用指定断号了,对吧,当然了,我这块。你重启一下。那你看我现在不指定端口号了。他会不会给我们自动打开浏览器呢?开发环境。你看执行的是这个命令,你看自动给我们打开浏览器。看吧。然后自动运行,现在呢,我们这块咱自动打开浏览器这个功能,要不要就行,两行码复制一下。来。你看这块就有了,我再复制。只要一保存这边自动给东西对不对,好了,GS正好F12下。嗯,F12。
16:00
你看你假如说我在GS里边有改动。检查。保存一下。你看已保存对吧,也自动更新,当然了,这所有的包都加载了,咱们后边会可以进行优化啊,不让它所有都加载,比如说咱们使用那个hot这个加载对吧。这里边儿就可以了。好,这就基本上把我们第一位server就给我们配置完了,那以后咱们在运行的时候,记得执行的哪两个命令,它在哪监听它的原理对不对,这些东西咱们都清楚了,怎么配置这个服务器。将我们用vuee的脚手架也好,D脚手架也好,那这些东西呢,都是给我们配置,都是通过ipad把我们这些东西给我们配置好的,所以我们直接使用就行了,但是呢,那你运行它的时候,运行VE脚手架的时候和呃原脚手架的时候,它有这些功能,你就不要觉得奇怪了,因为这是外派D本身它就支持的这种功能,只不过它帮我们配配好了,不用我们手工配置了而已,对不对。好,谢谢大家,这节课我们就讲到这里,这节课我们主要学的就是这个DV server的服务器,那有了这个我们在开发阶段可以大大节省我们的时间。
17:02
好,谢谢大家。
我来说两句