00:01
下面我们来讲靠S。过去呢,我们使用BB对JS呢,做了一个兼容性处理。其中呢,又使用了at b preet inv这个制能预设啊,来处理我们这个E6加的一些金融性问题。它能够将EES6加的一些语法变译成咱们那些低级语法。比如说系统函数啊,三零乘符啊等等,这些都进行编译了。但是问题就是,如果我们用上一些函数,亦或是promise对象,或者是一些数组的一些高级方法。所谓的高级方法就指的是ES6以后推出的方法啊,它是没办法进行编译转换的。所以此时咱们代码会仍然存在兼容性问题,遇到低版本浏览器就会直接报错。所以这里呢,我们需要教大家如何彻底的解决咱们的JS的兼容性问题。我们一起来看。我们先验证一下,看它是不是存在兼容性问题。那么下面呢,我们需要写一段这个有金融性问题的语法。
01:03
比如说我们写个new,一个promise。那么这里我就简单写一段伪代码就好了。不需要写的太过复杂。那么一秒之后,我把pro状态给改了。好,我们去打包一下。问题没?我们可以观察打包输出的这个JS文件啊,看看这个promise语法有没有被转换。OK,编辑成功。我们打开这个页面啊。当然不是,打开这里,我们打开be,好的这个魅力,我们观察这个promise语法。我们能看到啊,这个promise地方完全没有做这个处理,它还是该是怎样是怎样的,没有任何的地方显示他这个做到处理的。所以这个promise呢,是一个六加的一个语法,那么将来如果你放到IE的其中,一旦运行它就会报错。
02:06
会存在一些金融性问题。我们希望遇到这种语法,咱们也能够转换。哎,这个时候我们就需要用成这个靠。靠,JS呢,是专门用来做六以上的一些语法的。Po呢是个术语,翻译过来叫垫片或者叫补丁啊,给咱们JS代码打补丁。简单讲就是我们找到社区中的提供的一些金融性的代码。然后呢,加载进来,这样呢,我们就可以在不兼容的这些浏览器中运行了。比方说我们想处理promise,我们将社区中自定义promise的实现已拨打,那么自然低版本浏览器就能够使用这个promise了,是不是?好,那么怎么去用这个cos呢?它用法呢,有好几种。啊。我们可以直接全部引入,也可以手动按群,我们一点点来操作啊。
03:05
直接引入呢,就是下载Co GS,然后直接用。那么目前cos的大版本是三这个大版本,所以我们就用这个三个大版。OK,引入下载成功,下面呢,我们在mids中将cos引进来,那么这个兼容性问题自然就解决了。旁边乱标。好,此时观察打包叔叔的一个文件情况,因为我们引入了一些依赖啊,所以他打包的时候会不太一样了。OK,这时候他打包生成了四个文件呀。Main就是ma ma就是我们通过动态导入生成的mass run time就是他们的一个依赖关系哈希值的一个文件,其中又生成了一个新的文件。
04:04
诶,他是为什么会打包生成呢。如果同学们有印象的话啊,回到咱们之前的chance trans out的配置上,它默认就有一个开组,能够将note代码单独打包成一个JS文件,那么这里就是将我们的这靠JS进行了单独打包,所以这里面包含的是靠S的所有配置。当然我这里就不一定研究了啊,那么有了靠GS呢,咱们的这个兼容性问题就能够迎刃而解。我们再回到我们的这个promise这里啊。这里promise语法还是用一个promise没有变对吧。但是在这个里面呢,它就会有对promise的一个自定义实现,看我们能不能搜到啊。这里面就有对promise的一个自定义实现,有了这个自定义实现的话呢,是这样的,如果你。它会检测Windows什么上有没有promise,有那就直接用就完事了,如果没有,诶,他就会用这个自定义实现,从而彻底解决我们promise的一个兼容性问题。
05:09
OK,那么大家也可以把这个代码去测试啊,当然它在低版本上去运行是没有问题的。但是这种做法呢,有个严重的问题,就是我们只用上promise一个语法,但是他却把所有其他语法的金融性问题全都加载进来,会把打包的文件体积变得很大。我们来看一下。这个打包的这个文件呢,达到200多KB的一个大小,非常大,所以这样呢反而得不偿失了,我们就想做你金融性问题,你给我搞这么大,那我不太好。所以他还有第二种做法,按需加载。二区加载,就是我们手动引入我们需要二次加载的这个包。我们可以点开note models啊,找到这个cos这个库。
06:06
那么在靠S里面我们就能看到。它提供了一些我们可以用的这个yes的一些模块,在这里面就有我们想要的promise的兼容性的包,我们引入就好了。按需加载意思就是需要我们手动啊,其实也不是按需加载,就是我们手动已落。呃,需要做的接入细胞,我们遇到什么语法就去引入什么内容就好了。OK,手都引入,我们再次打包。这样呢,它就会只打包咱们project中的一个语法,就是promise语法,所以整个文件体积就会小一点了。好了,OK,它重新打包了,那么重新打包的文件大小我们可以看一下,A仅仅有33KB,小的非常非常多。所以如果我们只用上其中一部分语法,可以像这样按下它,这是没问题的。
07:02
但这里又带来一个新的问题,就是我将来可能会用很多很多新语法。我每个这样手动引入,总有一天可能有一个我忘记入了,导致存在金融性问题,那么找起来就会很麻烦,很难处理啊。我们希望能做到,就是你能不能自动帮我们引入呢?是不是这样呢,我们只要写代码,它会自动的帮我们做,那这样多好。诶,这种方式应用方法。那么这里呢,我们就要用上这个。BA的配置呢,要像这个智能预设。它能帮我们去实现啊,我们这个Co GS里面的按序加载,它自动分析里面有没有E加的一些语法,如果有它会自动引入这个兼容性的这个包。诶,我们要配置的就是这个BB。Present烟V的话。呃,怎么配置呢?那么在Bible这个pre预设里面配置,我们需要给它加选项。要给他讲选项得写成数字的形式。
08:02
数,其中数组的第二参数就是对at b pre EE的一个配置选项,也就是它的options。我们可以写一个配置啊,这个配置呢,我们可以去这个官网上去查找。诶,我们可以找到double。中文的。在这里直接搜靠JS关键字。呃。稍等,呃,他这里跳的有点快啊。Jal。那么在这里它就有靠这些选项了,我们找到这个pres env这个选项啊,在这里你看是不是这样。呃,猜到一词。这里。因为是pres米里面的。呃,怎么办呢?我们首先要配置一个东西叫usepi。这个就是实现这个按需加载。这个就是所谓的二区加载自动引入。
09:05
那么我们还需要指定一下靠JS的版本啊,因为目前是三这个大版本,所以我们就靠JS。三啊,当然控S,我们看看这个配置是。和是连在一起的,所以我们这样写就好了。诶这样就够了,它就会自动引入这个相关的这个依赖报。呃,我们来一起打包看看啊,比如说我们这里再去加载一个磁带结容性的语法的问题啊,比如说数组呢,我们点一个数组。那么数组上面呢,有个方法啊,它呢是一个ES7的一个语法。我们来看看他最终能不能帮我们做到。OK,下面我们重新打包。那么重新打包的时候,B这个智能意识呢,它会自动分析我们这个代码的环境,发现它有新语法,会自动加载出它这个。
10:00
呃,需要兼容性的这个语法包,也就是兼容性的这个point,那么最终就可以实现这个功能了。好,这里面呢,我们可以直接搜啊,搜我们的。哎,那么这里就能看到这些方法,它的确被定义了,数组的一些includes方法已经被定义了。好了,那我们这里就不一一研究了啊,这里就能。看到。啊,它扩展了一些数字方法,我们这里就不研究了。好了,呃,所以这里呢,就是一个最终的一个做兼容性的一个方案,它会自动的分析我们代码中存在兼容性的问题的一些代码,然后自动的把相应的po补丁给引进来,这样呢,我们开发的时候呢,什么也不用管,什么也不用管,啥也不用引,它会自动的帮我们开发起来就非常的方便,从而彻底解决GS的兼容性问题。
我来说两句