打包工具 web前端打包工具运行原理

科技数码

在前端模块化成为主流的今天,离不开各种封装工具的贡献。在社区里,webpack、rollup和usage这种后起之秀层出不穷,他们各自的使用配置分析也充满了热情。为了避免成为“配置工程师”,我们需要了解打包工具的操作原理。只有理解了核心原理,才能更方便的使用工具。

本文基于package core developer @ ronami的开源项目minipack,在其非常详细的注释中加入了更多的理解和说明,方便读者更好的理解。

1、打包工具核心原理

顾名思义,打包工具就是负责将一些分散的小模块按照一定的规则整合成一个大模块的工具。同时,打包工具还将处理模块之间的依赖关系,最终这个大模块将能够在适当的平台上运行。

打包工具将从一个条目文件开始,分析其中的依赖关系,并进一步分析依赖关系中的依赖关系,并重复这个过程,直到这些依赖关系得到澄清。

从上面的描述可以看出,打包工具的核心部分实际上是处理模块之间的依赖关系,而minipack和本文的讨论也集中在模块依赖的知识点上。

为了简单起见,minipack项目直接使用ESmodules规范,然后我们创建三个新文件并在它们之间建立依赖关系:

一旦搞清楚了真相,就可以开始写函数了。

尝试运行creategraph('。/example/entry.js '),您可以看到以下输出:

既然已经建立了依赖图谱,下一步就是把它们打包成一个可以直接运行的单一文件!

4、进行打包

上一步生成的依赖图谱将由CommomJS规范加载。由于篇幅所限,本文不做CommonJS规范的扩展,有兴趣的读者可以参考@阮一峰的一篇文章《浏览器加载CommonJS模块的原理与实现》,非常清楚。简单来说,通过构造一个即时执行函数(function() {})(),手工定义模块、导出和所需变量,最终实现代码在浏览器中运行的目的。

接下来,根据该规范,通过字符串拼接来构造代码块。

最后,运行bundle (creategraph(')。/example/entry.js '),输出如下:

这段代码将能够直接在浏览器中运行并输出“Helloworld!”。

至此,整个打包工具已经完成。

5、归纳总结

经过以上步骤,我们就可以知道一个模块打包工具了。第一步,我们从入口文件开始,分析它的依赖关系;在第二步中,我们将递归地分析它的所有依赖关系;第三步,我们将构建模块的依赖关系图谱;在最后一步中,我们将使用CommonJS规范根据依赖关系图构建最终代码。通过了解每一步的目的,就可以了解一个包装工具的工作原理。

最后再次感谢@ronami的开源项目minipack,其源代码有更详细的注释,值得一读。

标签: 打包工具