http://safalsoft.com/dabao/930/

打包工具也会处理好模块之间的依赖关系

  接下来,我们会撰写一个函数,代码打包工具这个函数领受一个文件作为模块,然后读取它里面的内容,阐发出其所有的依赖项。当然,我们能够通过正则婚配模块文件里面的import环节字,但如许做很是不文雅,所以我们能够利用babylon这个js解析器把文件内容转化成笼统语法树(AST),间接从AST里面获取我们需要的消息。

  打包东西会从一个入口文件起头,阐发它里面的依赖,而且再进一步地阐发依赖中的依赖,不竭反复这个过程,直到把这些依赖关系理清挑明为止。

  新建一个名为createGragh()的函数,传入一个入口文件的路径作为参数,然后通过createAsset()解析这个文件使之定义成一个模块。

  可是,这里面的依赖关系只是我们人类所理解的,若是要让机械也可以或许理解傍边的依赖关系,就需要借助必然的手段了。

  与此同时,我们有需要为模块新建一个mapping属性,用来储存模块、依赖、依赖ID之间的依赖关系,例如“ID为0的A模块依赖于ID为2的B模块和ID为3的C模块”就能够暗示成下面这个样子:

  本文基于parcel焦点开辟者@ronami的开源项目minipack而来,在其很是详尽的正文之上插手更多的理解和申明,便利读者更好地舆解。

  可能有读者对此中的for...of ...轮回傍边的queue.push有点迷,可是只需测验考试过下面这段代码就能搞大白了:

  从上面的描述能够看到,打包东西最焦点的部门,其实就是处置好模块之间的依赖关系,而minipack以及本文所要会商的,也是集中在模块依赖关系的学问点傍边。

  颠末上面几个步调,我们能够晓得一个模块打包东西,第一步会从入口文件起头,对其进行依赖阐发,第二步对其所有依赖再次递归进行依赖阐发,第三步建立出模块的依赖图集,最初一步按照依赖图集利用CommonJS规范建立出最终的代码。大白了傍边每一步的目标,便可以或许大白一个打包东西的运转道理。

  获得了AST之后,就能够利用babel-traverse去遍历这棵AST,获取傍边环节的“依赖声明”,然后把这些依赖都保具有一个数组傍边。

  最初再次感激@ronami的开源项目minipack,其源码有着更为细致的正文,很是值得大师阅读。

  此刻依赖关系图集曾经建立完成了,接下来就是把它们打包成一个零丁的,可间接运转的文件啦!

  前端模块化成为了支流的今天,离不开各类打包东西的贡献。社区里面临于webpack,rollup以及后起之秀parcel的引见屡见不鲜,对于它们各自的利用设置装备摆设阐发也是汗牛充栋。为了避免成为一位“设置装备摆设工程师”,我们需要来领会一下打包东西的运转道理,只要把焦点道理搞大白了,在东西的利用上才能愈加驾轻就熟。

  上一步生成的依赖关系图集,接下来将通过CommomJS规范来实现加载。因为篇幅关系,本文不合错误CommomJS规范进行扩展,有乐趣的读者能够参考@阮一峰 教员的一篇文章《浏览器加载 CommonJS 模块的道理与实现》,说得很是清晰。简单来说,就是通过机关一个当即施行函数(function () {})(),手动定义module,exports和require变量,最初实现代码在浏览器运转的目标。

  顾名思义,打包东西就是担任把一些分离的小模块,按照必然的法则整合成一个大模块的东西。与此同时,打包东西也会处置好模块之间的依赖关系,最终这个大模块将能够被运转在合适的平台中。

  接下来,为了可以或许挨个挨个地对模块进行依赖阐发,所以我们维护一个数组,起首把第一个模块传进去并进行阐发。当这个模块被阐发出还有其他依赖模块的时候,就把这些依赖模块也放进数组中,然后继续阐发这些新