13-尚硅谷-webpack从入门到精通-css兼容性处理

学习的是CS的兼容性处理啊，我们来打开Vs code，把零九的复制一个来个十啊。叫CS兼容性处理。那么我们来写代码啊，在这里面呢，我们来修改这个con配置啊，把这些代码的注释呢之前删掉，我们来考虑我们的这个配置写法。好，这样呢，我们当我们要去做CS兼容性处理啊，那么我们都是要做一个啊，都需要使用个。那么这个呢，叫做positive。Post呢，要想在中使用的话呢，得使用一个东西叫做post啊在中使用。那么除了post load呢，还需要使用插件啊，叫做。Pres感烟。好，这个插件呢，能够帮助我poss识别某些环境，从而加载指定的配置啊，能够让我们兼容性呢，做到精确到某一个浏览器的版本。

好了，那么接下来该怎么写呢？那么在写之前，我们先把这两个库呢下载好。打开termin，通过NP mi，诶，下载这两个包。OK啊，那么大家一定要确保啊，这两个包呢下载完成啊。好，下载完成之后呢，待会我们就可以接着去写相应的配置。好，写完不用管它了。那接下来写配置啊，那配置呢，有两种写法啊，这我们先看第一种，第一种呢，我们叫使用load的默认配置。比方说我这个，哎，这种写法呢，就是使用的默认配置，我没有修改它任何东西，哎，比如说我现在这样写啊。那么这是使用默认配置，当然了，现在我们不能使用默认配置啊，我们得修改，所以你要修改这个配置的话呢，那么就得写成一个对象的方式。

等于POS。我目前这样写，其实等价于上面这样写。所以我们对比一下，就如果我不要修改配置，那当然是上面这样写的简单的多啊，所以我们倾向于上面这样写。但是啊，当你想修改配置的时候呢，诶就得加后面一个参数了，叫options。在options里面修改这个配置。啊，要写哪些呢。为post，就是固定写法。好，下面这个呢叫plugins。就是使用POS load的一些插件。好，插件的返回值呢，是个数组啊，在这里面写插件。啊，使用呢，使用哪个呢，就是我们刚刚下载的这个post啊。那么大家有兴趣的可以多看一下posts的官网，那么它上面有很多很多插件，其中这个插件呢，就是帮助派，诶帮助干嘛呢。

帮助啊。首先找到这个brothers this。这不，例子在哪呢？在package dress中。里面的配置。通过配置。通过配置，通过配置。啊，加载指定的这个兼容性。C样式啊通过。这里面的配置呢，将来直接接受信息配置，所以呢，我们现在还需要做一步，就是写这个browse list。意思呢，得写在这个package dress中。啊，Page呢，如果你这个pageson在里面，你就写在里面啊，而我们呢，因为所有东西都下在最外面，所以我们在外面，在外面写也是一样的。好，加一个配置叫做Le，只能为一个对象。

这项里面呢，可以写两个参数，哎，代表开发环境的一个配置，对吧，职位数组啊和。咱们生产环境的配置。好，那么呢，这里面我们要写的东西啊，有这些，比如说。One。咱们的。对吧，不是。好，当然了，咱们这个引号啊，也变成，因为是pan文件啊，得写成个双引号。那么这代表什么意思，这代表啊，金融最近的一个CH的一个版本啊，Chome浏览器的版本，那其他浏览器呢，都是一样一些啊，比如说金融最近的fire fire。啊，一个版本啊，接受最近的一个sa浏览器一个版本，哎，就这样写就够了啊就这样写。好，所以呢，如果是开发模式啊，我们不需要做太多，哎，只要兼容一些主要的一些调试的浏览器的版本就足够了。哎，但生产环境呢，就得多写一点，比如说大于0.2的百分比。

