手动编写一个bundler

最新推荐文章于 2025-05-29 09:56:58 发布

-小橙子-

最新推荐文章于 2025-05-29 09:56:58 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

分类专栏： Webpack 文章标签：手动编写一个bundler

本文链接：https://blog.youkuaiyun.com/Riona_cheng/article/details/100975784

本文档详细介绍了如何从头开始手动编写一个bundler，包括安装node环境、初始化项目、创建项目文件、分析模块代码、构建依赖图谱以及生成浏览器可执行代码的过程。通过使用babel相关工具，实现了模块依赖的解析和转换，确保了代码在浏览器中的正确运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写一个bundler的步骤

1.安装node环境；
2.初始化项目；
3.创建src源代码目录；
4.创建bundler.js分析文件；
5.首先定义一个函数，用来分析模块代码；
1） fs读取文件；
2）使用babel/parser代码解析工具解析文件，解析为抽象语法树；
3）使用babel/traverse工具遍历抽象语法树，把依赖模块路径替换为绝对路径；
4）使用babel/core中的transformFromAst解析转译语法树中的code代码；
5）返回需要内容；
6.再定义一个函数–通过队列的形式----把所有模块的依赖信息存放到依赖图谱中；
7.定义一个函数—用来把获取到的依赖模块代码生成浏览器可执行的代码；（通过闭包的形式实现，避免各模块内变量的污染）

具体操作

1. node环境安装：

进入node.js官网进行安装

2. 初始化项目：

npm  init  -y

3.4. 创建项目文件：

目录如下

|--bundler
	|--src
		|--index.js
		|--message.js
		|--word.js
	|--bundler.js

项目入口文件： src/index.js

import message from './message.js';
console.log(`say ${
     
     message}`);

依赖模块： src/message.js

import {
   
    word } from './word.js';
export default word;

依赖模块： src/word.js

export const word = 'hello';

5. bundler.js分析文件：

const fs = require('fs'); // 引入node中的fs模块
const path = require('path'); // 引入path
const parser = require('@babel/parser'); // 引入@babel/parser模块
const traverse = require('@babel/traverse').default; // 引入traverse
const babel = require('@babel/core'); // 引入babel转译模块 

// 定义一个函数
const moduleAnalyser = (filename) => {
   
   
  // filename为要分析的入口文件

  // 5-1. fs读取文件
  const content = fs.readFileSync(filename, 'utf-8'); // 读取文件内容，并设置为utf-8编码格式
  // 5-2. 使用babel/parser代码解析工具解析文件，解析为抽象语法树；
  const ast = parser.parse(content, {
   
   
    sourceType: 'module'
  });
  
  //console.log(ast); // 打印语法树结构
  //console.log(ast.program.body); // 打印抽象语法树进行中的body内容
  
  const dependencies = {
   
   }; // 收集模块名字
  // 5-3. 使用babel/traverse工具遍历抽象语法树，把依赖模块路径替换为绝对路径；
  traverse(ast, {
   
   
    ImportDeclaration({
   
    node }) {
   
    // 遇到ImportDeclaration类型，就执行这个函数