头图

90行代码实现模块打包器

大家好,我卡颂。

今天来聊聊如何用90行代码实现一个现代JS模块打包器。

我们的打包器虽然迷你,但是实现了webpack的核心功能。

而且,我知道你看到大段代码头疼,所以这篇文章都是图。看完感兴趣的话,这里是完整代码的仓库地址,只有90行代码哦。

让我们愉快的开始吧。

生成依赖图

如果应用是个毛线团的话,那么入口文件就是线头。打包器要做的第一件事是:

顺着线头开始滤清整条线的走向

假设入口文件是entry.js

// entry.js

import a from './a.js';
import b from './b.js';

console.log(a, b);

他依赖了a.jsb.js

em... 有点太简陋了,让我们再扩展下a.jsb.js

// a.js
import c from './c.js';

// ...
// b.js
import d from './d.js';
import e from './e.js';

// ...

所以整个依赖关系是这样:

打包器会从入口文件开始,尝试建立模块(即js文件)间的依赖关系,也就是刚才我们讲的顺着线头开始滤清整条线的走向

模块间的依赖关系可以通过分析模块代码中的import 声明语句得知。

为了能分析import 声明语句,可以使用babel等编译工具将模块代码分解为AST(抽象语法树)。

遍历AST,类型为ImportDeclaration的节点就是import声明语句

最后,我们将AST重新转换为可执行的目标代码,可能还需要根据代码要执行的宿主环境(一般为浏览器)对代码做一些转换。

比如,浏览器不支持import './a.js'这样的ESM语法,那么我们需要将所有ESM语法转为CJS语法。

// 源代码
import './a.js';

// 转换后
require('./a.js');

所以,对于任一模块(js文件),会经历:

右边包含目标代码模块间依赖关系的数据结构被称为asset

每个asset可以通过模块间依赖关系找到依赖的模块,重复这一过程,生成新的asset,最终形成整个应用所有asset间的依赖关系:

应用完整的依赖关系被称为依赖图(dependency graph)。

打包代码

接下来,只需要遍历依赖图,将所有asset目标代码打包在一起就行。

所有代码会被打包在一个立即执行函数中:

(function(modules) {
  // 打包好的代码
})(modules)

modules中保存了所有asset及他们之间的依赖关系。

如果你对modules的细节感兴趣,可以去文末仓库里翻代码

刚才说过,asset目标代码CJS规范的,类似:

// entry.js

require('./a.js');
require('./b.js');

这意味着我们需要实现:

  • require方法(用于引入依赖的其他asset目标代码
  • module对象(用于保存当前asset目标代码执行后导出的数据)

同时,为了防止不同asset目标代码中的变量互相污染,每个目标代码需要独立的作用域。

我们将目标代码包裹在函数中:

// 我们操作的是字符串模版
`function (require, module, exports) {
  ${asset.code}
}`

所以,最终打包的结果为:

(function(modules) {
  function require() {// ...}
  
  require(入口asset的ID)
})(modules)

这段字符串被包裹在浏览器<script>标签内,会依次执行:

  1. require(入口asset的ID),执行入口asset目标代码
  2. 目标代码内部会调用require执行其他asset目标代码
  3. 一步步执行下去...

总结

打包器的工作原理分为两步:

  1. 从入口文件开始遍历,生成依赖图
  2. 根据依赖图,将代码打包进一个立即执行函数

这个打包器还很稚嫩,缺失很多必要的功能,比如:

  • 解决循环依赖
  • 缓存

但是瑕不掩瑜嘛~

欢迎加入人类高质量前端框架研究群,带飞
avatar
卡颂
《React技术揭秘》作者
2.5k 声望
16.5k 粉丝
0 条评论
推荐阅读
React为什么不将Vite作为默认推荐?
CRA推出于2016年,彼时还没有成体系的React脚手架工具供大家使用,再加上这是官方工具,一经推出就受到了欢迎。截止当前,CRA仓库已经收获快10wstar。

卡颂1阅读 386

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

avatar
卡颂
《React技术揭秘》作者
2.5k 声望
16.5k 粉丝
宣传栏