就99%。脑袋了。就是不要啊已经死的浏览器，比方说IE10啊，这些浏览器呢，你兼容没有意义啊，就不要它。还有呢，Open。啊，所有就open mini，所有呢，早就死亡了啊，所以呢不要它了啊，而且现在在国内呢，基本上没有人使用这样的东西，所以呢全都不要啊。那么这样的就是基本上就是兼容所有浏览器，但是这些所有浏览器呢，不要以及死的浏览器啊，也不要open迷你的浏览器，所以呢，这一块呢，做了绝大部分的。那么我们把这配置呢，拿过来复制一份啊，在这写一写。那么更多的是配置呢？大家可以去get up去搜这个关键字叫做browse this，那get up上面会有很多啊，会有个仓库，就是browse this来介绍咱们这儿可以写哪些参数，以及对参数呢？有详细的介绍，大家到时候看看啊。就最近的浏览器，浏览器，最近的fire，最近的suffer，那么大于0.2%，就是基本上全部的浏览器了，那么不要已经死的啊，也不要open mini啊，做主要的一些大部分的市面上的所有流览器的一些性处理啊。

好了，那么我们接下来呢，验证一下，看一下到底靠谱还是不靠谱。我们呢把样式呢，稍微改动一下啊，因为咱们现在的样式啊，是没有兼容性问题的，所以我们家里一些有问题的兼容性样式，比如说display。然后呢，再来加一个比方说一个C3的样式啊，Back face visibility。这是flash布局啊，这个呢是一个隐藏背面的一个效果啊，当然因为我们没有3D变换啊，所以这个东西呢是看不出来的，但这两个样式呢，是在一些特定的浏览器呢，是有兼容性问题的啊。好，那么我们来看一下。首先啊，我们当前环境呢，诶是development对吧。你要想它生效这个development这个环境呢，你们得改啊，得这样写一个参数啊，这里还需要怎样。

就1万是代表开发环境。那么代表生产环境。生产黄金啊。对吧，那么默认情况下呢，啊，默认啊，它是是是看市场环境的。所以我待会运行的话呢，它会看生产环境啊，跟我们这个啊，这个还是是没关系的啊，跟这个模式是没关系的啊。它的默认情况下就是找生产环境，那怎么样变成开发环境呢？你得设置环境变量。这环极变量指的是no JS no JS中的环极变量啊，这是no no JS的极变量。就是note这个进程在运行的时候临时的一些环境变量。通过。点uv.no的UV，哎，设置no的UV这个环境变量，哎，等于什么呢？等于pro development，那么这样呢才行啊。

好，所以呢，我们要把这句话看成C啊，在这里写上。啊叫做设置变量。当然这个是一个字符串形式，字符串。好，这样呢，他呢就会以这个开发环境去做，而开发环境呢，我们主要做的兼容性啊，是这个，呃，最近的浏览器的一些金融性，我们来验证一下来验证。好，我们在终端中打开啊，在终端打开输入ipad来运行一下。好，句情完毕啊，我们来打开build里面的代码，看一下这个C构机后的内容，诶，你会发现呢，诶，他对这个back，这个visibility做了接入器处理。当然display呢，Lets呢，它是没有做的啊，Displayles是没有做的，没有动啊，并没有变化。好，我们再调一下，哎，调什么呢，将这个注释。

我们说了，当他不设置环境变量就没有，没有的话呢，哎，它默认就会找这个生产环境去去做。所以我们再运行一下，效果就会有些不一样。诶，再看这个CS，这时候你会发现display为Fla呢，它还多了个display为web box，诶这个呢，就做了一个兼容性处理啊，做了个兼容性处理。说明呢，在最近的浏览器啊，这个fans这个维字变形呢，是要存在兼容器问题的。啊，Flash呢基本上没有，但是呢，如果你要考虑大部分浏览器呢，那flash兼容性呢也得走。你看他全都帮我们做好了。也就是说我们在写样式的时候呢，就不用太过操心这个金容性问题，而可以把它也都交给工具，让工具的自动去完成，诶这样呢，就大大的解放了程序员的一些啊，一些复杂的操作啊，让程序员呢，只要考虑最简单一些东西啊，通过工具呢，把我们自动做兼容性处理。

那么这以上呢，就是我们的post的一个处理啊，使用的post load加上一个post这个插件啊，然后呢，在page中配置这个process list只是post，它以怎样的环境去做相应的。那么这里要特别注意就是生产环境呢，是默认的配置。你要想激活开发环境，必须设置process.v.V等于，那么这个开发环境呢才会生效啊，开发环境才生效。好，当然开发环境，生产环境呢，不一定啊，都需要这样写，你可以写些其他的位置。更动的位置呢，大家可以去这个up搜索这个list，可以看到相应的结果啊。那么这里就是我们的一个CS兼容性处理的方案，好。