单步调试理解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里原生模块的加载原理。希望对前端开发人员有所帮助。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

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

单步调试学习WordPress PHP文件的加载顺序
index.php作为入口,加载的调用栈如下图所示: 加载后在console里打印的加载日志: [Wed Jul 17 11:39:59 2019] 127.0.0.1:56156 [404]: /? ...
Nodejs之require加载机制（模块可以污染全局空间）
以前就觉得Nodejs的MooTools库很奇怪,因为用他的时候,不需要把require的返回值保存起来,今天实在憋不住,就研究了下,对NodeJs的require机制又有了几分深刻的理解. MooT ...
通过单步调试理解Angular里routerLink指令实际url的生成逻辑
My Analysis I set a breakpoint in function generateUrlPart in file Spartacus-core.js: For every path ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码意思是先用css- ...
未能加载指定的模块“\Neo4j-Management.psd1
未能加载指定的模块"\Neo4j-Management.psd1 解决方案方法一增加环境变量PSScriptRoot = "D:\beforeInstalling\neo4j- ...
flutter UiKitView 加载ios 原生view
更多文章请查看 flutter从入门到精通 flutter 中提供的 UiKitView 组件是用来加载 ios 原生view 在这里有详细阐述点击查看详情
【Ubuntu】自动加载第三方ko模块
有时候,我们需要让系统加载第三方的内核模块,但是重新编译内核显然太繁琐,我们可以使用某些手段来手动加载或者自动加载这些模块. 手动加载直接执行以下指令即可 sudo insmod *.ko 或者将k ...
android去广告实现原理,分析某视频软件加载方案和去广告原理
分析某视频软件加载方案和去广告原理0x1用到的工具:AndroidKiller eclipse jd-gui Android逆向助手0x2拿到APK后首先想到的是是否有签名验证,因此用逆向助手重新签名 ...

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

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

最新文章

热门文章