实现小型打包工具

思路图解

思路：

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/…