单步调试理解webpack里通过require加载nodejs原生模块实现原理

简介: 单步调试理解webpack里通过require加载nodejs原生模块实现原理

在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块。


原生模块的加载,比如:


const path = require(“path”);


这个语句是webpack和nodejs应用里经常使用到的。今天就来谈谈它的实现原理。


还是通过单步调试的方式来学习。


大家首先得通过我前一篇文章 webpack打包过程如何调试?学会如何调试webpack打包过程。


require函数的实现位于file:///internal/module.js




注意看第10行和第13行的requireDepth 加减一。因为一个module通过require被加载时,可能会递归地加载另外的依赖module,所以需要这个requireDepth字段来记录加载module的深度。


这个module.js的实际地址位于当前项目文件夹下的node_modules文件夹下面:




第11行的mod变量代表什么?


从调试器看出,就是当前命令行node启动的webpack.js:




mod.require(path)会将执行投递到Module._load函数:




首先会去Module._cache里检查path模块是否已经加载了。在我这个例子里,path是第一次加载,所以Module._cache是空的。




那么进入NativeModule.require(filename):




nativeModule,即原生模块,里面也有cache缓存机制。




因为path模块显然是原生模块,而非开发人员自己定义的模块,因此NativeModule.getCached返回了已经被预加载的path模块.


cached.exports里包含了一系列函数,这些函数就是我们nodejs应用里经常使用的工具函数,比如join, parse, resolve等等。




这就是nodejs和webpack里原生模块的加载原理。希望对前端开发人员有所帮助。


相关文章
|
4月前
|
自然语言处理 JavaScript 前端开发
webpack 的热更新是如何做到的?原理是什么?
webpack 的热更新是如何做到的?原理是什么?
38 0
|
4月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
34 0
|
4月前
|
JSON 数据格式
《Webpack5 核心原理与应用实践》学习笔记-> loader配置效验与内置工具
《Webpack5 核心原理与应用实践》学习笔记-> loader配置效验与内置工具
25 0
|
7月前
|
前端开发
React 安装使用 Less(详细流程,包含 webpack、craco 方式)
React 安装使用 Less(详细流程,包含 webpack、craco 方式)
154 0
|
8月前
|
存储 缓存 前端开发
深入了解 webpack 模块加载原理(下)
深入了解 webpack 模块加载原理(下)
56 0
|
8月前
|
缓存
深入了解 webpack 模块加载原理
深入了解 webpack 模块加载原理
53 0
|
缓存 JavaScript 前端开发
如何使用Webpack优化Vue.js应用性能
Webpack是一个模块化打包工具,可以将各种资源(JavaScript、CSS、图片等)打包成一个或多个静态资源,从而提高应用程序的性能和加载速度。本文将介绍如何使用Webpack来优化Vue.js应用的性能。
67 0
|
JavaScript
vue-cli3+webpack不兼容js库的时候,如何解决
A项目传统项目,调用第三方提供的方法,实现了签名功能(主要是因为签名资质),项目B是vue-ci3+webpack。项目B需要实现新功能,也用到签名,把签名代码集成了过来。调用第三方接口失败,各种排查问题。最后定位到问题在于,调用第三方方法,生成数据包的时候,数据包解析出来多了几个Null。
87 0
|
JSON 前端开发 JavaScript
vue之webpack打包原理和用法详解
vue之webpack打包原理和用法详解
927 0
vue之webpack打包原理和用法详解