25-尚硅谷-webpack从入门到精通-自定义webpack：使用babel解析文件（上）

好，上节课呢，我们已经定义好了这节课准备工作，那么接下来呢，我们就要去真正的开始自定义wipe了，我们打开这个文件啊，派在这里面我们开始写，那外派呢，我们能知道它是一个函数啊，所以我们定一个方式就叫MY外派。它接收一个conve作为参数，对吧？接收conve参数OK，那么我们返回值呢，得是compare对象，所以呢，我们得定义一个class，定义comp。嗯。它呢是一个类啊，是个类，那么我们pack呢，其实就是return，一个new，一个comp，那么new comp的时候呢，将我们的配置对象给传进去，那么comp里面呢，就能拿到我们想要的配置对象了，对吧，那么最终呢，我这个这个库呢，就是向外暴露啊moity p。抱着这个mype。OK，那么这样呢，我们就暴露出去mype，同时呢，调用PE呢，传输配对线呢，在comp里面能接收到好了，那么comp呢，就得通过方法去接收到这个配对象，那么配置对象呢，我们就叫options，那么初始化呢为空对象，如果它传的值呢，就有相应的值，我们需要做的事呢，就是将options挂载到this上，这样呢，我们就会可以将来通过this去访问到这个options了。

对吧，OK，那么我们创建完的这个实例之后呢，我们会调它的run方法啊，所以呢，我们接下来要定义一个方法叫做run，那么这个方法呢，就是启动WiFi的一个啊打包的方法。好了，那么run方法，那么接下来呢，在run方法里面，我需我们需要干什么呢？诶，我们呢，需要做的是第一件事就是读取这个入口文件。文件内容对吧，读取完之后呢，我们要做的第二件事就是分析。

啊。好，将其将其啊，将其解析成这个ST抽象语法数。好，那我们现在做再来看为什么需要这样做啊，首先怎么读取这个文件内容呢？首先要获取到这个文件在哪里嘛，文件路径是不是好，我可以定一个，比如说cost fire pass。好，Pass呢，实际上就是these options上面的一个ENT属性啊，咱们的entry属性上面呢，就有我们想要的这个入口文件路径了，对吧，这个呢就是稳健路径呗。当然是入口文件路径啊，OK，得到之后呢，我要读取它，读取它之后呢，那这里我就得用上一个FS的一个方法对吧？读取文件嘛，读取文件的个方法我用FS好，所以呢，下面呢，我们通过FS这个方法去读取，那这里呢，我们就不用异步的方法啊，我们用同步的方法啊，这样子比较方便一些，读取这个方帕，那么默认这样读取的话呢，它返回成是一个B法数据，而我们要解决抽象语法数呢，得是一个啊一个纯文本数据，所以呢，最简单做法就是这里再传第二个参数加个utf杠八，那它呢，解析成一个咱们啊一个中文的这种方式，说白了就是文本数据啊，所以最终得到了一个我们小的data呢，就是诶或者说小的文件吧，就是我们的这个文件内容了。

好了，这里呢，我们就读取到了入口文件的内容，那么下面呢，解析成抽象语法术，好，这里呢，我们就借助一个工具啊，叫做babible babible呢我们看一下它官网来看啊，Babble呢，这里有个中文档，在中文呢往下走啊，下面的baible就提供了以下这些工具去做事，而在我们这个章节呢，我们会用上其中的至少三个工具来做事，第一个呢，就是我们需用上的这个pass。

