答案：通过解析AST收集依赖，构建模块图并封装为自执行函数实现打包。首先读取文件内容并解析为AST，提取import路径形成依赖关系；接着从入口文件开始递归分析所有依赖，构建包含每个模块路径、依赖和代码的图结构；然后将每个模块包裹在函数中，通过require机制实现模块间引用，最终生成一个包含所有模块的闭包函数，写入输出文件。该过程展示了Bundler的核心原理：依赖解析、作用域隔离与模块加载。
实现一个基础的 JavaScript 打包器（Bundler），核心是分析模块依赖关系，并将它们合并成一个或多个可执行文件。下面是一个简化但完整的工作流程，帮助你理解并动手实现一个最简单的 Bundler。
1. 解析单个模块
每个模块需要被读取、解析其 import 语句，提取依赖，并将其代码转换为可在浏览器中运行的形式。
使用fs 和 path 模块读取文件，用 @babel/parser 分析 AST 来提取 import。
示例代码：
const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
function createAsset(filename) {
const content = fs.readFileSync(filename, 'utf-8');
// 解析为 AST
const ast = parser.parse(content, {
sourceType: 'module',
});
const dependencies = [];
// 遍历 AST，收集 import 路径
traverse(ast, {
ImportDeclaration({ node }) {
dependencies.push(node.source.value);
}
});
return {
filename,
dependencies,
code: content // 简化：未做 transform
};
}
2. 构建模块依赖图
从入口文件开始，递归解析所有依赖，形成一个依赖图结构。
立即学习“Java免费学习笔记（深入）”；
示例代码：
function createGraph(entry) {
const mainAsset = createAsset(entry);
const queue = [mainAsset];
const graph = [];
for (const asset of queue) {
asset.mapping = {};
const dirname = path.dirname(asset.filename);
asset.dependencies.forEach(relativePath => {
const absolutePath = path.join(dirname, relativePath);
const child = createAsset(absolutePath);
asset.mapping[relativePath] = child.filename; // 映射 import 路径到实际路径
queue.push(child);
});
}
return queue;
}
3. 生成打包后代码
将依赖图中的所有模块包裹在函数中，通过对象映射实现模块系统（模拟 CommonJS 或 ESM）。
关键是让每个模块在隔离的作用域内执行，并支持通过路径引用其他模块。
示例打包逻辑：
function bundle(graph) {
let modules = '';
graph.forEach(mod => {
const filePath = mod.filename;
const wrappedCode = `
'${filePath}': function (require, module, exports) {
${mod.code}
},
`;
modules += wrappedCode;
});
const result = `
(function(modules) {
function require(id) {
const module = { exports: {} };
modules[id](require, module, module.exports);
return module.exports;
}
require('${graph[0].filename}');
})({${modules}});
`;
return result;
}
4. 使用方式与输出
整合以上函数，调用并写入输出文件。
完整调用示例：
const fs = require('fs');
const graph = createGraph('./example/entry.js');
const output = bundle(graph);
fs.writeFileSync('dist/bundle.js', output);
console.log('Bundled!');
假设项目结构如下：
example/ entry.js message.js
其中 entry.js 导入 message.js，打包器会递归解析并打包成一个文件。
基本上就这些。这个简易 Bundler 实现了：AST 解析、依赖收集、作用域隔离、模块加载机制。虽然没有处理 ES6 转译、CSS、代码压缩等高级功能，但它揭示了 Webpack、Rollup 等工具的核心原理。
