00:00
下面呢,我们要去开发一些功能插件了。我们首先开发的是banner。它的作用呢?和之前的no一样,给打包输入的文件添加注释。不同的是,之前我们开发的load啊,只能在开发模式下生效,一旦是咱们的生产模式呢,它因为压缩的原因,所以之前开发的那个不能用了,而我们现在想开发的一个就是他不管什么模式啊,最终都有我们想要的东西。那该怎么办呢?好,这时候呢,我们就整理了一个开发思路啊,我们需要在文件输出前啊,添加注释,为什么在文件输出前呢。因为咱们JS文件是要进行编译的,包括压缩啊,都要做各种铺垫。他要经过一系列的流程,如果我们在很早阶段就做了一些添加的注释的话,很有可能在压缩阶段他会把注释直接给删掉,就相当于没加了,所以我们应该在它压缩完这些各种各种内容都处理好之后,再去添加注释,那么这个时候注释才会得到保留。
01:04
但是我们添加的时候还是要等他输出前再添加,你不能输出后了都输出了,你再添加就没意义了。所以我们要在打包输出前添加注释,这个时候我们就用上这个emit钩子。以面公司呢,我们再看一下它的介绍。0MISS钩子呢,在官网上有介绍啊,它是在输出资源到这个目录之前再执行了,如果下一个钩子呢,它就会在输出之后执行,这时候就来不及了,所以我们最晚的时候就是这个猴子可以做。好,所以我们在这里去获取到我们要打包输入的资源,那么这时候我们可以通过compilation.access拿到comp到对应的是整个构建,它上面主要有的是咱们的这个repair些配置,才对应的是资源的内容点access对吧?上节我们也看到了,这上面就有所有的资源文件,我们就是找到里面资源文件,给它加上相应的注释就好了。
02:08
好了,那么下面我们就可以看效果。下面我们在里面新建一个叫。外派DS这种文件。OK,然后在这里面呢,我们第一个类就叫banner。We。然后呢,将他暴露出去,然后外面好使用。好,我们一点写啊,我们直接写法就好了,因为通呢,如果你用不上,你可以先暂时不定义。那么这里有compare对象,我们通过对象点whose。找到它所的注册的钩子,然后呢,我们要给以密方法注册钩子。
03:02
它是一个一步串行的公子,我们可以通过t think去注册它。那么第一个参数是我们的插件名称,第二个参数就是我们要出这个钩子执行的这个回电函数,在这里我们可以得到comp对象。好了。那么我们要操作的内容很简单啊,我们首先第一步。获取咱们的输出的即将输出的资源。那么这里呢,我们可以通过compilation点可以拿到。但是输入资源呢,可能有图片资源等其他资源啊,还有自图标这些资源,这些图片这东西是没法操作的,你如果一操作这个图片就没法展示了。所以我们接下来要过滤。只保留啊JS和C。
04:01
其他资源我们就不做处理。其他资源也没法处理,一处理问题就有问题了,所以我们只保证这些资源,我们希望给他添加。好保留好资资源之后呢,因为可能JS有多个,CS有多个,所以就变利对吧。别剩下资源添加上我们的注释啊就可以了。好,那么获取即将数据资源的这个已经获取到了,我们就不看了,我们进行过滤啊,直接第二步filter。这时候我们可以得到我们想要的这个资源,Access。那么怎么过滤呢?我怎么知道它的这个资源是哪个呢?而且这个S啊,它是一个对,是一个对象啊,它是个对象。我们打印的话呢,看到它是个对象,它不能直接这样遍历。所以我们可以这样的,而且他这个对象上面呢,它的key和value key是这个资源路径,Value是资源的具体的内容。
05:04
还是一样啊,因为可能大家还是不太熟悉,我们可以打个第八个断点,然后去调试场。那么打第八个端点之后呢,我们这个插件是要用上才能看到效果,所以我们把插件用上。当你不熟悉的时候,你可以多去调试,看看这个数据长什么样子,不用去刻意的死记啊。那么调试呢,能够帮助你对它理解更好。然后呢,我们要把之前这个插件给关掉,因为之前插件有太多打印结果了,会干扰我,所以我先把它关掉了。OK,我们运行n PM run。好,运行成功呢,我们接下来在这里右键审查。稍等一片刻,它就会出现一个绿色的调试标志,我们点击,那么这里就会进来我们的这个调试,我们点击这个按钮,让它进入到下一个到底位置。
06:03
那么我们就可以在那里去调试这个compilation的一些内容了。好,右手边的这里就有装前作域下面的变量,其中有个access,它呢是一个通过pro进行代理的一个对象,它与的就是它具体的值,它是一个object类型。通过我们这样的类型就可看到,Key是一个文件名,当然也包含文件路径,Value是它具体的内容。我们现在呢要便利啊,目前因为只有GS啊,我们希望便利之后只保留GS代码,其他代码不保留。那么我们来看啊,该怎么去做,怎么做,这时候呢,我们就直接判断判断这个文件扩展名就好了,前面这个路径都无所谓,文件扩展名是以DJS结尾,或者是这个啊CS结尾的,那我就保留,否则其他的都不一样。所以这个时候我们这样做。来,我们首先定义一个我们需要处理的文件扩展名。
07:03
我们处理的是C文件啊,JS文件这些文件处理其他文件我们就不考虑了。然后呢,Access呢,它这个对象对象要便利的话呢,你可以用for in循环,当然也可以我们object key提取对象中的所有属性。然后直接for each遍利,这样编辑出来的就是它的这个属性名了,我们暂时还用不上属性值,因为我还要过滤呢。放映时呢,这里会得到一个咱们的一个pass啊,一个资源的一个路径。当前的一个或者pass吧。当前一个资源的一个路径。然后呢,我们要去找到它的文件扩展名。通过space切割。啊,其实你简单简单这样点切割,那么最右边的就是你要的。最右手臂就是我们想要的这个内容。
08:00
那么最右边的是怎么看呢?就是这个切割海的这个数组啊,取它的长度的减一,这个就是最后一个。那么看这个值在不在这个里面。来这里我们就得到文件扩展名了。然后通过判断它是否包含这个。第三,包含的话我就保留,不包含就过滤,我们就退出去,返回处就保留,返回false就过滤。所以这里是切割。将文件名切割。那么得到的内容呢,可能会是,比方说是个。呃,前面叉叉,然后后面是。这个。或是前面是叉叉叉。后面是C。文件扩展名永远在最后。然后呢,这里为了得到最后一个啊,所以我们去获取到最后一个文件扩展名,因为最后一个一定是扩展名,然后判断它是否包含。
09:15
好,所以返回值呢,就是我们所有要处理的这个资源了。返回值就是我们剩下要处理的啊,这里是filter,怎么是for each,是过滤。好了,那么这样呢,我们就把这个资源处理好了。所以如果我们接下来再去打印这个size的话,你会发现它只保留了我们写的内容。这时候我们可以继续调试啊,那么继续调试呢,要重新NPMDB。因为我们改了这个代码。好,稍等片刻啊,它应该会自动的识别到。我们直接快速点击。来到下一个断点处,然后往下走,往下走,往下走,直到了到这个S这里。
10:01
对吧,那么这里就看到里面就只包含了我们这个JS文件,其他的就没用了。好,接下来呢?因为将来可能有多个资源,所以我不知道它是不是只有一个,所以我还是要遍历for each得到单个资源。有了单个资源之后呢,我们接下来啊,就是要把这个资源的内容上增加内容。那么资源内容是是怎么获取呢?那么还是要通过compilation。Their set。然后呢,因为它的对象中化取这个set,这样呢就可以得到这个资源内容了,我们取名叫S。这是获取原来文件的,获取原来的内容。我们接下来要往上面追加内容。好,追加内容呢,我在这里定义一下。我们在这里定义一下我们要追加的内容。
11:08
诶大概就长这个样子,然后呢,后面呢,给它加个换行符,我们再换一下。然后呢,因为这个要顶格啊,这样的话呢,才没有多的空格,这样会好看一点,我后面加个author作者就好了。好了,那么我希望加上这个内容,那么就将preface加上这个source,就得到了这个内容。那么加上这个内容之后怎么办呢?我们需要让我们输出的资源最终发生变化,所以最终啊,你还是要对这个资源内容进行改变,这个资源内容实际上的对象里面要定义两个方法,一个叫source,一个叫size。Source方法就是资源对吧,最终资源输出的时候。会掉说什么法?
12:01
方法的返回值。就是资源的具体内容。那么我们之前想得到这个原来的内容呢,我们这里是要调source的,那么这样呢,就能得到这个之前的内容了。然后呢,在这个之前内容这里我们改啊return的结果是什么呢?是这个preface。加上我们新改的这个,他之前内容这样呢,他将来调用这个S方法的时候,返回值就会加上我们这个注释了。好,那么这个内容呢,我们需要把这个大小。对吧,这个最终大小要定一下。Size呢,就是资源大小,我们必须要指定它资源大小是多大多小都要指定,那么大小呢,就是看它的弄长度就好了,它多少个字节,那么它弄S就是多少。所以最终就是要去修改。
13:00
在这里修改资源。修改资源,它最终返回的内容以及资源的大小,这就是我们最终要做的,对吧,这就是拼上。所以我们再回过头来看一下整个过程啊,就是这样做的,第八个就不需要了。首先在这个输出应该是在资源输出之前出发的一个钩子函数,出发的时候呢,我们啊便利将来要输出的所有资源。然后进行过滤,只保留我们需要处理的资源。好处保留之后呢,再次便利,要处理的资源呢,先找到这个资源的原文件,在原文件的基础上加上我们这个注释前缀。加上之后呢,那么我们最后去修改这个原文件的这个内容,修改它的source方法,重新定义它source和size方法。
14:00
那么S就是它最终输出的时候会调source得到这个值,然后把这个值输出去,所以我们改变它的值,那么将来它的值就发生了变化,Size就资源大小因为内容发生了变化,所以大小也要发生变化,所以一样的类似的修改。好,这时候我们再打包,诶就不一样了啊。呃,我们可以给大家演示一下生产模式,所以这里呢,我们给它改成生产模式。OK,我们打包,然后呢,把之前的b not给去掉,因为我们再也用不上这个no了,我们有更好用的插件。那么它就会打包,然后使用搬的对它进行处理。好,打包过程中呢,说access access呢将来会被冻结啊。这个我们后面来看,对我们这里少掉那个方法,因为这个top think呢,这个这个警告可以先忽略啊。
15:05
我们是一个异步钩子,需要调回调啊,他才会。往下直行,所以这里我们需要调整call back。他才会继续往下执行,如果你注册成tab同步钩子,就是用tab去注册的话,那么我们可以不用调。com。就这样的。好,我们再执行一下,因为刚刚没有调扣back,导致他这个程序就不执行了。好了,全部执行完毕,我们来观察这个打包输出的JS问题情况。往上走,诶,这时候你能看到我添加的注释信息就在上面了。对吧。他这里有个警告啊,这个警告其实可以暂时可以不用管它,这个警告意思就是咱们输入的资源呢,将会被冻结在未来的新版这个外派的版本中。呃,如果你想要操作资源的话呢,请你在那个CEO啊,在SEO阶段去做。也就说他其实也建议你,就是你可以在这个comp有个公子函数叫SEO,在SEO它在冻结之前,你把这个。
16:04
呃,这个事情在那里对这个资源做处理。那么其实我们要做的话呢,如果你真的要做,你肯定要在压缩之后再处理,压缩之后冻结之前再处理,那么这样才行。呃,这里呢,我们就不再不再操作了,有兴趣大家可以操作一下,找到comp压缩之后的钩子和冻结之前的钩子,在那里对资源做我们以下操作也行,只是你在那里做的话呢,可能它这个钩子会被触发N次,那么在这里触发做的话呢,它钩子只会触发一次,因为compeller它只有一次触发,而compilation可能会产生多分。好了,那么这里呢,就是我们的班的外派的一个做法了。最后呢,我们希望啊,和之前一样,我们希望这个author是外面传进来去使用的,而不是我们直接写死。因为我还是希望这个插件呢,别人也可以用。那怎么办呢?做法很简单。
17:03
那么当你在这new调用传的选项的时候,它会作为constructor参数传进来。那么这里就是选项,我们把选项挂载到这上就好了。当然了,为了确保你传出来的东西有东西啊,你不能传find,所以我们初始化一个空对箱。做完红对线之后呢,这里的值啊就好办了,那不就是这点options上面内容吗。诶,这样就够了,所以如果插件传的选项呢,我们就是在空这里声明接收挂载到this上,方便我其他方法可以使用,然后其他方法呢,就通过this options去找到我们想要的内容,然后去使用就好了。好,这时候我们再重新打包,那么他最终输出的结果就是我们外面设置的这个老王了。好了,那么这样呢,我们就完成了这个班的派的一个做法,它的作用就是给我们添加这个注释作者信息,当然你将来还可继续往下面加东西啊。
18:10
然后呢,处理的方式就是我们的便利所有资源,过滤掉一些资源,只保留我们想要的资源,然后便利这些想要的资源呢,我们对这个资源内容进行修改。OK,那么接下来呢,大家就可以自行操作一下了。
我来说两句