16-尚硅谷-webpack从入门到精通-实战：自定义babel-loader

好了，前面呢，我们讲了load的很多东西啊，那么这里面其实我们已经学到load的很多语法，那么下面呢，我们进入实战环节，我们呢，编写一个ER，来来去看看load的一些具体用法，对吧？我们呢，以babble为例啊，我们编写一个BA load来去帮我们去做事，好，下面我们来看啊，我们在loads这里面再新建一个啊叫白罗，当然的我的名字呢，和你就改成这个名字啊，那么我们就是为了防止它和我们的这个not voices里面的冲突啊，那接着呢，我写个白lo，在这里面写我们的load的代码，OK，那么model呢，反正总而言之就是向外暴露出去一个函数啊方式对吧？那么第一个参数呢是connect，第二参数map，第三个参数是Meta，那么后两参数呢，实际上也没啥用途，就这个OK，那么我们呢，要去使用blo的话呢，我们来知道blo的一般会怎么配置啊，举个例子，呃，接下来这个use规则呢，我们就注释掉了，我们就用不上了，我们来使用这个bylo。

好，咱们的lo呢，是这个名字啊，所以要注意啊，OK，那么它也有options相应的选项，那么我们往往呢，会设置一个，比如说pres，对吧，Pres它的一个预设，预设啊，比如说那个at特bbble，这pres EE，这代表了我的BB的工作的一些预设范围是不是好的，那么比方说我们就只主要指定这一个一个配置啊好，那么指定配置呢，那么我对于我的这个白lo而而言的话呢，我肯定要获取这个配置对吧，然后对它进行校验，然后最后呢才能够去做事，所以获取配置呢，实际上和之前一样啊，对吧，我们呢，要引入一个库来帮我们去获取这个load的配置，叫loades，在这里面呢，我们调获拿到一个方法就做gas options，这个方法呢，就能够帮我们获取这个load的配置。啊，这个options的配置。好，我们写完整点获取。对吧？The options配置，那么cross，一个options等于咱们的get oceans不用传个this，那么如果假设它没有传options呢，可能只是个UN find，所以我们可以或者一个空对象，那么这样呢，就能保证options呢一定是个对象类型，对吧？好，获取options之后呢，接下来我们就要对它进行校验啊，对它进行校验，那么校验呢，我就要定义校验的规则，对吧？定义校验规则，那么我这里呢，就叫STEM吧。

点啊，stem.dress好，在这里面我们定义这个dress文件啊，那么写法呢，其实和之前类似的type啊，它类型是一个object，好，然后接下来呢，我们还有一个类型叫呃，Property property。T啊OK，那么它的它的值呢，也是个对象，对象里面呢，写我们接绍的一个process预设啊，对吧，是它的值呢，是个数组啊，所以呢，我们typeb一个类型type t p啊，它类型呢是一个re OK啊，那么这里呢，我们需要把它变成双音行，好其他属性我就不写了，其实你如果需要的话呢，可以再加啊，那为了防止为了让我们进来可以更加可以配置呢，我们可以加个audion呢啊property，那么也是说如果我器配置呢，假设我们要加上万加了，那么它这里也可以生效啊。

好为处，OK，那么这样呢，我就写完了这个STEM校验规则，OK，那么我就要引入一个方法，对吧，去校验，那么这个库呢，叫做CS。好，下面的一个方法叫做对吧，然后呢，再引入我们刚刚那个BB stemmer。

Double STEM OK，那么引入之后呢，接下来我们就去第二步了啊，去校验这个BA配置，BA的oceans配置，那么这个同学一定要用这个va的方法传入，我们要教易的规则babblechemer，然后呢，以及要教易的options，好以及给一个提示啊，Name对吧，我们的名字呢叫B带波的啊，OK，那么这样的它就会进行校验啊，错误的话呢，自然会出错，没出错的话呢，我们就会接着往下走，好一旦来到下面呢，说明教育也没有问题了，那么我们可以真正的去干活了，所以接下来呢，我们要想办法去干活，那么这里干活呢，就有两种方式，一种是同步的干活的方式，一种是异步的干活方式，那么我们还是比较推荐是异步的方式，所以我们要创建个异步，对吧，异步任务，异步多异。

那么，那么方法呢？非常简单，Co call back。诶，Back啊等于c.think对吧，这样的就是个异步方式，那么后面就可以执行异步代码，那么我只要在一步代码做成功时候调用com贝的这方法就好了，好了，那么下面呢，我们其实关键的点呢，就要去想办法去使用BA去做编译啊，使使用BA去编译对吧？使用BA，那么这里面呢，我们就要引入一个库啊，引入一个BB的核心库，用它来做编译，B等于块二，那么这个核心库呢，叫at b call啊，就是使用B呢都刨不开的一个库，叫at BA call，那么使用它来做be，那么它上面的个方法有transform方法，用来做转换的，那返回值呢，是一个promise啊，是一个是个异步方法，而我们呢，比较倾向于用promise解决，所以我们可以再引入一个YouTube工具函数啊，引入一个no的一个模块叫U，那么这工具函数呢，它上面就会有方法啊，我们来定义一下。

