00:00
大家好,我是学习园地的特约讲师高老峰,上节课咱们学了包着使用,当然了,在没有学外派之前呢,咱们只是学习了NPMNPM的命令怎么使用,并没有将NPM下载的包在我们项目里边是如何应用的,当然了,我们也简单的应用一下,对吧,借助于呃,Common JS啊,对吧,里边包含这样的一个使用。那这节课呢,咱们就应用一下,当然也是简单应用一下啊,咱们来解决一下ES6的语法在呃,老浏览器里边的一些兼容性的问题。因为不管是P还是CS还是加块,都存在各种浏览器的接入的问题,当然了,现在新的浏览器呢,都存行一些ma的这样的一个规范,所以呢,支持加块的语法,包括ES的语法都是比较好的,但是还是有个别浏览器呢,嗯,对,它是不兼容的,那我们可以看兼容的表,这个ES6兼容的表,看一些E6的新的语法,哪些语法在哪个浏览器下边是支持的,你可以去看一下,完了这个呢,咱们现在没有学ES6呢,就嗯,不去多说了。
01:00
那像我们呃,上节课写的一些例子,你看我用到了cost at,其实呢,这些呢,就是最简单的ES6的一些语法,对吧,但是这些语法呢,老子浏览器可能不支持,对不对,那我们就可以把它转成ES5的语法,那转成ES5的语法。我们就要知道有两种转换方式,一种是在线转换,所谓的在线转换就是在我们RTM文件里边,通过加载一些呃,工具包。那么把它转换成ES5的语法,这样的不太好的地方干嘛呢?就是用户每次访问的时候都会把ES6的代码加载过来,把转换包加载过来,然后呢,在页面上去,嗯,重新编辑渲染,然后浏览器的执行,所以这种方式呢,每次用户访问每个客户端都会执行一遍,会加大页面的渲染时间,如果你的代码比较少的话,对吧,还可以,如果有大量的代码,这种方式显然是不合适的,所以呢,我们就提前编译,提前编译什么意思呢?就是在服务器端用node把它生成,也就是用户开发的时候,就成员开发的时候写的是ES6的语法,在服务器端呢,把它转成了。
02:04
什么ES的这样的语法?然后用户每次访问的时候呢,访问的就是ES5的语法,这样的浏览器就不会有渲染的事件。对吧,那这转换工具都有哪些呢?一个是BB,呃还有什么,呃,GS叉,那这些呢,还有其他的,其他就不用了,B还是比较常用的。那这些呢,都是咱们在里边经常用到的一些技术,那这里边我就给大家简单演示一下,那先看一下在线转换组转换,但这种方式用的不多啊,我只给大家演示一下,所以咱们用发布去,呃,在线去转换一下,当然那这个是在页面里边转换,所以呢,我需要做一个RTM文件。我们做一个2TM文件,我们叫做demo.tl做一个这样的个文件,然后呢,我们加上。啊,比如说我就写最简单的了,因为咱们现在不学太多的语法name,比如说我们叫做啊学学。学习园地。
03:01
然后我们来一个log name.log我们打印一下。当然这个是ES6语法,像现在新的浏览器这肯定都是支持的,那么嗯,F12看一下,你看学学你打印了对不对,那我们看一下,呃,用IE看一下,因为IE可以调整浏览器。我们把鼠标放在这块,这个是拍一。啊,也是我们打印F12反应的。刷新一下。你看新版浏览器都是支持的,但是呢,我这块调一下,比如说A98,你看语法错误就不支持了,对不对。IE8呢?看一下更多的识别这样的语法呢,对吧,这也不行,也不支持了,对不对,那。我想要这些代码,在这个浏览器之时,我在代码不动的情况下,我就可以加一个转换器,当然了,我们可以用NPM包去装这个bub,对吧,那我们在服务器的转换用IM包中,那如果这个呢,我们还是用静态资源库里边去查找一下,比如说查找一下BUBA。用这个吧。
04:00
最新版本六点多,然后呢,新版本我还没太用,不知道好不好使,那我就找一个老版本吧,那我们将这个代码拿过来,在这块我们。在在那个西边上,所以呢,我们。啊src,然后这只是演示一下,你随便用一下就行啊,拿过来就可以用了,那用过来它会将界面的所有script地方都给我们转换吗?不是默认这块的类型是默认是什么加script对不对,那我们这块就得需要手动加上的类型,加上B类型,这样的话它就会用这个功能转换,那我们先看一下转换完之后。加这个在新版本里边刷新一下。在线转化,有渲染的似的。重新启动一下。重新启动影响。F12。
05:01
还没有打印出来,那我换一个这个转换包换一个我们到。这个里面找一下啊,不是用这个用这个。这个因为浏览器的这个就代表发了,不是这个写错了,那我在这会换一个。再看一下这块。转换过来。重启一下。不上。对,可以转换对不对,那我们再看一下IE。刷新一下。这个缺少边I8,它转化成I8不行,那我们再调高一些版本。你看IE是可以了,来看一下IE9,因为一般的IE9之前的浏览器基本上我们都不考虑了,对不对,你看转换了对不对,但是它不一定转换成所有浏器都支持的,你要想转换所有浏览器支持的话,那你再去调整其他的方式对吧?那这是在客户端去渲染,那如果在服务器端渲染,这个是我们比较常用的一种方式去转换啊,但是代码你可以写成这个箭头函数E6对不对,那我们看一下在服务器的。
06:12
那我们就需要怎么着NPM包安装全局的一个,这个就把BB在服务器端装上,然后我们再写一些文件,我们就按照这个步骤,我们去呃操作一下,在服务器端呃渲染一下。看一下啊。呃,服务器端渲染一下,那我们。在。这个位置我们首先呢,要做的呢,一定是先安装什么。安装包对吧,安装这个,呃,这个包,然后全局安装,全局安装我们来看一下。安这个包全局安装怎么装,那咱们前面学过NPM对不对,然后install安装啊bubble BA。杠c Li,然后这个相当于就是C命令行的这个模式啊,然后杠G来全局安装。
07:02
按照他的步骤操作,然后一点给大家讲解一下。嗯。这个没有发现,也就是。我们的这个路径。没有发现,那没有发现的话,那我们就是NPM,我们先设置一下很费呃,Set设置一下这个镜像re GST,然后呃。设置这个命令,然后H。嗯。Htt。我找一下那个。转换的那个,不然太麻烦了。嗯。他这个镜像里还没有这个包,所以呢,他得设置成这个默认的,默认的使用这个转换一下。你再过来试下啊。
08:00
不是上。转过来。等待一下啊。因为在这个镜像里边。已经是这像这个镜像里边没有发现这个。你呢?嗯,在org里边,那我们再来使用这个全局安装,先看名称叫不叫做BA。嗯,大c Li杠到NPM没有错,对在是项能的多少。Org,现在咱转的是org下边也没有发现这个包,难道这个包去掉了吗?那咱们到它的呃。这里面搜索一下,看有没有这个。呃,BA。C Li。诶,有这个呀。
09:00
粘过来一下试试。过来就可。你到刚咱们前面少敲了一个啊,没关系。我问一下。先把装上。咱们忘装忘记了,那就得当前目录下用。你看一下这个慢啊。而我刚才快进了一下,把它装上了,那怎么测试它装没装上呢?使用BABBL-V看一下它的版本,大V小V看可不可以。
10:03
小A没有对吧,大V看一下它的什么,它的版本对吧,这样的话我们将这个怎么办,这个八部就装上了,那我们后边会使用八部这个命令。对吧,去使用。那加上这个之后,那我们就得什么,呃,创建一个这个我们要写程序的一个一个目录。那除了在这看出来这个八部已经装上了之后,我们再看一下这个在杰森里边,就是它的配置文件里边,我们有没有这个。你看。巴布这个对吧,已经装上了,也是这个版本已经有了,那已经有了的话,那我们,呃,这个说明八部已经装上了,装上之后呢,这个八部本身是有配置文件的,就是告诉我们,也就告诉八包将什么语法转成什么语法,需要有这个,那这个配置文件叫什么名啊,我们找一下,嗯。这块也就是,呃,上面那几个也不用执行啊,在项目目录下建一个这个文件。
11:04
建一个这个文件来。我们到我们这个项目下。新建一个文件。就这文件,在这文件里边也是阶层的格式,我们写上什么呢?写上这个插件。就喜欢这个健身,你看啊。告诉什么呢?设置编码规则,也就是通过ES2的编程,呃,ES2015的和这种格式的对不对,然后transform。设置这个转换的一个插件,这是它的一个固定的一个格式,就告诉BB你按什么规则使用什么插件去转换,是这意思的一个啊配置文件。然后呢,有了这个配置文件,那我们再看一下。然后我们就可以通过这条命令去把这些插件需要用到的工具再重新安装,比如八的这个对吧,还有我们需要这里边转换的ES2015的这个插件和transform。
12:00
这个插件对吧,和这个插件这几个一起都需要装上。NPM这块咱们又多学了一个,怎么办?可以直接安装什么?多个的。啊,出错了。这块应该是。复制。等一下,没有错了。等一下,他把这几个都装上。好做完了对吧,这几个一起都装上了,当然了,我们看一下这个,呃,JS的文件你看。把我们这几个需要的都装了什么样的版本,对不对,然后呢,我们需要在这里边新建呃源代码目录,比如说我们写项目的时候,通常呢,源代码我们都建一个目录,我们叫做什么src。Src下边把代码写在src,然后渲染到哪个目录下呢?那我们在这里边再新建一个,比如说建一个目录,我们比如说渲染完的目录叫做呃,LA这目先把这两完,这个是手先位置删掉。
13:14
都要在这个呃项目的根目录下,我们建议吧,呃目录。他也跑到这来。那没关系啊,然后在src里边我们就可以。在这里边新建我们的,呃,ES6的文件在这里边新建。一个。比如说我们叫做GS文件吧,在这里边新建。呃,GS的这块我们叫做inex.GS吧,这边写的一个文件啊,在这里边就是cos cost name等于。学。学习原地加上这个,然后呢,我们这里边name.log打印一下,就一个很简单的文件,当然你也可以是很复杂的一个文件里面,那我们就将这个目录下所有写的ES6语法的JS文件在开发阶段对吧上运行着,我们把它转到这里边去,那用什么命令转换呢?其实我们这块就可以直接写命令了。
14:13
写什么呢?写上八,将src下边的所有内容指定到。转换到什么LA目录下,所以这里边整个SM目录将输入到这个目录里边,这里SR指的是需要转换的目录,那指的输入内容的目录,杠W呢,其实就是这个观察的意思,对吧?监听这些文件编译输出编译的过程,那你看一下对吧?杠D呢,是指定一个目录的这样。有问题,然后你看,如果我们把这个写到这个里边去,写到哪里边去呢?咱前面也用过。你可以直接在密码直接现在用了啊,但是呢,你每次用的话,命令比较复杂,每次都得写,你比如说你每次都得写BA,因为我们这块看到这八部BA放大位已经看到这个命令是可以使用的了,对不对,可以看版本嘛,对吧?那。
15:03
如果我们每次都是bab在这块去转换,比如说将src下边的所有东西让让W看到这个转换过程让D指定到library目录下,你看是比较复杂的,对吧,每次都得这么写,那我们假如说整个编译过程,如果我们想把它写到脚本里边,怎么写呢?你看package这里边的文件里边,咱前面说了。哪块这里边儿咱们写过两个命令嘛,再加上build一下,将这个转换成这个对不对,那保存一下,保存一下之后,我们在这块就可以怎么的,我们就可以用n PM ru build。工程一下,这样的话,Build之后它就执行这个和这执行命令一样,那我们现在src下边我们写有音大于点加S,那我们看build生成完文件,它会在这个里边来,你刷新一下。到W可以看到这个转换过程,将这个里边的一个文件转到成这里边的这个文件,对吧,这是在服务器内渲染,那服务内渲染完了之后,LA下边应该JS,那你就可以拿去啊,而T去用了对不对,这就是一个八布转换的一个过程,当然能学习这个,因为学习。
16:06
啊。后边的其他的咱们做一下准备啊,你看这里边变成了严格模式,是不是把cos变成VR了,举行原地了,打学原地,你想这个代码能不能执行啊,肯定是能执行的,对不对,已经转换成这样的代码了,对吧。转成代码这样的话,呃,各种浏览器他就兼容了,对吧,这下边怎么没停呢。停一下吧,你看啊,进入level下边,你比如说noe啊,用代表S,你看学学也可以输出了,转换成这个代码对吧,不是咱们手写的,而是通过转换的。对吧,这样的一个过程。这就是服务器的渲染。当然看上去有点复杂,这个我写的这个实验步骤和我实际操作的实验步骤不太一样,因为咱们是拿前面的代码继续写的一个这个啊,没关系,都一样,你只要了解一下这些过程就行了,这样怎么用这个工具对吧,一步一步的。去了解一下,你自己做一下实验就可以了。
17:02
然后如果哪有问题的话,可以及时呃跟我交流啊,谢谢大家,这就是咱们一个NPM装扩展包的一个小练习,尽量将这里边的一些小语法都用一用,当然能学外pad或者后边学框架的时候使用脚手架什么的就会更方便一些。循序渐进,一点点来,好,谢谢大家,这句话我们就讲到这里。
我来说两句