00:01
下面呢,我们在进行高级配置之前,我们先把基本代码先写好,然后运行一下看下效果。OK,我们来新建一个SSC目录,在这下面呢写RA代码,RA代码呢也是首先需要一个主文件命令JS。那么我们这里呢,使用的是最新的RA18这个版本去构建的,所以我们RA18这个版本呢,它的写法会稍微和17之前的版本有有所区别。我们引入RA,然后呢,引入来进行渲染。但是这里呢,我们要使用的是那个client这个包。要注意啊,18、这个渲染的方法有些变化,那么它应该怎么渲染呢?它首先先得得到一个root,通过re DOM的一个create root root方法来生成一个咱们的root,通过root去渲染。好,这里面的船我们要去document。
01:01
点刚才那个怎么ID,我们要去找到的一个元素啊。那么这个元素就是我们未来这个。要找到的这个根节点。可以通过root的这个read方法来渲染我们的这个APP组件。当然,APP组件也需要引入。那么。呃的话呢,他现在18推荐使用这个ch Rose方法去渲染我们的这个APP组件,所以我们最终的写法是这个样子。好,然后呢,我们还要定义APP组件。那么组件呢?我们通常习惯写的是JXX。好,它的写法呢,无非就是也是引入。然后呢,通过一个函数,比如APP。来进行渲染,返回我们要渲染的内容,当然呢,我这里渲染的内容就简单一点啊,就直接渲染一个APP,然后呢,再把他们也报了出去。
02:08
那么APP自己就暴露了,所以最终呢,我们渲染的内容就是一个APP这个一个标签。好了,那么这里呢,我们能看到在race中呢,我们都引入了这个RA对吧。为什么要引入呢?这个原因就是因为我们在这里使用了JS语法,包括下面这里也使用了,这叫JS语法。JSS语法呢,它最终都要被BA编译成JS语法,而编译成dress语法呢,它实际上的语法叫element。它是通过create element来去创建这个虚拟对象。那么当它编译成那个语法的时候,这时候就要就得用上这个了。所以我们在此引入RA呢,是为了它将来编译成JS语法的时候,能够编译后的语法呢,能够找到这个依赖,从而能够运行,所以我们在使用RA的JS语法的时候,都需要引入这个RA这个库啊。
03:05
好,那么我们写好了这个基本代码,当然我们还需要写这个HL文件啊,因为最终他要。所有内容呢,都需要在HL中进行渲染。HL的话呢,它不需要写太多的内容。我们至少要准备一个div,并且ID要叫APP。那么之所以ID加APP的原因就是因为我们在那里JS的时候,我们是把组件渲染到这个APP节点上,所以我们这里要渲染的节点必须要和HL的这个ID节点必须要一致,这样才能渲染。好,那么到此为止呢,我们把re的基本配置搭建好了,但是现在还存在一些问题,我们后续要解决啊,但当然解决之前我们先把依赖下载一下。我们先把这个派外派学员的依赖下载一下。我们从上往下,一点一缕。我们需要用yes in,所以要下载的插件我们需要解决HL需要下载HL的插件。
04:06
然后处理样是有好多load,我们分别要安装POS的。对吧,然后后C呢,还有个依赖需要安装。往下走,还有less。萨斯呢?还是要按照萨。还有standard等等,好,我们先安装一部分啊。然后接下来呢,往下走。我们还有这个需要处理。去安装,那么安装BA load的话呢,它除了要安装BA load以外,还需要安装BA的核心包,因为这是BA需要运行的东西,同时还需要为BA安装它相关的依赖就是这个B。
05:07
那么这是BA的依赖。除此之外呢,我们yes依赖的其实还有啊,前面没有安装好,就是这个APP,它叫yes it con APP。需要安装,那么下面这个大包APP呢,咱们这里刚好下载了,所以下面的不需要管了。好,到这里呢,把BA和E依赖呢全都管理好了,然后我们往下走一走,看看还有没有什么依赖,OK,还有一个DB sor学。OK,然后派相关的依赖呢,我们也需要安装一下。对吧,三个外派相关的依赖。好,这里呢,我们用上了RA,所以RA的依赖需要装一下RA和RA,那么它们是不需要添加到开发依赖的,他们就是我们线上运行的依赖。
06:06
好了,那么到这里呢,我们可以看一下我们安装的什么啊。我们安装了处理的一些依赖,安装了处理样式的依赖,安装了处理处理等依赖啊,然后呢,把PA这些依赖的安装好了,同时也安装了我们最新的RA的这个库。好了,那么下面呢,我们可以尝试去启动他们,然后去看看效果,当启动的时候可能会报一个错误啊,待会我们来去研究。我们的配置指定D,然后呢,这里我们通过WiFi和serve去启动我们的serve方方式。启动我们的dev server的指令,然后呢,指定我们的配置文件啊,是这个con下面的外派和点con.d.GS。好,那么这里呢,我们再配置一个star指令。那么它运行的这张偏deb。
07:00
OK,那么我们只要PM大就好了,那么注意还有一些小问题我们需要解决啊。一血。好,这时候他就报错了啊,他说模块构建失败什么呢?他说我们来看啊,首先报错的关键字有bloer,然后提示的是魅JS,我们使用了这个baible pre RA APP这个配置,它说这个配置呢,需要用上一个no的env,或者是bab env的一个环境变量,如果你没有提供的话啊,接收的是MB fun的话,它就会报错。那么这个意思就是我们B这个pre APP这个绿色啊,它必须要一个环境变量来指定,它是位于开发环境,生产环节是测试环境,必须要有一个变量来指定,而我们是开发环境,就必须要指定开发环境。对吧,那么有同学可能想到我们在PA DV serve这里啊,DVDS这里我们配置过mode为development,但是这个只是它这个配置,它也会定一个环境变量,但这个环境变量是我们代码运行的时候能够读取的环境变量,并不是我们配置BA配置运行的时候能读取的环境变电量,所以我们还需要专门定义。
08:16
那么怎么指定这个黄金变量呢?诶,这时候我们就会给大家介绍有一个库啊。那么去找库的话呢,我们可以去百度上找,也可以去AR,可以去NPM,那么去NPM上找是最方便的。因为NPM上找的东西,他不会找到一些莫须有的一些东西,他找到东西一定都可以通过NPM下载的。有个东西叫cross env。它是专门为我们去定义黄金变量的一个库啊。那么用途是很多人在用的。怎么用呢?我们首先要下载这个crossv。下载完成之后呢,我们只需要在启动外派前面加上一个这样指令,Cross env,定义一个环境变量的key,以及它的值是多少就好了。
09:09
OK。那么这样呢,它就会为我们去定义这个啊,那么刚刚那个报错呢,其实它提示我们至少要定义这个not env或者是BBV,我们挑一个定义就好了。那么我们是开发环境,所以定义成development,诶这样呢就能解决这个报错了,我们再运行。OK,他就报错了,好这时候呢,又报另外一个错误啊,他说模块没有找到,不能解析这个APP组件。什么意思呢?这里我们来看一下。我们在魅JS这里引入了APP组件,那么它解析不到原因就是因为APP的组件的文件扩展名是GSS,而而咱们的WiFi能默认只能自动补全的文件,你是GS文件,也就是说你如果是GS文件,它能自动补全。
10:00
所以第一种做法呢,你可以把GSX改成GS,那么它就能识别了。但是这时候带来一个问题,就是开发的时候我们就希望文件扩展名就是点GX啊,对吧,那该怎么办呢。这个时候我们需要在这里配置选项,解析选项。解析选项呢,就是派去解析模块的时候会加载的选项。就通过import引入模块,解析模块的时候会加载的选项。对吧。那么其中我们可以给它加载这个文件扩展名tens。告诉他JS文件啊,JS文件。当然还有Jason等文件啊。它会自动补全文件扩展名。那么意思就是他去判加载文件的时候,他首先会去用点GSS看看这个文件能不能加载,如果不能加载,再看JS能不能加载,如果不能加载,再看JS文件能不加载,如果不能加载的话,就会报刚刚那个错误,当然如果其中有一个文件可以加载,后面的就不看了。
11:08
好了,改了配置呢,我们这个PE需要重新启动。那么这个时候他就会去以点JS文件去补全文件扩展名,诶这个时候啊,咱们APP就渲染了。刷新。对吧,没有任何问题。那么这时候呢,我们再加一点代码啊,来看一下我们的样式啊,这些能不能处理,我们可以在这里新建一个配置目录,在这下面呢,我们去定义一些组件。我们可以定一个比方说home之间。好,然后呢,Index。好,一样的写法,我们引入这个,我们把组件多写几个。OK,然后呢,通过方式。我们第一个home组件。这里呢,我们都用最简单的一个工厂函数组件啊。
12:00
然后呢,暴露的话呢,可以简单的直接暴露,OK return,我们想要的一些内容。呃,Return的话呢,我们就return这个home了。好了,然后呢,我们把组件呢,在这里引进来,然后一起渲染。OK,然后呢,在下面进行使用啊,那么为了那么我们VS中的组件啊,必须有个跟标签,所以我们必须要包一个跟标签div,这样才能运行。OK,那么这样呢,它就会渲染到home了,那么这时候呢,我们给home呢加点样式。在下面呢,写一个industrial nice,我们加点样式。我们就加一个home的title吧,点home给抬它的标题。然后呢,把它颜色改一下,我们式呢简单写一写就好了,不需要写太复杂啊,OK,然后呢,我们把样式文件在home这里把它引进来,让它按其生效。
13:09
好了,那么刷新。当然,这里我们还需要给他一个class name home title,这样的才可能会生效。对吧,诶它就变成粉色的了,没有问题。好,最后呢,我们要测试一个什么功能呢?我们要测试一下我们的这个HR功能,对吧,我们来一左右来看一下。我们八功能就是当我一旦改动里面代码,它不会更新整个页面,不会刷新整个页面,而是更新局部代码,我们看一下这个我们的host处行不行。首先我一样的,我把这个颜色呢,比如说我改成。已保存,诶这时候呢,它就能做到这个热更新了,它只更新这个变化的这个样式,其他内容是没有变的,所以样式HMR是没问题的。这个我们之前说的操作一直都没有问题,因为通过咱们的这个cell的,他会帮我们把HR功能给做好。
14:07
好,那么我们看看J功能行不行呢?我们来改一下组件代码。Home,这后面呢,我们加点小尾巴易保存。这个时候啊,你会发现整个页面都刷新了,仔细看这里,还一看打印结果。我们刷新,我们再改一下,比如说把小尾巴删掉一保存。你看整个页面都刷新了啊,所以咱们的这个JS的默认是没办法做这个HMR的。那么要做HMR呢?可以用我们之前的方式去做什么,If modu hot Mo hot accept,这都行。但是这样做的很麻烦啊,所以RA或者是view呢,它都提供了一些插件来帮助我们自动的去做HR功能。那么的插件呢,我们来看一下。同样的,在NPM上搜,关键字呢,就是refresh的一个插件。
15:01
在过去呢,他用的是hot load去做这个插件的,但是现在官方呢,已经更新了另外一个插件啊。就叫这个插件,它是专门做的HMR功能的热更新的。好了,呃,那么怎么用呢?我们首先要下载,既要安装这个插件,还需要安装一个RA refresh的插件,两个都要安装,所以这里要注意一下。OK,我们终止一下,我们为了想GS的所有模块的热更新,我们需要再次做些操作。OK,我们这个复制没复制好。好了,复制好,复制好之后怎么用呢?往下走,下面就有用法。首先我们需要设置后为处,然后呢再引入这个插件。引入这个refresh这个插件。
16:02
好,引入之后呢,首先第一个在double的plug里设置这个插件设置,那么它这里判断一下,只有开发环境用,因为我们只设置开发环境,所以这里不需要判断了,同时还需要在最外面的插件这里去拗一下这个插件,那么我们配置就完成了。OK。复制这个插件。来整体用法呢,就是在BA log这里配置的时候加一个block,在这里面把我们的这个插件给整上去。同时还需要在最下面去用这个插件。那么最终可以达到。这个我们代码的一个热更新。那么这里呢,做法都是HMR功能啊。激活GS的包功能。好,那么这个时候我们再去运行看效果。
17:01
那么样式呢,我们就不做测试了,我们直接看JS的效果就好了。好,这时候我们再去改GS啊,我们来看看他打印和相应的效果。已保存,诶这时候你看到啊,它只更新了这个模块,其他模块就没有变。所以咱们的RA的这个HR功能啊,首先第一个我们要调整hot为它会开启HMR。开启HMR之后呢,我们具体的HMR都需要自己来操作啊,那么样式的HMR呢,它是通过cell做到的。而GMR呢,需要下载两个包啊,通过这两个包去完成这个GMR,从而达到这两块的HMR都做好了。那么这样的我们开发的时候才会更舒心。好,那么做完这些呢,其实啊,我们开发中还存在一个问题,我们来用一下,我们用一下我们的这个前端路由。
18:01
来我们重重新来一遍啊,我们下载一下rest这个这个包,我们用一下这个rest。请登录由。好,那么前端路由的话呢,我们这里再定一个路由组件啊,比如说叫about。叫啥都行,我们主要是测试代码。OK,然后这个代码呢,我也是能复制就复制啊,我们尽可能简单一点,然后一时呢,我也不需要过多调整,就叫Bo。然后呢,不需要样式。好了,那么定义好这个组件,我们在APP这里写点代码。我在这里呢写一个。要使用这个咱们的这个前端路由的话呢,我们首先第一步啊,需要在这里引入这个前端路由的一个内容。叫做brother。那么前端路由呢?它必须要包裹在这个brother罗下,它才能够得到解析。
19:00
因为browse的内部会通通过con语法做一些咱们路由参数的一些通信啊等等,所以我们必须要包裹在browse lot下,然后回到我们的APP这里,我APP这里呢,我做一个导航啊。左边呢是一个UI来做一个link,一个路由链接。来我们从这个raro这里面呢,引入我们的一个路由链接导航link组件。来进行路由跳转。OK,另一个组件呢,它第一个呢,表示跳转到home,错的地址呢,来决定我们跳转到哪里跳转的home。然后再来一个跳到about,那么这里面呢,写一发这about就好了,那么这里呢,是一个导航链接啊,然后下面呢,我们要加载显示我们的路由组件。加载显示路由组件呢,我们用上两个东西。一个是RO,一个是root。
20:00
好,这里也要特别注意,就是我们用的root do的版本呢,是六年级的版本,六年级的版本呢,将Switch改成了root了,Root就是我们这里要生成多个Rose,就要通过RO包裹它们。Rose负责包裹他们啊,来渲染我们的不同的root。每一个Rose呢,就是一个路由组件,它需要指定我们的路由路径,Pass和要加载的路由组件是哪个,对吧?Component啊,不是component啊,是element。在之前呢,是这个。Component,但是在呢,它这个六的版本改成了element。所以这里发生了一些变化,这个版本变化,所以大家需要对呢有一点点熟悉。OK,然后呢,下面呢,这里我们再来一个about。好了,那么一个路由的一个功能的基本功能就出来了,我们下面来看效果啊,启动一下。
21:10
好,这时候我们就可以全部放大一起来看了。以下的home about都没加载,因为home必须要写上home about必须写成about,点击home,那么它下面呢,应该要加载渲染这个home组件啊。呃,我们来看啊,斜杠home,斜杠about,来看看他这里有没有报错。方式呢?不是一个合理的东西,你必须要返回主界,而不是一个内容。啊,这里面呢,我们。需要返回一个组件。来我们来看啊,那么之后点击home加载home,点击about加载home about这里面呢,我们需要放置组件,而不是一个咱们的一个内容啊,一个组件还不是一个组件的一个函数,这是不行的。
22:07
好啊,那么这样做呢,当然是没问题的,页面也OK了,但是刚刚就出现这个问题,就是一旦我们在这个路由下面去刷新啊,就会发现404它找不到。对吧,那么这个问题是什么呢?这个问题就是因为我们这个de server,它呢,当你去访问这个地址的时候,它就会去de server里面找资源啊,会去source里面找资源,但source下面并没有一个叫资源。我们之前打包过,我们打包授权资源的最外面是一个in,然后下面都是在什么sta下面有JA,有S,有各种东西,但是没有一个资源叫做about,也没有一个资源叫做home的,所以这样就会有问题。那么遇到这些资源应该怎么办呢?应该还是让它返回这个index HL,那么这样才可以。返回到index HL的话呢,这样它才能够啊解析这个内容。
23:02
所以就是解决这个我们前端路由刷新404的问题啊,解决方法就是只要他访问的是404的话,就给它重定向到我们的D资源这里,那么资源一旦加载,它会自己去匹配路径,从而渲染路由的。好,那这个做法呢,我们可以看一下外派官方文档。在DV server配置中。配置里面的低于sol里面。他有一个专门解决这个问题的,叫history API。啊,它专门就是让你当你使用H5的这个history API行动路由的时候啊,那么它就会帮你去返回,返回这些页面的时候,可能会出现四零,那么设置它为数的话,它就会返回这个HL页面,从而解决这个404问题。来,我们要改配置。这个是解决啊,这个咱们的前端路由刷新404的问题啊。
24:03
那么改了配置,一定记得要重启我们的服务,那么这个时候啊,我们就再怎么刷新都OK了。来首先正常访问是没有问题的,我们刷新刷新刷新,哎也没问题,因为它一旦发回404的话,就会重新返回这个EXHL给你,所以这时候它会得到解析,所以就没问题了。好,然后呢,这里呢,它一上来呢,这个打包的情况,我们通过source这边可以看到啊,现在呢,它目前啊,除了model model代码会打包成一个Windows,然后呢,其他所有组机代码都打包到魅JS中了,然后他们的这个一些哈希值之类的关系呢,会打包到time里面。对吧,但是我们开发的时候希望路由主机单独打包,所以我们也可以用上路由揽加载技术。那么木杆加载技术呢?对他们的引入就需要做些处理。
25:01
那么写法就是一个函数啊,当然这里面我们要用上语法啊。语法里面呢,要用上路由哪加载啊,需要加载两个,一个一个主机,一个函数,一个叫s space的主机,一个叫LA的函数。LA函数负责定义。这个路由懒加载的组件。这都是right的语法。OK。然后呢,方案的话呢,就直接写在这就好了。他内部会帮你做处理的。好的,也是要包一个组件啊,然后呢,这里面呢,我们还需要包一个suspens,所以在这外面包一个suspens,咱们呢,软件的组件必须要包裹的suspens里面才能够实现软下载。OK,然后这里面呢,需要指定一个在还没揽加载之前,他应该渲染什么,我们这里就简单一点,渲染一个loading啊,手写一个load。
26:07
好了,那么这就是RA中的这个鹿茸哪加载的用法?那么洛打胶伞呢?只要我们配置了那个spli t。创V对吧,他自己的就会将将这个import动态加载的文件呢,进行单独打包,所以打包的文件就会多一点,下面我们刷新看下火。这时候打包的JS呢,你会发现它就会多一些JS了啊对吧,这个是about的JS,因为现在是about,点击home呢,它自然就会有home的JS,而且通过network去查看的话呢,它呢一上来。来啊以上呢,它只会加载这个,因为我们只用home啊,所以只加载的一些这个JS。当我点击about的时候,才会动态下载about,所以这个路由的连载呢也可以实现。然后呢,如果你想给它取个名字的话呢,当然也可以在这里使用这个魔法命名。
27:03
PE t name。啊,当然不是为数啊,得写上我们的组件名称。OK,那么将来打包的时候,它就会有相应的名字了。好了,到这里呢,我们基本上完成了我们这些各种配置啊,我们就是加上了我们的一个GR功能的配置,以及呢解决这个刷新的时候404的问题,还有就是让它自动可以补全GSS的一个文件扩展名。好,到这里呢,再一看好像OK了,但是实际上还有一些问题我们需要处理的。什么问题呢?诶将来呢,我们网站上想整一个图标。
我来说两句