00:00
大家好,我是学习园地的特约讲师高洛峰,第二节课呢,咱们学习了webpad打包其他的资源,那学到这呢,咱们基本上将咱们在开发中用到的资源都可以通过外派进行打包了,但是呢,外派默认打包的咱们说了是JS资源和J层资源,对吧?这样的资源呢,咱们是不用去处理的,但是呢,不用处理,我们也需要在打包的时候进行优化一下我们的代码,检查一下我们的GS代码,对吧?所以呢,我们这节课学习一下,呃,不是学习JS的打包,而是咱们配置一下来检查一下GS的语法,为什么要检查JS语法呢?你比如说。我们在做项目的时候,我们还是这个入口文件吧,随便找一个JS文件,或者是在他包里边,包里边都一样啊,你假如说我们这里边,我随便写了一个方法,你比如说叫做呃ad吧。然后呢,XY。你看返回X加Y。对吧,看上去很正常的一个语法,没有什么,呃。
01:03
错误的地方对不对,但是。这些语法风格是合适的吗?你比如说我们在写的时候。参数中间需不需要空格呢?两个加号之间需不需要一个空格呢?这样的代码分格是不是会更好一些呢?对不对,那这个分号是加呢还是不加呢?对吧?因为不加分号换行它也是代表宇宙结束啊,对吧?这些呢,虽然不是错误,但是呢是风格对吧,那这个风格呢,我们需要统一一下。让我们的开发团队中按照统一的代码规范去写我们代码,这样的话能和整个团队的编码风格达到一致,不然有的写的是这样。对吧,有的写的是这样,对吧?那这个后边有没有空号呢?对不对?这个后边有没有空格呢?对吧?是不是需要这样写呢?这都是一个风格,对吧?语句和语句之间有没有空行呢?对吧,变量。变量和后边有没有空格呢,对吧,有没有分号呢,这些都是。
02:03
对吧,一个语法,那怎么能规范所有人写的JS的语法风格是一致的。当然了,它规范不了你变量名起的是什么,对不对,但是呢,空格空行加不加分号,这些规范我们可以用一个工具去规范,什么工具呢,叫做ES。这个ES里面对JS语法配置进行检查的。比如他是一个开源的建代码工具,初衷呢,就是为了让成员可以创建自己的检查规则。在实际中,团队内往往会制定一套统一的标准,让整个团队风格一致,一致是这个当然了。我们在配置,特别是在vuee和咱们,因为咱们学外派也是为了学后边的框架嘛,对吧,做准备嘛,所以呢,在后边的框架的时候,那我们在创建脚手架的时候,那就默认的要把它加进去ES link,对吧,我先写的比如说都不规范。能不规范这样的语法,然后一会儿咱们看一下它会不会加上语法检查,能不能让我们编译过,编译通过。
03:01
看到了吗?它其实和外派D其实没有任何关系,对不对,好的包其实跟外派D都没有关系,只能外派D借助于这些对不对,然后来使用。那我们语法检查的时候使用的是ES并louder,那这个ES,那个laer呢?基于ES,并且这个包用来检查GS的语法,只能检查GS语法啊,只能检查GS语法,所以我们需要下载这个,但检查GS语法按照什么规范检查呢?那是不是比如说。有一些专门检查的语法,有GS叉的那种语法,那咱们还没学呢,比如说ES6的语法用不用检查呢,还是只检查以前的ES的语法呢,对不对,所以呢,它需要有一个规范去使用。那哪些规范呢?所以呢,我们得指定一些规范,那最常用的规范就是这个a I bnb这个规范,那这规范也有好多种,所以呢,我们要想检查的话,对吧。那必须得借助一个规范,规范的也是一个包,是一个规则库。
04:01
那我们就来查一下这个规范,看一下这个规范能检查什么,我们打开浏览器,我们在,因为它都是包嘛,我们在NPMNPMGS这里边我们搜索一下。直接搜ES,并且去搜索一下。看一下这是ES的,你看ES Li的这个包,我们需要下载对吧,然后还需要下载ESD loader对不对,那我们在配置的时候呢,你看有这样的规范,还有esb的插件的。我们通常使用这个包比较多的啊。较多,比如说现阶段我们使用这个就是比较多的。这里边都是E开头的包,你看。这个包是ARBB的一个什么基础的,GS的一个检查的。基础一个检查的,那它能检查什么,你看它能在我们ES link规则中包含了检查ES6的以及以上的这样的语法,然后呢,它又依赖于这两个包,所以我们安装的时候,我们需要安装什么呀,我们不光安装。
05:03
什么ES link?还要安装什么,在webpad里边需要使用,还要安装ES lit什么。呃,Loader以及呢,我们语法检查规则的包,对吧,这个包以及这个包依赖的这个包。对吧。那我们看一下,我们先把这几个先下载过来,省得我们再下载的时候,我们在等的时间比较长,对不对。NPNPM。Install安装都需要安装哪些包呢?肯定我们的学校ES。ES对吧,这个是需要的,还有order啊,我写ES啊,再把它加上对吧,还需要什么ES里边的。配置的Airbnb,它的基础的规则best,然后以及ES。它需要有一个插件,IPO那个PU。Ipot rt在开发的时候,我们只开发的时候健康嘛,对不对,你看。
06:03
需要有这么多。看检查有没有错啊,来咱们先安装上。那安装的时候,那我们怎么去使用这个检查,我们现在随便写的这个语法规不规范呢?那我们肯定需要在哪啊,我们肯定需要在这个地方对吧,捞到这里边我们做一个规则对吧,那他只检查记着只检查什么语法啊JS语方。别的语法它不检查了,比如说HTML的和CSS的不检查,所以呢,我们规则一定要怎么着写上让它。检查。嗯,后缀名是点JS的。这样的语法,所以这块要记住这个上面注射。ES值。只检查什么呢?只检查JS语法。那检查G语法,咱们还有一步必须做什么做呢?因为我们JS语法自己写的,这是JS语法对不对,那我们下载的所有的包不都是JS写的,不都在这里边吗?你看。
07:10
这么多对吧。这么多包全在这里边,那这些都检查吗?你就能保证别人写都是规范的吗?对吧,就算别人写的是规范,他写的风格也不一定用咱们刚才下载的,自己下载的。通过这个基础的包的规则去检查的对不对,如果。你要去检查第三第三方的包,那报错的就多了,所以呢,第三方的包是不用检查的,我们只约束自己写的代码,而不用约束什么第三方的包。对吧,第三方的包你里边代码尽量全别改,因为你一改动,你得下载一个新包的话,你原来的怎么的也全给处理掉了,对不对,所以第三方的代码这里边儿的下载过代码,我们是一个都不动的。一个都不动,也就不需要检查,所以呢,我们怎么办?一定是值。检查自己写的。自己写的。
08:00
代码不查。不检查什么第三方。酷的。代码,那我们不检查第三方库代码,我们是不是就得把第三方库给排除啊,还记得上面我们用的一个排除啊,对吧?排除它也是杰森里的一个属性啊,那杰森里边可以加多个时,它跟T的它俩不是排斥关系,是可以什么并行存在的,那就ex好,这个排除什么呢?呃,排除。加一个对象规则,那这里边儿只要是no。中间包含noe里边的模块的MOS,把这个写上,只要是包含这个模块的都排除,因为我下边包都是在那模块下边,所以这个下边的模块都给它排除掉就可以了,然后我们使用什么?呃,一个load哪个呢就是。因为它使用一个直接写名就行了,ES咱们下载的这个RO。使用这个去检查。那到时候漏的检查得基于什么呀?得基于这个基础的AR bnb这个基础的这个配置对不对,那这个怎么样才找到这个配置的规则呢?因为这包已经下来了,里边写的全是规则,怎么能找到呢?我们需要把这个规则写到这个接身这个文件里边去。
09:12
图纸看一下啊。找一下。你看。杰,这个文件里边,在这文件里边,我们只要加上什么呢?加上我们的呃,ES,你看一加这个ES那个配置就出来了,对吧。那它里边需要一个对象,那我们这规则干什么呢?我们这规则就让它ests继承,继承我们的。这个。呃,叫做ABNB的BSE这个基础规范。那这块配置文件写了,他通过在这里边找这个,他就会找到我们的安装好的包。找到我们安装好的包对吧,那我们在外pad里边怎么让他使用这个包呢?那我们加上参数。嗯。你不用加了,因为我们这指定什么ES指定这个,那就可以使用谁呀,就可以找到。
10:07
他会找这个配送。所以呢,我们这里边只要写好漏,就会找到这个配成面,那我们来试一下,看看可不可以。我们做检查啊。我们呃,Wipe pack编译打包看一下,它会出现一堆的错误,这才是说明我们检查生效了,你看12个错误,一个警告。啊,这么多错误。那这些呢,都是我们的语法不规范。来咱们看一下这个错误信息说的呢,你看就编译没我们通过。只要给我们体现的是这样的一堆错误,有说明的提示,那都说明什么,都说明是我们按照这个呃规则,也就是我们下载的这个软件包。里边都是按照这个规则去检查的时候,不符合他规则的地方,有错误有警告。有错误了,我把它拉长一些。
11:02
那。你可以去,你可以看一下,比如说ad的定义,但什么什么对吧,没有使用啊,什么什么对吧,只定义了没有使用,这你看它也是一个错误,对不对,然后空空需要一个空白对不对,包含一个空白在逗号之后,对吧,需要空白都是这这样的一个提示。看到了吗?所以呢,咱们简单的写了这么几行代码,就有这么多的错误,对吧,那比如说我现在按照他这个写。按照他这个写这块我规范一下。调整一下。错误能不能减少一些呢?错误能不能减少一些呢?来。保存一下。然后我们再编一下。刚才看到12个错误,对不对,你要稍稍规范一下。你看就变成九个错误对不对。当然了,像ad我也没调用什么的,对不对,所以呢,这是错误,那你假如说。那有的说了,加这个是不是很麻烦呢?那以后写代码的时候是不是经常容易这样,是不是会延长我们开发的时间呢?是的,的确会这样,所以呢,一般的呢,我是不爱把这个语法检查在我们的外派里边或者vuee里边去配置的。
12:11
啊,但是呢,外pad他也会把你这样的语法检查出来了,它有一种好处对不对,统一规范嘛,也可以让你自动规自动的修复,那怎么自动修复呢。比如说在这里边我们加上一个参数告诉他,让他是去修复一下,不然这错误太多了,你看office这里边加上一个什么呢?加上一个选项f fixx,默认应该是真,那这个的作用就是什么?这些语法你既然查出来了对不对,那又又不是程序逻辑的事儿,你不能自动帮我编程序,那查出来这些是规范东西,那你就帮我修复一下呗,对不对?来我们加上这个之后,那我们再编一下,看看能不能给我们自动修复。看一下。你看。就剩什么。就剩。两个够了对不对,那其他的他是不是给我们修复了呢?你看啊。
13:02
他告诉我们这个规范AB对吧,你定义这个方法,但是你没有干嘛呀,你没有去调用它对不对。你只定义了,你没有调用,那就相当于是一个子的一个函数啊,没有用到的变量对不对,那这个呢,A呢,我们也是定义了,但是我们没有使用对吧,那我们在这里边。看一下。你看其他的给我们修复了,对不对,你看这块给我们加空格了,自动给我们修复了,这块给我们加空格了,他把这些都给我们修复了,但是你没调用的,这属于逻辑的问题,他不能给你修复,那比如说这块我返回A。加上。这个对吧,然后呢,我再调用一下。这再调一下ad乘一个。呃,五乘一个六,随便传两个对不对,然后呢,我们在前边。呃,付给一个。来个变量吧。A。呃,Sum嘛。等于这个来我们再保存一下。
14:01
再给你打包。看一下就行了,他说你这个sum没有调用对不对,那我们直接打印一下,他说你最后你得到结果没用上对吧,那肯定不行的。我们用一下。你看这回就没有错误了,对不对,这样的话能约束你的代码行为,你声明一个不用,那不用的话,那意味着说你打包的时候都要上线了,对不对,那你把它删掉不就完了吗?对对,所以这个去掉,但是这块有一个警告,你看这个警告就是使用什么两个警告。这块什么木?对吧,这是呃,我们打印的那条尾卷。这块没有这个呢。他的警告什么意思?警告虽然不会影响我们程序运行,但是有一个问题,什么问题呢?想象一下我们在开发阶段写的这个dialog COO diog目的是干嘛呀?目的不就是为了调试程序使用吗?
15:02
对吧,目的就是调试程序使用。那调试程序使用你程序都上线,你打包的目的不就是为了上线吗?对不对,那调试程序这样代码还有用吗?没有用了,所以他警告告诉你这些。对吧,警告你,但不会影响你程序,那我们上线之后,让用户通过F12那控制台看到这个也不好,所以呢,你要么把它怎么删掉,对吧,要么去掉。对吧,有这样的一个作用,经常我们在写程序的时候,调试程序的时候,到处都是这个,那有些地方呢,你就忘记什么时候使用过它,对不对。所以呢,通过这个ES in你就可以看到,诶哪些在这块,那我就可以很好的对吧,找到它,然后把它上线之前把它去掉,对吧,那假如说我们这块警告看着不顺眼,我们能不能临时去掉呢?也可以,你只要加一个这样的一个注释。在注释里边写上它会ES link会检查这个注释里边有没有这样的一个标记,叫做ES,什么呢?Disable。杠net-L你都能猜出来干什么呢,对不对?也就告诉我们下一行。
16:03
无效,在ES检查的时候无效下一行,所以我们加上这个就可以了,对不对,上面写故事告诉告诉我们什么。呃,下一行e lit,所有。规则。无效。无效,那这块有了这个对不对,那我想下这块是不是有两个cost呢,对吧。下一行无效。只是下边一行无效,看到了吧。下一行啊,那这回我们再编一下,看看有没有警告呢,警告是也不需要呢。成功了,没有任何警告和错误,对吧?然后还能帮我们自动修复代码,多好啊。对吧,这是。的一个作用,语法检查。好,我也把实验步骤呢都给大家写到课件上了,大家可以下载课件,按卓课件去做一下实验,下载什么包,再买文件里面写什么配置,对吧,跟我刚才配置是一样,我只是给大家演示一下和讲解这个原理和什么时候使用好,谢谢大家,这些朋们就讲到这里。
我来说两句