思绪图解

思绪：

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