来另一个方法transform啊，它U呢，上面有个方法叫promise啊，能够将一个普通的异步函数转换成基于promise的一个异步方法，那么我们要转换的就是BB叫做pro啊transform方法啊，所以这里面呢，其实要注意的点就是第一个啊，就是ba.pro啊，是一个普通的预步方法，首先它的功能呢，就是用来转换的，用来编译代码的。它的确是用来编译代码方法，并且呢，它是一个是一个异步方法，是个普通的异步方法，对吧，或者说是个no JA风格的一个异步方法，那么uity promise就是将这个普通的异步方法呢，转换成一个基于promise的一个异步方法啊。

啊，转换成。基于promise的一部分。OK，那么所以我们接下来用这个transform呢，就可做promise去使用了啊，对吧，就调用transform，那么就可以编译了，对转换了，我们转换的内容呢，其实就是它这个connect，对connect进行转换，转换之后呢，自然就会有斜线啊，那么转换的时候传下options的options，就是我们传入的这个blo的options，就传就可以了，它就会去编译啊，那么这里使用label呢，去编译代码呗，返回值呢，是一个pro项，所以有有catch啊，有登catch啊，因为呢，这个方法是异啊，所以也是我们要创建的是也是异步的一个load啊啊不应该是同步，那么成功的时候呢，它就是里就会得到一个返回值啊，得到一个返回值，其中的返回值里面呢，就有我们想要的一些参数啊，比如说有code，有map code和map map呢就是呢s map，那么我们要做的就是调动map啊，因为没有错，所以第一个是now，第二个呢，就是我们要返回的内容就是这个。

厚的第三个呢是ma，第四个呢是Meta，但是后面呢，其实可以不穿啊，可以不穿啊，可以不穿，OK，那么cash呢，就是出错了对吧，出错怎么办呢？出错还是调用错表方法，把这个错误传过去就可以了啊就可以了，就不需要传别的参数，一旦第一个参数有值，后面参数就没有意义了啊，所以这样，所以说成功呢，他就会去调法将这个啊，这个我们转B后代码啊就往下传啊，失败呢，就会把这个错误呢暴露出去就样，所以整体呢就是一个这样的一个处理，OK，那么写完之后呢，我们啊要编辑代码呢，我们要稍加处理啊，不然的话呢，我们现在这样写呢，看不出来啊，这样写看不出来，那么在这基础上能加一点代码，加点exl代码，这样呢，我们看得出来它到底有没有编译好啊，好，我们第一个类吧，Class person。

啊定位，那么name上面呢，比方说我们来一个s name STEM方法，STEM方法好，然后呢，这个方法呢，就是叫name呗，我自己写点name name。对吧，好，然后呢，通常情况下呢，我们定义空二的方法，在这里面呢，接收我们想要的这个啊name参数，然后也是添加这个name c name呢，就是去修改这个name name name的值呗，对吧，好，是一个比较简单的一个这样的一个类啊，那么下面呢，我们去new的各类new这个first。诶啊new，然后传一个Jack，传个Jack啊，然后呢，把这个值呢打印一下就OK了。

对吧，好，下面呢，我们来看一下效果，看它be译后的效果，我们运行外派OK be异呢我们看到successful，所以我们来第层目录去看一下be后代码，这时候呢，能看到它呢编译成的耶稣一下是一个函数啊，那么在外派D5之后呢，它都不会将那些杂七杂八的一大堆外派D那些东西，它就编译成一个匿名的一个函数啊，这样呢是最有效的，然后里面呢，这里面呢就是对我们那个啊class语法呢进行一些再处理啊，所以大家可以仔细去看一看啊，咱们这就不一得看了，首页这单呢会把你处理好，所以我的BA呢也生效了，好再来看啊，其实这里面呢，我们就已经定义好了一个非常非常简单的loader啊，Double load这里面代码呢，其实也不多啊，不多，那么这里面的要点呢，就是大家需要知道啊，怎么去获取这个options对吧？那以及如何对它进行交易，那么同步load呢和异步单又分别怎么定义，然后定义的时候呢，你就是对里面的东西做一些处理，处理完之后呢，你将这个处理后东西呢，作为作为参数传以靠back了就。

可以了，那么后面呢，它就会相应的输入出去就可以了，好了，那么这就是load对吧？那么同学们，你们可以凭借着这些东西，可以自己尝试写一写你想感兴趣的一些load。