00:01
前面呢,我们写了一个clear log loader和by loader,给他一立利手,让大家知道loader怎么一个基本开发的一个模式。那么下面呢,我们开始要写些真正具备功能的一些漏了,那么接下来我们大家实现。Bar。我们想将JS中的ES6语法,把它编译成咱们的ES5以下的语法,诶这样的话呢,咱们的就用器就更好了。我们就来尝试实现一下,看看blo的具体又是怎么实现的。好,那么现在呢,我先啊写一段Excel的代码。我们就像之前一样,定义一个sum函数,用上箭头函数三连算符。OK,然后呢,我们return。They reduce。它们去累加初始化的值呢,我们设置为零,然后呢,PC啊P加C,那么这样就达到一个累加的一个效果。
01:02
好了,那么现在呢,咱们如果去编译。我们能看到的就是编译后的这个代码呢,它还是这个EL的一个语法。对吧,那么E6语法呢,在一些旧版本IE浏览器呢,它是没法识别运行的。所以我们希望呢,它能够呃编译成低级语法,从而能够在低级版本浏览器中运行,我们来实现double。OK,那么下面呢,我们去第一个问题,叫我们来处理这个。来,下面写一个index JS。好,一样的,我们model false向外暴露一个函数,那么对应的是整个。的一个处理函数接收到一个content。Blo的需要怎么处理呢?诶我们给大家看一下官网啊,看下blo的它处理呢,他用上了一个low b的一个方法去处理的。
02:03
那么这里呢,我提前给大家打开了这个BA的官网,BA呢是个JS编译器,专门用来编译JS语法的。我们要开发的话呢,必须要用上BA来帮我们对这个JS语法进行编译。我们直接找到这个中文文档啊,这里它有些介绍我们就不一一看了,那么前面我们也讲过bab有些预设,我们在编译的时候就要用上这些预设去做事,其中at VI GA preet inv,这就是个智能预设,能够帮助我们将E。加语法编译成这个YES5以下的语法,所以我们会用上这个语,好,下面是编译re加TS变译flow的,这些我们用不上啊,所以我们待会会用上这个智能语式。除此之外呢,它真正干活的需要用上bab的一些核心库啊去干活。诶,这个核心物呢,它有很多啊,那么这里可以给大家大概介绍一下,在我们之前呢,就是外派外派D的底层原理啊,它就用上了这些VI的一些包进行编译的。
03:04
派呢,他用上了这个at BA passer,将我们的JS代码呢解析成一个抽象语法书ST。然后再通过BA at travels将这个抽象语法数呢格式化成一个更好操作的一个数状结构的一个对象。这样呢,它好更好操作啊,然后在这里面呢,就通过依赖分析把文件的各种处理啊,处理好之后呢,把文件合并成一个文件,再通过at level感觉把它输出成一个正常的一个代码,最终呢把这个代码输出去。这是外派底层啊,用上了一些咱们的BA的一些方法,这里呢咱们就不一个看了,我们这里呢并不需要这么复杂,因为我们并不需要对文件做这么多处理,因为派本身已经做了。他已经把文件合并到一起了,我们只需要用at对,用上这个transform方法对我们里面代码直接进行转编译转换就好了。第二个方法呢,它是一个异步方法,第一个参数呢,它传的是我们要处理的代码。
04:05
就是我们要进行怎样的处理。对吧,我们要将一六加的语法转换成E5以下的语法呢,我们就要在这里传入这个智能预设。放在这个option上。同时后面呢,就是它处理好的一个第二的一个函数,如果有错误代表处理失败,那么错误error就是错误原因,如果没有错误,那么result就是最终处理的结果。其中code就是它处理后的代码,Map上就source map ST就是它上面的抽象语法数,我们只需要用上里面的code就好了。OK,那么接下来我们就可以用这个东西去做编译啊,那么用它的话呢,需要下载at。那么因为我们运用上这个智能预设,所以我们一共要下载两个包。还有一个就是艾特B干pres烟。
05:00
降D。好,下载完成之后呢,我们啊来一起来配置啊。首先第一个就是我们将来要使用这个b not的话呢,我们将来会这样用。来。继续写一个。我们这里省的是lo啊。将来呢,会传一个options,我们直接在这里写,预设了,就不在外面写了。在这题我们会写at label presents感英。我们可以传递一个大的一个血线,告诉他我要干什么事。对吧,因为这个干到底要干什么活呢?应该由这个外界使用者来指定,而不是我们直接写死,因为有可能有有的开发者呢,他并不需要你转换,所以你可以什么都不写,但是有的开发者呢,又希望你转换,甚至有些开发者呢,希望你转换程度更高。那么这些应该是由外界去配置的,我们应该负责接收参数就好了。好了,它会传递一个我们要去怎么处理的一个预设选项,那么我们里面呢,就负责接收使用就好了。
06:07
那么这样的话呢,同样呢,我们需要传一个STEM。对吧,要定义一个它的一个验证规则。里面写法一样的,它的类型是object,是个对象。注意得是双引号啊。好,然后呢,上面的属性呢,我们主要写这个啊。主要写这个,它是一个数组,所以它的类型。是。然后呢,他除了这些呢,将来可能有同学会写plugins,会写些其他配置,所以这些配置我们就不一定写了,但是我们又希望他写的话呢,我们可以用additional properties。
07:00
为处,那么接下来他就会以自己的追加新的属性了。将来想增加什么拉啊,追加啥啥啥都可以了,那么我们可以让他去追加。所以我们可以这样设置啊,我们只写一个属性就就好了。好,回到这里,那么我们需要把这个STEM呢引进来。这样的话呢,我们就会得到这个options。然后呢,之后呢,我们就要使用。对,代码。进行编译转换。好,这里呢,我们就要上这个at BB call这个方法啊。OK,那么我希望的是先把下载的包啊放前面,然后呢再去使用。OK,官方文档的地址呢,我们在这里给它贴一下,就在这。
08:03
好了,那么它是个异步方法啊,所以咱们这个load呢,就得定义成个异步load对吧,所以我们一上来呢,就得自点。这叫think调用来让它变成一个elo。好,然后呢,转换代码呢,转换的是这个cons options呢,就是这个options,你要给BA be传递的选项。然后里面呢,就要进行操作了,对吧,判断如果有错误,咱们直接就call back传递这个错误原因,如果没有错误的话。那么我们就可以去继续调扣back啊,那么没有错误的话呢,第一个可以传个now,然后后面呢,可以传到我们要传递下来代码是resource code的,要注意啊。那么剩下的这些东西我们可以不用指定了。好,这里呢,就是使用BB呢对代码进行编译转换,然后呢就可以将EL语法编译成E以下的一些语法。
09:06
那么因为方法也是异步的,所以我们用的是异步漏的用法。诶,这以上呢,就是一个Bo的一个基本使用了,诶下面我们可以看效果,我们去打包变异。这些变异呢,它没有转换啊,那么现在变异我们再看效果。这时候因为要bab干一些活啊,所以整个工程工作的速度呢,会稍微慢一点点。我们来看这个代码,诶你看cost就变成万了,然后呢,这个三点运算符呢,就变成了这个arguments的一个遍历。然后呢,还有这个箭头函数呢,它会变成普通函数,那么这样呢,我们就对咱们的JS代码呢,进行编译了。好了,这里呢,就是我们大家去实现的一个简单的一个lo。将来你要做的就是往这上面呢,继续扩展功能,让它功能呢不断增强,增增大,然后呢变得越来越强大,但是一个基本的B波罗的功能,那么就是这样开发的,我们要借助Bible这个工具来对我们代码进行各种编译操作。
我来说两句