Pass呢，就是会将我们的BA呢解析成一个抽象语法数，也就是我们所谓的ast，那么抽象语法数是什么呢？诶，我们来解析一下pass map呢是一个库啊，所以我们需要引入，引入之后呢，通过它的一个pass方法传入我们要解析的code，诶，以及相关的一些options，我们就可以去解析这个模块了，OK，那么我们话不多说，开始去做。我们已入这个pass。我们叫VI引入这个pass模块叫艾VI pass，当然呢，这个模块呢，我们待会需要下载啊。引入这个模块OK，那么你入完这个模块之后呢，就可以调用这个模块的方法叫pass方法。好pass呢，你要传你要解析的文件啊，第一个是file，然后第二个呢就是options options里面主要传的就是我们当前是当前这个模块是什么样的一个啊，模糊化的方式，我们的是exl模啊，所以我们传个source time为modu啊，这个意思呢，就是我们的要解析的模块呢，是S。

这样呢，才不会解析出错啊，因为默认的它是框，所以我们这样传，那它的返回值呢，就是我们的抽象语法数ast，好，那么抽象与符函数到底是什么样呢？我们可以打印一下这个ast啊，ST我们来一起看一眼，那么看一眼呢就要用上，我们就要把这个包呢，该下的包呢下好啊，来我们把这包下一下，NP mi这D。OK，那么下完之后，那就n PM run build了。好，那篇build呢，往上翻啊，其实这里呢，就打印出来的抽象语法数，它的一些内容，抽象语法数说白了就是用一个对象来表示我们写的那些代码啊，当然大家也看到这样调试呢，不太方便，对吧？所以呢，我们再给大家配置一个调试指令，如果我们在浏览器中调试，那么就很好看了。那么怎么做呢？来请看啊，我们这里打开pageson，在这里面再加一个调试指定，加第八个第8UG，好，怎么调数呢？非常简单，就no，叫它干干expect。

干BRK对吧，在手上打个断点，然后调试的文件呢，就是这个文件。OK，所以当我们预习n PM run debug，那么它就会去启动这种调试模式，那么我们就会去调试了，那么调试模式呢，当然要伴随着我这接打一个断点啊，所以我这里打个第bug。好，打到第八个OK，那么我们来调试一下看看效果啊，那么效果呢，就是n p n p run debug。好，那么下面呢，我们就打开我们的这个浏览器，然后呢，这里呢，就会有一个绿色的一个选项啊，点击它对吧？那么这里就会来到们的这个页面，那么下面呢，我们要做的事就是把它执行到下个端底处，OK，那么我们就能看到第八个在这停住，停住的时候呢，这里就会有个watch选项啊，Watch选项，Watch呢，同样的我们要揭示的都是就是ast ast对吧，SOK，那么打开它，那么这里面呢，就是我们那个抽象语法书里面的内容了，好，我们看到了上面有很多信息，比方说这里有个star啊大林对吧。

好，四大林的话呢，就代表我的代码是从第零个开始N的一一代表呢，它是结尾呢是一一，说白了整个文件呢，就有116字节，其中呢，里面的最主要东西呢，就在这program上啊，Program程序，程序里面有个body程序，Body的意思就是程序里面的内容，Body是个数组，数组里面有12340123有四个内容，这四个内容呢，其实就是分别对应上我们的源码啊，来看我们的这个indexs呢，来看它其实原代码呢，主要就是有四行空格呢，不算啊，代码呢有四行，所以呢，抽象语法书呢，最终就解析成每一个，每一句，每一条语句就会解析成玻璃中的其中的一个对象啊，对象里面呢，会有个type类型啊。

它代表的就是当前的这个这条语句的语法是什么语法，诶像这个什么import啊，这个语法呢，代表的就是我们的啊这个引入语法，Ex的port引入语法对吧，那你看，所以第二条语句呢，是引入语法，那么其他的普通的表达式呢，就会是expression statement对吧，就普通表达式语法，那么在这个里面呢，我们除了能看到这个语法呢，我们通过啊一些值，比如说有个source source里面呢，有些value能得到我们想要的一些语法的一些具体内容，比如说这里面通过source呢，就能得到我们的文件路径是不是。好了，那么出现语法书呢，说白了就是我们需要通过它出现语法书呢，来收集我们的一赖关系，那收集一赖关系呢，无非就是判断它的类型呢，是不是等于这个import declaration，如果是等于这个decorration呢，说明它就是这个啊啊引入语法好，所以呢，第一种方式呢，就是我们拿到这个program de去编译，然后呢，找到这个所有的类型，然后呢，判断它的一个引入语法，然后判断它是引入语法呢，我就通过source去找到它对应的value，从而拿到这个宏接路径，这样呢就是叫做收集依赖。

