00:00
大家好,我是学习园地的科学讲师高洛峰,上节课呢,咱们完成了将CS文件单独提取出来,在打包的时候单独提取出来,然后呢,使用link一个标签的方式插入到我们的RM文件中。这样的话,我们在TM文件中就可以使用单独的TM文件了,而不是呃,创建style标签插入到呃头里边是这样的一个过程,当然针对CSS的一些优化还是比较多的,嗯,提取单独文件,单独文件只是一部分,那我们还需要干嘛呀?除以csi的兼容性压缩CSS还有。嗯,去除CSS,咱们说没有用到的属性的部分,这几步都咱们都需要做,那咱们这节课呢,咱们就处理CS兼容性,那咱们在开发的时候呢,页面上支持STMMRCS加super,那都是用浏览器解析的,那浏览器呢,就有很多个厂商,那不同的厂商呢的出厂的浏览器,包括浏览器的不同版本,那对CSS支持的是或者是对HTMCSS支持都是有可能不一样的,这就所谓的兼容性,那咱们做一个项目,就需要让各个浏览器都显示同样的效果,那这就是处理兼容性。
01:06
那如果我们在开发的时候。如果不用打包的时候,不用工具给我们处理。那我们在写每个样式属性的时候,都要考虑到这个属性,你比如说。你比如说我们在写CS文件的时候,我写每个属性的时候都要考虑这个属性,IE它是支持的,火狐有可能不支持,咱假设啊,对吧。那比如说呃,来一个,你比如说像display对吧,特别是。C3新支持的这样的一些呃属性对吧,你比如说盒子布局对吧,通常里边还有一些,比如说呃,这个属性嘛。这个属性通常支持的,呃,各浏览器支持的就不太好,那我们就得考虑到什么不同的浏览器这个属性我们该怎么写,通常我们在看到别人样式的时候,有什么支持什么,呃什么杠杠什么web k什么杠杠什么什么的杠杠什么IE什么什么的,对吧?不同浏览器那一个属性呢,我们基于不同浏览器这些很多很多个对吧,你想象一下。
02:07
如果你这么写的话,浏览器版本有很多对吧,你写一个属性,手动的就得写十多个。这是有可能的,对吧,另外版本再升级的时候,再兼容性的,你改代码的难度也大,那基本上会把你的开发世界大大加大。那有没有办法能做到这一点,就是我只要写一个属性。写一个属性对吧,正常写就可以了,只要是现在支持这就可以了,让这个外派D这个工具帮我们在打包的时候,就根据不同的浏览器,我们可以设置让它支持哪个浏览器自动给我们把这个属性对吧,帮我们编译成各个浏览器支持的属性。这样呢,我们在开发的时候就不用考虑做浏览器了,工具就帮我们处理了,可以,那咱们这节课要解决的就是这个问题,这节课要解决这个问题啊。所以呢,这是很有必要处理的,不然的话你写的一个样式,嗯,可是我们可以看IE打开A用不了了,对不对,那处理这个我们使用的就是post CSS,通过它来处理兼容性。
03:04
那po加SS,那需要我们下载什么呢?我们在外pad里边需要用这个loader来去处理,但是这个loader呢,单纯的load还不行,对吧,咱们还用借助于插件,还得借助于这个插件来完成。所以呢,需要两个包才可以。Post pre杠来我记一下,然后我们下载一下。在这块啊,下载下npm install安装,安装什么呢?安装一个post-loader,光装这一个还不行,还得装什么,还得装post CSS-pre re-env。只在开发的时候用,不在运行的时候用,因为开发的时候帮我们转换打上包了,对不对,我们运行的时候就不需要了,那他下载个啊。在这里用。那在外pad里边用的时候,你看啊,用这两包,你比如说我在把这个CS文件,我刚才写的这个样式里边这个文件里了,对不对,那我在这块需要是他要知道顺序是从右到左对吧?那我们是先转呢,还是都打完包之后再转呢?肯定是先转成浏览器支持的兼容性的问题,对吧,先转转完之后再打包,再加入到页面是这样的一个过程,所以呢,我们需要在后边加上这个loader,什么load呢?就是呃,我们说的post CSS。
04:24
这我应该加上字符块啊,因为里边是一个字块对吧,Post CSS杠,RODR需要是装这个load的。看到了。通过他,那他现在直接遇到这个CS文件就能将内容给我们编译成各个浏览器知识的吗?那你还要怎么着,你还得写浏览器的规则呢。你还要写浏览器的规则呢,那怎么写浏览器的规则?你看好了我们。咱们先说另外一个。这个说了,他得用到哪个,得用到这个插件。得用到这个插件对不对,那这插件没用呢,应用插件,咱们说引用对吧,安装然后使用对不对,下载引用然后使用,咱们现在已经下载了,那它不是,它是load里边用的插件,不是说在这个里边,你看下边是不是插件,不是说在这里边去写的插件,这个插件呢,单独有一个配置文件,有一个配置文件叫什么名啊。
05:17
我们在这新建一个。嗯,叫。新版里边这样,老板里边直接得在这个POS子里边去洗啊。接一个配置文件是S的叫做什么?叫做post GSs.con.gs你看外派叫这个对吧,Post CS叫这个配置文件,那这配置文件都是暴露出去模块对不对?Model点这个等于对吧,一个对象暴露出去都是这样的,然后在这里边写上。引用的插件plu这个。插件里边可能有多项,但是它的固定写法就是一个速度,然后包含包含谁呢?包含这个插件叫POS。
06:01
这个。但是咱们在B包这个咱们得调一下,是这样的一个。情况,那我们在外pad里边,我们使用这个load的时候,对吧,使用这LA的时候,它就会自动找这插件,怎么找呢?就会因为这个是它的默认的配置文件,就会到这个配置文件里边去找,以前的版本呢,是在这里边把它变成一个什么,变成一个对象。变成一个对象,里边写老,然后呢,里边写上post gss啊。Post CSS loader使用这样对象的方式,然后这里边在指定一个对象,在这里边写的那个插件是这样的一个过程,但现在基本不用了,它你只要把loader写在这块,它就会自动找这个配置文件,而在这个配置文件里边呢,会用什么?会用到这个插件。那这个插件他怎么知道兼容什么浏览器啊,咱们得指定要兼容的浏览器,有这样的一个过程。所以呢,要想指定接入的浏览器,我们需要干嘛呢?我们需要在。
07:02
NPM这里边它会读取这个插件,会读取呃,Package这个点JS文件里边。有一个浏览器支持列表是在这里边写的。叫BR直接把这个工具就给我们截出来,你看它有两个选项,可以是对象,可以是数组,如果我们选择对象这样的方式,那这块其实我们可以指定两个,指定开发的时候浏览器支持需要让它支持什么样的浏览器的列表。然后上线运行的时候,也就是生产环境需要什么浏览器列表,你这边写上什么,呃,Production和development只能这两个,然后分别指定,但是我个人觉得没那必要,为什么那必要呢?开发环境支持什么浏览器无所谓的对不对,只要是运行时候支持什么浏览器对不对,所以写个数组,在这里边写多个浏览支持浏览器配置项就行了,那它就会在运行的时候去支持什么样的一个兼容性,不用管开发的时候支持什么样的兼容性,是这样的一个过程啊。那在这里边我们写了,里边呢,就是可以写多个,你配置几十项都行,那你如果想知道如何写匹配浏览器的呃情况和版本的话,那你搜一下这个有很多项,但这也不是重点啊,你也不用记常用的这种几项,比如说大于呃。
08:13
0.2。百分号什么意思啊,比如说大于。20%的,也就是呃,80%的样子,浏览器都支持,其实这意思对吧,然后呢,比如说让所有的浏览器的最后的两个版本外,最近的两个版本,也就是最新的两个版本支持就行,VR is。然后呢,游戏浏览器已经过时了,死掉了没人用了,那就not死掉的E死掉的浏览器上不用。这样的过程。所以咱们在捋一下这个流程,我们安装了这两个对不对,那我们在这里配置它通过这个load转而这个loader呢,会通过这个配置文件会自动找名称,并也错了,因为也是POS的CSS嘛,它根据这名称找到配置文件,会加载这个插件,这个插件呢,会到这个pack的JS里边找到你设置的让他支持什么样的浏览器这样的列表,对吧。
09:02
然后帮我们翻译来,我们看一下可不可以。嗯,Web派。编一下。好,没问题,那我们看一下这里边人物生成。你看。这个慢点行吧,你叫这个吧。你看这里边儿。对吧,放到一起了,是不是这个有变化了,这没变化,当然我们现在支持浏览器的那个还不够,因为他那意思是我刚才写的那规则符合浏览器这个一个都支持,所以呢,它就不用动了,对不对,但是下边这个规则对吧,这么写对吧,它变成两条了,对吧,前面加这个对吧。加这一个往外配为内核了,才支持这个属性的,对不对,加上一条这个。那以后我们在写样式的时候,你就不用怎么了,不用去管这个,你只要写一条这个对吧,他会根据你的情况让哪些浏览器,比如说让web k的内核的支持,对吧,他就帮我们编译了。那同理,你比如说我们在写样式文件的时候,对吧,不光是这个,你比如说我们这里边的,呃,这边不好几个呢嘛,你比如说。
10:09
呃,Nice。文件。我们也想让他。也想让他支持对吧,或者是SAS文件,这里边我们也想让他支持。对吧。也编译成这样一个浏览器支持的,因为前面咱们只加了一个,所以呢,在。咱们打包的这个CS文件里面只有这个变化了,对吧,下面那几个内容对不对,那你看我现在也加上了,加上之后也同样的道理干嘛呀。先将这个转成什么转成。好。看家的顺序。一样的啊。加这个对吧,让它转,转完再编译,编译完之后再怎么办,再打包,然后再加个页面,你看这样的过程,我们看一下可不可以啊。嗯,编译一下。
11:03
那如果看到这里边儿,如果都生成了,你看。对吧,都生成了。是不是就是证明是可以的,对吧。所以其他的我们也在后边去写,这个例子,我在这块也给你写啊。好,这节课我们就讲到这里。
我来说两句