实现一个类似Webpack的基础打包工具

比眉伴天荒 2024-04-19 10:23 68阅读 0赞

### 文章目录 ###

*  引入
 *  步骤简述
 *  具体实现
 *   *  分析文件
     *   *  源码
         *  解析
     *  分析依赖关系
     *   *  源码
         *  解析
     *  生成最终代码
     *   *  源码
         *  解析

# 引入 #

其实在Webpack官网，可以看到官方对于Webpack的定位是一个打包工具。而它最基础的使用就是在浏览器中实现JS的模块化和将ES6转为ES5。

浏览器中引入一个JS文件，如果文件中有使用`import`语句进行模块的引入，浏览器是会报错的。

那么我们要实现的这个基础的打包工具也就是用来解决这个问题的。

# 步骤简述 #

*  分析（入口）文件
    
     *  读取文件内容
     *  生成AST（抽象语法树）
     *  遍历树中节点，并形成该文件的依赖关系
     *  根据AST生成对应的符合ES5规范的代码
 *  分析依赖关系中依赖的其它文件，直到所有文件都经过分析
 *  生成最终代码（可在浏览器中直接运行，并实现了模块间的引用）

# 具体实现 #

## 分析文件 ##

### 源码 ###

const moduleAnalyser = (filename) => {
        
        const dependencies = {
        };
        const content = fs.readFileSync(filename, 'utf-8');
        const ast = parser.parse(content,{
        
            sourceType: 'module'
        });
        traverse(ast, {
        
            ImportDeclaration({
         node }){
        
                const dirname = path.dirname(filename);
                const dependency = node.source.value;
                const newFile = `./${
          path.join(dirname, dependency)}`;
                dependencies[dependency] = newFile;
            }
        });
        const {
         code } = babel.transformFromAst(ast, null, {
        
            presets: ["@babel/preset-env"]
        });
        return {
        
            filename,
            dependencies,
            code
        };
    };

### 解析 ###

`dependencise`对象是用来存储被引入文件的相对路径与相对打包工具路径的映射。例如我的源代码放在项目目录的`src`目录之下，代码中引入了同目录下的`test.js`，而打包工具放在项目根目录下，那么`dependencies`中就会存储`{'./test.js': './src/test.js'}`。

然后使用Node.js的`fs`模块来读取入口文件，返回值即为文件内容，换句话说就是代码。

接下来就该解析代码生成AST，这个需要借助`@babel/parser`来实现。

这个库就是一个JavaScript的解析器，主要的API就两个`parse`和`parseExpression`。参数也有许多，[具体详见官网][Link 1]。

那么`parse`方法返回的结果就是AST了，接着需要对AST进行遍历，找出所有的`ImportDeclaration`节点，进而建立前面提到的地址间的映射。

然后就要将当前文件的内容转译成ES5规范，这就要通过`@babel/core`来实现了。

最后将当前分析的文件路径、依赖关系和转译后的代码返回。

## 分析依赖关系 ##

### 源码 ###

const makeDependenciesGraph = (entry) => {
        
        const entryModule = moduleAnalyser(entry);
        const graphQueue = [ entryModule ];
        const graph = {
        };
    
        while(graphQueue.length){
        
            const item = graphQueue.shift();
            const {
         dependencies, code } = item;
            if(dependencies){
        
                graph[item.filename] = {
        
                    dependencies,
                    code
                };
                for(let j in dependencies){
          
                    graphQueue.push(moduleAnalyser(dependencies[j]));
                }
            }
        }
        return graph;
    };

### 解析 ###

这部分逻辑其实非常简单，就是通过一个队列，将依赖关系中所有引用的文件都进行分析，直到将所有的文件都分析完毕。

## 生成最终代码 ##

### 源码 ###

const generateCode = (entry) => {
        
        const graph = JSON.stringify(makeDependenciesGraph(entry));
        return `
            (function(graph){
                function require(module) {
                    function localRequire(relativePath){
                        return require(graph[module].dependencies[relativePath]);
                    }
                    let exports = {};
                    (function(require, exports, code){
                        eval(code);
                    })(localRequire, exports, graph[module].code)
                    return exports;
                }
                require('${
          entry}');
            })(${
          graph})
        `;
    };

### 解析 ###

这个函数才是整个打包过程中的入口函数。`graph`就是经过上一步获得的各个文件的依赖关系和代码。

如果去查看之前生成的那些代码，会发现里面包含了`require`、`exports`这些函数或对象，但是很显然浏览器环境中没有这两个东西，于是需要自己实现。

[Link 1]: https://babeljs.io/docs/en/babel-parser

发表评论取消回复

表情：

评论列表（有 0 条评论，68人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个类似Webpack的基础打包工具

文章目录 * 引入 * 步骤简述 * 具体实现 * * 分析文件 * * 源码 * 解析 * 分析...

比眉伴天荒/ 2024年04月19日 10:23/ 0 赞/ 69 阅读

相关 webpack - 基础打包实现

目录 webpack基础打包 webpack函数打包分析webpack基础打包后产出的bundle.js 自定义webpack函数 Compiler类实现实现代

红太狼/ 2023年09月26日 08:47/ 0 赞/ 47 阅读

相关 webpack打包工具

一、webpack基本使用 1.新建空白文件（目录）文件名不能是webpack，运行 npm init -y （路径中不能有中文），初始化package.json文件

约定不等于承诺〃/ 2023年08月17日 17:30/ 0 赞/ 166 阅读

相关 Webpack打包工具

文章目录 1，webpack需要npm安装 2，使用webpack打包工具，就不用在html页面引用js文件了，如何引用？ 3，webpack打包命令

不念不忘少年蓝@/ 2023年06月04日 12:59/ 0 赞/ 55 阅读

相关前端打包工具webpack的基础认知

webpack webpack是一个构建工具，中文名称叫“静态资源打包器”。 ![在这里插入图片描述][20210416165416121.png] 一、webp

比眉伴天荒/ 2022年11月25日 05:25/ 0 赞/ 192 阅读

相关一个比 webpack 快10倍的打包工具

作为奇舞团的一个小小程序媛，每天都在不断地接受新知识，PostCSS刚学完，PostHTML又出来了。刚研究明白Rollup的配置，又有一个横空出世的打包工具——Parcelj

分手后的思念是犯贱/ 2022年05月31日 06:38/ 0 赞/ 240 阅读

相关四、webpack打包工具

webpack打包工具 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块

ゞ浴缸里的玫瑰/ 2022年04月10日 02:21/ 0 赞/ 356 阅读

相关 Webpack前端打包工具

1、概述 Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。中文官方网站：[https://www.webpack

忘是亡心i/ 2022年04月06日 07:56/ 0 赞/ 338 阅读

相关 webpack打包工具

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

￡神魔★判官ぃ/ 2021年09月16日 17:34/ 0 赞/ 628 阅读

相关 webpack前端打包工具

前言 webpack是前端人员常用到的打包工具，包括vuecli搭建自带的webpack. 什么是webpack? webpack可以理解为，将程序员编写的源代码

妖狐艹你老母/ 2021年07月26日 01:33/ 0 赞/ 571 阅读