那么这样做呢，显然就会比较麻烦啊叭较麻烦，我们已经得到了这抽象语法数对吧，那么就是一个这样以对象的方式来表达我们的一些代码的一种啊，一种一个结构啊，它它非常像我们在re或者入的虚拟动对象啊，有点象，但是呢，它表达的是我们的这个代码，好得到抽象语法书之后呢，下面我们就通过抽象语法书来来收集依赖啊，我们要收集依赖，因为我们最终的目的是要把所有文件都打包进来收集依赖，收集一赖呢，第一种方式，前面讲了，通过这个玻璃去编D要收集，当然这样呢就会挺麻烦的，所以呢BA呢，它提供的一种方式帮我们去快捷的去收集依赖，怎么做呢？来关掉它double呢提用了第二个插件叫做travels travels啊，Travels这个travels这个东西呢，就专门去收集带的啊，专门可以做收件的，什么意思呢？Travels呢，它呢会去里面可以去通过去定义一些啊我们想。

然后匹配的一些语句啊，一些相对语句，然后呢，就能够去做相应的事了，好那么话不多说，我们去操作一下，大家能感受清楚了，来看。好，现在呢，我们已经解析了抽象语法术，那么下面呢，我们要想办法收集所有的依赖。收集了OK，那么这里呢，我们就要加载一个新的库了啊，来这个at b travels，我们来去官网上把这个包呢复制一下。

嗯。那么rous呢？注意啊，它呢是采默认暴露的，所以这里要加个default变量才能得到我们想要的这个啊，S。OK，那么下面呢，我们就通过travelers去做事了，来，诶。好，第二个传ST长这个抽象语法数啊，接着呢，是个对象啊，那么这个tras呢，它内部呢，会去遍利抽象语法数所有的那个啊，Program里面的所有的玻璃啊会去便利，那么在这个对象里面呢，啊，我们就要去传入我们刚刚看到的语法那个import import啊，Decoration decoration，好，那么写一个这样的函数在这里啊，那么这个语法有什么用呢？就是啊，它内部呢，内部会便利，对吧。

别的这个ST。嗯。SD中，Program。点玻璃好，然后再并且判断里面的类型，里面语句类型类型啊，如果是啊，说白了，如果typeb啊为这个。啊import啊，就会触发单前函数，如果不是自然就不触发了，对吧，所以我们就得到，并且触发的时候呢，它会把触发的那条语句的一些信息呢，给你传进来，给你传进来，所以我们在这里呢，可以打印看一下它传进来的内容啊。好加扣的，我们可以打印一下。

OK，那同样的呢，这里我们通过第八个调式呢，会比较方便啊，所以这里呢，我打个第bug OK，下面的呢，我就注释掉了，好，下面呢，我们再次运行一下n PM run debug。好，然后呢，打开浏览器调试。嗯，下周好，这时候呢，就会提在这这时候我们来watch一下这个扣啊。再添加一个再code OK，那么code点开啊，这里面呢，就是我们刚才看到那些信息啊，它语法的是import DEC，那么在这里面呢，我们能看到它有一个属性叫node啊，有个属性node node这里面node的信息呢，就会打我们在找到这个source啊，Source里面呢，就有我这个A是代表ADDDGS这个模块啊，第一次呢，编辑的是第一条语句，所以是它引入的是ADDDS，所以拿到这可以拿这个ADDD，所以我们目的呢是要收集依赖，收集依赖说白了就是获取到这个依赖的这个路径，所以我们要想办法找到node上面的source source上面的value。