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

好，回了代码，我们呢，开始去收集咱们的这个数据啊，那么我们通过这里再解图布值啊，等到我们的noe，然后呢，下面呢进行关掉啊，全都去掉，然后呢，我们再去定义咱们的一个relative pass。啊，相对路径的一个名字啊，No，刚刚说了source source上面点value，那么这个呢，就是我们的一个文件的一个相对路径啊。Sand。那么这相对路径的值呢？大概是谁呢？我们可以看，我看这个调试工具能看到是DSOK，那么比方说我们就是DDGS。好了，那这样写呢，你将来如果去以这个文件路径去读文件，肯定是出问题的，因为咱们的文件呢，是在SC下面啊，按DS在S下面，所以我们路径呢一定要加上SC，并且呢要设成个绝路径，那这个怎么办呢？所以咱们这个路径啊，它应该是根据我们的这个入口文件路径来的，因为我入口文件是在S下面，所以我们的S也是在S下面，所以在这里啊，我们要想办法获取到入口文件的这个对吧。

不知道。咱们的文件的一个文件夹路径。那么怎么获取呢，是不是？嗯。我们就叫DR name，那么这里的pass有个方法就叫DR name，它就能够获取到我们的文件的文夹路径，那么这里面呢，我们要传的就是我们之前那个fair pass啊，这里就是获取一个文件夹路径，然后呢，我再根据文件夹路径和这个文件路径相对路径生成一个绝路径啊。基于这个，我们这里面是可以入口分界的学路径。好，怎么生成呢啊，我们一个absolute。

Past等于呢，我们的past so方法，那么第一个呢，就是这个。就是我们的这个副容器，也是说我们的这个入口文件的一个文件夹目录，加上我们单体的。Pass，那么最终就可以生成一个绝缘路径了，那么这个绝择路径呢，我们啊，在外面定义一个容器啊，定一个容器来去收集所有的依赖，定一个容器呢叫dependencec，啊依赖呢，这叫dependence，我们简化成一个DDPS对吧，这里呢，就定义一个。存储依赖的容器。OK，那么我们呢，在这里去添加。它呢key呢，就是我们的pass呢，就是我们的pass，那么这样呢，我们依赖呢，就添加到这个对象中了啊，所以这里呢是添加依赖。

可以了，那么下面呢，我们最终啊，只要打一下这个D啊，有没有值，那么就可以了DPOK。好，那么其实在这里我们也可以调试去看啊，刚刚呢，我们看到这里按GS，一旦我往我接，接着点这个按钮，它就会接着往下走，我们说了这个travels呢，它会工作多次，所以呢，它又会停在这个第八个这里，所以如果我们接着走，诶走一下啊，它又会停在这个第八个这里，这时候呢，变的就不是这个按DS，而是看DS。对吧，那么后面呢，其实还有两条语法是expressions，但是他们的这些表达式语法呢，并不是我们的引入语法，所以我接着往下走，那就没了，那直接退出了。对吧，所以呢，这也恰恰说明啊，咱们这种语法呢，它只会接收我们这个import这种语法。那么这样的话呢，这样写好啊，我们再去运行，OK，我们终止掉它调试啊，我们运行，当然这次我们运行的时候，比方说build了，不是调试了，因为我想看一下最终打印的这个depend能不能打印出来。

OK，这里面还有个报错啊，呃，他说这个pass is not DeFine，那么说明我们上面没有引入这个模块啊，那么我们把这个模块引进来就是pass。我。好，那么下面我们再进行一次啊。好了，那么我们看这里看这里啊，所以呢，这里我们就收集好了依赖啊，当前入口文件的两个依赖都到了，并且呢，他们的绝路径呢，也是正常的，哎，是MY和SS下面的SS下面的抗S。OK，所以这里面呢，我们到这里就收集好了依赖了。最后最后呢，我们啊还要做件事。因为我们写的这个文件呢，它现在还是E代码，它并不能被浏览器识别，所以收集完依赖之后呢，我们还要解析这个代码。说白了就编译代码，编代码呢，就是将咱们的这个代码中浏览器不能识别的语法。

进行编译处理啊，其实这里面主要是编译，编译的就是我们那个啊，我们那个模块啊模化。那么这里面的编译呢，诶他用的模块就是也是我们派官网，我们看一下关掉。那调试呢，我就不需要了，那么官网呢，最后一个库呢，叫做Co，那这个库呢，其实我们之前呢，在写开发那个B开lolo的时候用过，然后这个法呢，在这里面的话就能够去对我们的。啊，代码呢，进行编译处理。那么这里面呢，我们就要引入一个库啊，叫那么引入库中的一些方法，之前呢，我们直接用的是这个transform法对吧，那么这里面呢，我们啊，还可以用一些其他方法啊。我们这里编译代码呢，它不是原代码，而是一个抽象语法数，所以在这里面呢，我们能看到它有一个编译抽象语法数的方法。Transform from ST啊，一个抽象符法，那么第一个参数呢，就是我们的这个抽象语法数啊。

就是我们说下语法术就OK了，所以呢，我们用这个方法去操作去操作。好，那么下面我们最后来看啊，最后来看。我们呢，需要引入一个库，好，这是引入第三个库了，Call啊call OK，这个呢就不需要了。呢，在这里面去解构赋值啊，提取它里面的一个方法叫transform。啊，这个ST啊，那么transform from ST呢，就是从这个抽象语法输入中去编译啊，去转换，那么我们使用这个方法。嗯，第二那么传我们前面的ST冲下去函数，第二参数呢是now，第三个参数呢，是他一个预设啊，就是以什么环境，以怎样的工作去做，我们呢，就用最基本的啊那个。啊，以这种方式去编译啊，那么编译之后呢，它返回值呢，就是我们写的code的啊，返回值经过结构赋值就能得到我们写的code的，那么这个code的呢，就是我们B后代码，我们可以打印看一下。

好，下面我来预习一下，再看一下效果，最后打印。好，最后打印出来了，你能看到，诶它呢，从ES6语法呢，变成了commons，变成了require语法，然后加上一些一用模式，后面呢，都变成了相应的样子啊，所以呢，如果我们要转换这个啊，抽象于法数代码呢，那通过这种方式去做，他最终暴露出去的最后返回值是个对象，我们通过解赋值就能拿到我们想要的这个代码。好了，那么到此为止呢，我们主要就做三步啊，大家仔细看。第一步呢，就是我们呢，将入口文件读取进来，然后编译成抽象语法数，编译成出现语法数的目的呢，就是为了去分析依赖啊，所以接下来呢，我们通过double的第二库啊travels，那么它的内部呢，通过这种语法能够得到所有的引入语法，那么依赖呢，就是引入语法，在这引入语法中得到相关的依赖，然后呢，添加到我外部的一个容器depend中啊。

OK，最后一步呢，我们啊要去编代码，代码的默认是浏览器是不识别的，所以我们编是浏览器识别代码，通过第三个库at的其中的一个方法transform from ST，那么加代码的编程浏览器识别代码，那么后面呢，我们要做的就是。如果把这些依赖中的代码全都收集起来，那么全都进行编译，最终再把编译代码整合在一起，最终输出，那么就能得到我们最后的一个东西来。那么现在呢，我们先做这三步啊，这三步，那么这里呢，有三个包来，所以呢，接下来同学们自己可以尝试先写一下啊。