实现小型打包工具

思路图解

思路：

A方法

1. 找出入口文件所有的依赖关系

   1. 读取并编译入口文件代码
   2. 依据入口文件代码广度遍历所有依赖文件（包括子级）
   3. 对外输出依赖关系

2. 通过构建CommonJS代码来获取exports导出的内容

   1. 构建modules对象字符串（key为文件id, 值为[对应的函数, mapping]）
   2. 构建result函数字符串，并传入modules参数，函数中构建require函数，用于获取并执行对应文件
   3. 执行require(entry), 即执行对应的文件

有哪些功能点

1. 读取并编译文件代码
2. 获取所有依赖文件
3. 实现打包功能（构建出CommonJS的写法）

缺点：

1. 是用relativePath做文件模块的唯一标识，容易冲突

B方法

与A方法大体思路一致。

区别

1. createCode函数 -》createAsset函数。 createAsset函数在返回值对象时，多一个标识符id(自增数字)
2. getDependencies -》 createGraph, 给每个文件item添加mapping对象用来保存自己所依赖的文件path:id对象，方便使用时找到id
3. bundle函数。构建modules字符串时，是 id和[function, mapping]做key, value。构建result字符串时，require函数，接收的是filepath对应的id. 有localRequire函数

综上所述：

主要区别是此方法使用自增的id作为文件模块的唯一标识（不会重复）而不是文件相对路径（容易重复），
但是这也导致代码有更大复杂性，比如模块自身需记录mapping（来记住依赖文件相对路径和其id的对应关系）。用到localRequire方法来进行相对路径和id的转换。

A方法多了处理css文件的能力

代码：

见github https://github.com/sunchengua...

参考资料

https://juejin.im/book/5bdc71...

https://zhuanlan.zhihu.com/p/...

https://zhuanlan.zhihu.com/p/...