00:01
下面呢,我们介绍一下HTML外派plug,它是如何去操作的。这里呢,有它的官方文档,我们打开。好,我们往上走一走。上面呢,这里有张图,就是介绍HL we APP它内部的一个工作运行原理。整个图呢,它的一个流程是这样的一个流程,从上。然后转到下。那么上面的意思就是它这里标了个流程啊,这是第一步。我们派呢,会开始咱们的一个编译创建comp,那么编译的时候呢,这时候就会触发咱们。HL wi APP设置的一些护,这时候就会开始要编译HL文件了。首先呢,它会为我们创建这个tag标签。比方说我们的标签啊,我们的link标签,Style标签等等啊,会创建这些标签,然后呢,去编译标签中的模板。
01:04
编译完成之后呢,将编译好的标签注入到咱们的HL中,让其生效,最终呢,呃,将这个注入好的HL。塞到我们的we pack的access里面,Comp的access里面,这样呢,We pack在输出的时候就会把这个资源输出出去了。那么在这个编译过程中呢?H me它内部呢,注册了这样几个钩子。注意,这是HM wi派打给你,你独有的,咱们的派是没有的。那么这1234566个宗旨呢?分别都是在不同的场景下执行的。比方说这一个啊,Before a set generation。这个就是在我们资源的tag标签生成的时候。那么开始出发,当然是生成之前必four嘛,所以此时还没生成那些标签。好,这个时候呢,他开始创建school标签、style标签、matter,这些标签创建好之后就会触发另外一个护,叫做auto set。
02:08
触发完之后呢,接下来他就会为标签分组,看哪些标签添加到head中,哪些标签添加到玻璃中。好,分好组之后呢?接下来出发,Al asset target groups,这时候就分好组。接下来就开始去编译咱们的这个里面的这些标签里面的一些模板代码。编译完之后呢,就会触发这个after ten execution,这个whose。好,最后呢,就是把我们的这些标签注入到HL中。那么注入之后呢,它就会接下来要发射文件了,那触发之前的叫before。好,Beforeit,之后它就会将文件塞给咱们的派,接下来出发,Afterit。OK,这里稍微要注意一下,就是这个after呢,并不代表这个文件已经被发射了,就是已经输出了。
03:00
因为呃,他这里呢,只是把文件交给了wepepa,在未来会输出,但并不是现在。所以这个after呢,并不代表咱们的这个资源输出舒适的。仅仅代表HL的工作,HL wi的工作做完了。所以呢,它大概有这样六个钩子函数,总结下来就是在创建之前。那么生成T之后。那分好组之后,然后执行里面的模板之后。然后呢,到这里里面的内容就全都改好了,接下来就是要输出了,在输出之前。然后呢,交给外派。那么说说这。所以有这样六个故事。好,回到我们这前面这个MY派这个插件中啊。我们要做的就是找到里面的一个runtime这个JS文件,我们需要把它的这个输出文件呢,变成一个赖的一个。标签,所以我们大家想,我们应该在哪一个whose里面做呢?这里有六个whose。
04:11
OK,我们要做的一个地方就是它这些标签都处理好了。那么我们就要开始去对它进行操作。我们就在这个al access groups在这里去做,在这个面去做,因为这时候T以及分号组,那么我们只要去组里面找到相应的这个文件,把它改改一下就好。啊,这然后改完之后呢,如果假设里面有模板呢,还可以继续编译,然后呢,再通过它的这个HL把它追加到我们的VP中,让它输出出去就好。所以咱们就在这个钩子函数中去完成我们想要做的操作。OK,那么这些构子函数呢?同样的是通过那个table宝去注册的。所以下面呢,会告诉他咱们的这个钩子函数的一个类型。
05:00
AuTo Groups呢是一个异步串行的一个钩子。啊,咱们知道这个就好了,然后呢,这个对象里面代表这个钩子介绍的一个参数是个对象,对象里面有hand tag Bo t这些参数。诶,Head head呢就是那就是即将要插入到head中的一些标签。波呢?就是要即将插入到玻璃中的表情。好,再往下走的话,我们能看到就是。这里呢,他写了一个某某代码,就是咱们怎么去使用这个hmm wi派发配网,这里面注入他们的hosts,第一种方式就是我们直接引入这个HM外派F大。但是咱们这里不是对于他来个直接依赖啊,所以我们可以采用第二种方式,就是通过这个c safe require,去引入这个HL wi。那么这样就引入了HL wi f。引入之后呢,我们需要在compiler的compilation这个公子函数中去注册。
06:03
注册的内容通过HL wi get hooks可以得到咱们的HL wi hooks。然后呢,通过whose去注册H6外派的钩子。那么我们大概就是这样的一个流程,那么在注册工程中,我们就要想办法找到我们的head。和这个body,在这里面找到runtime那个文件,想办法把它变成inline spring标签,那么这样就完成。好了,那么这里呢,就是hml wiin的一些内容介绍,包含了它内部的一个运行原理,大家可以看一下这个图啊,大概大概是怎么工作的,以及呢,它内部提供的几个钩子函数,当然我们主要是用的是auto asset groups。以及这些构子函数我们在插件中到底该怎么注册,那么下面有一个这样的一个示例代码。所以根据文档呢,我们大概就能推测啊,我们该如何操作呢。
我来说两句