面试经常有问到 webpack,鄙人十分懵圈,偶遇一篇比较有实用价值的且有利于理解的文章,现总结如下:
本篇文章中要实现的这个迷你打包工具,它主要能实现如下两个功能:
①、将 ES6 转换成 ES5;
②、支持在 JS 文件中 import css 文件;
下面我们跟随这个工具的具体实现,来理解打包工具的原理,come on~
实现
因为涉及到 ES6 转 ES5,所以我们首先需要安装一些 Babel 相关的工具:
接下来我们将这些工具引入文件中:
接下来,我们先来实现如何使用 Babel 转换代码:
①.首先我们传入一个文件路径参数,然后通过 fs 将文件中的内容读取出来;
②.接下来我们通过 babylon 解析代码获取 AST,目的是为了分析代码中是否还引入了别的文件;
③.通过 dependencies 来存储文件中的依赖,然后再将 AST 转换为 ES5 代码
④.最后函数返回了一个对象,对象中包含了当前文件路径、当前文件依赖和当前文件转换后的代码;
接下来我们需要实现一个函数,这个函数的功能有以下几点:
I、调用 readCode 函数,传入入口文件;
II、分析入口文件的依赖;
III、识别 JS 和 CSS 文件;
I、首先我们读取入口文件,然后创建一个数组,该数组的目的是存储代码中涉及到的所有文件;
II、接下来我们遍历这个数组,一开始这个数组中只有入口文件,在遍历中,如果入口文件有依赖其他的文件,那么就会被 push 到这个数组中;
III、在遍历的过程中,我们先获得该文件对应的目录,然后遍历当前文件的依赖关系;
IV、在遍历当前文件依赖关系的过程中,首先生成依赖文件的绝对路径,然后判断当前文件是 CSS 文件还是 JS 文件
①.如果是CSS文件的话,我们就不能用 Babel 去编译了,只需要读取 CSS 文件中的代码,然后创建一个 style 标签,将代码插入进标签并且放入 head 中即可;
②.如果是JS文件的话,我们还需要分析JS文件是否还有别的依赖关系;
③.最后将读取文件后的对象 push 进数组中;
Now,我们已经获取到了所有的依赖文件,接下来就是实现打包的功能了:
未完待续,姐姐我看不下去了~~~