Mini Bundler

实现一个最简单的 bundler, 理解前端开发的核心概念。

理解 Bundler 的基本概念

• 目的：将多个模块（通常是 JavaScript 文件）转换和打包成少数几个文件，以减少网络请求并优化加载时间。
• 关键功能：模块解析、依赖收集、文件合并。

核心步骤

1. 解析文件和模块：

• 使用例如@babel/parser 来解析 JavaScript 文件，将代码转换成 AST（抽象语法树）。
• 识别 import 和 export 语句，找出依赖关系。

2. 构建依赖图：

• 从入口文件开始，递归地解析每个文件的依赖。
• 构建一个数据结构（例如，使用对象或 Map）来表示整个应用的依赖图。

3. 打包和合并：

• 遍历依赖图，将所有模块合并成一个或几个文件。 可以使用@babel/traverse 来遍历 AST，@babel/generator 来生成代码。