自己写JavaScript模块加载器怎么实现？

想要深入理解前端打包的奥秘吗？本文将带你手写一个简易的 JavaScript 模块加载器，无需依赖 Webpack 或 Rollup 等复杂工具，仅用基础的 JavaScript 语法即可实现。我们将采用 CommonJS 风格的模块系统，通过递归解析 `require` 调用，构建模块依赖图（Module Graph），并生成包含所有模块的自执行函数。文章将详细讲解如何解析模块依赖、构建模块图，以及如何生成最终的打包代码，模拟模块作用域和 `require` 行为。即使是简化版实现，也能让你掌握打包器的核心原理，理解依赖收集、`require` 重写和代码合并的关键步骤，为后续学习更高级的打包技术打下坚实基础。

答案：通过递归解析CommonJS模块的require调用，构建依赖图并生成自执行函数包裹的合并代码，实现基础打包器。

实现一个简单的 JavaScript 打包器或模块加载器，核心是理解模块的依赖关系并将其合并为一个可执行文件。不需要借助 Webpack 或 Rollup 的复杂机制，我们可以用最基础的语法解析和递归遍历来完成。

1. 模块系统设计（CommonJS 风格）

我们采用类似 Node.js 的 require / module.exports 语法，这样结构清晰且易于解析。

例如，一个模块写成：

另一个文件通过 require('./xxx') 引入它。

2. 解析模块依赖

我们需要读取每个文件，提取其中的 require() 调用，找出依赖路径。可以使用正则简单匹配，虽然不完美，但对简单场景足够。

关键步骤：

• 读取入口文件内容
• 用正则 /require\(['"`](.+?)['"`]\)/g 提取依赖路径
• 将相对路径转为绝对路径，避免重复处理
• 递归分析每个依赖文件的依赖

3. 构建模块图（Module Graph）

把每个模块表示为一个对象，包含其内容、唯一 ID 和依赖列表。

代码示意：

4. 生成打包代码

将模块图转换为自执行函数，模拟模块作用域和 require 行为。

输出结构如下：

这样所有模块都在闭包内运行，互不污染。

5. 简化版实现要点

实际写一个最小可用版本，只需：

• 使用 fs 读文件（Node.js 环境）
• 用 DFS 遍历依赖树
• 为每个模块生成唯一 key（如相对路径）
• 拼接最终字符串，注入 runtime 的 require 函数

基本上就这些。虽不能处理 ES Module、动态导入或第三方库，但能帮助理解打包器本质：收集依赖、重写 require、合并代码。进阶可支持 transform（如 Babel）、code split 等。不复杂但容易忽略细节，比如路径解析和循环依赖。

好了，本文到此结束，带大家了解了《自己写JavaScript模块加载器怎么实现？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！