单步调试理解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的原创文章,请关注公众号"汪子熙":

原文地址:https://www.cnblogs.com/sap-jerry/p/9831489.html

时间: 2024-10-06 23:36:25

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

Afianl框架里面的FinalBitmap加载网络图片

在Afianl框架里,FinalBitmap如何加载网络图片?有什么简单的方法吗?现在让麦子学院的android开发老师讲讲afina框架里面的finalbitmap加载网络图片的方法,Afinal里边FinalBitmap:用于显现bitmap图像,而无需思考线程并发和oom等疑问. 1.测验恳求 运用页面翻开http://avatar.csdn.net/C/6/8/1_bz419927089.jpg"可以看到一张图像. 2.新建FinalBitmap目标 1 FinalBitmap bitm

判断iframe里的页面加载完成

//判断iframe是否加载完成,RMid为iframe的ID document.getElementById("RMid").onload = function () { alert("加载完成"); } //在父框架操作iframe页面里的AddReceipt2方法 window.frames["RMid"].AddReceipt2(); 判断iframe里的页面加载完成,布布扣,bubuko.com

PHP之require加载

1 require加载到哪里? 2 内存区域. 执行php源码的编译 3 4 5 6 php文件在哪里执行 7 内存中执行. 8 9 首先向Apache发出 request 服务器调用内部服务模块php核心程序 把自己编写的php源程序加载到内存中. 10 11 12 13 载入内存 php核心程序调用 php核心程序调用 14 php核心程序 ------------- 自己编写php源代码文件 -----------编译 --------执行. 15 16 17 18 php文件起什么作用

webpack教程——css的加载

首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css-loader加载css文件,再用style-loader添加在页面中 在app目录下创建component.css文件 body{ background-color: red; } 在app/index.js中引入css文件 运行npm run start命令. 可以看到我们浏览器整个背景都变成了红

Java 反射理解(二)-- 动态加载类

Java 反射理解(二)-- 动态加载类 概念 在获得类类型中,有一种方法是 Class.forName("类的全称"),有以下要点: 不仅表示了类的类类型,还代表了动态加载类 编译时刻加载类是静态加载类,运行时刻加载类是动态加载类 演示 我们以具体的代码来演示什么是动态加载类和静态加载类: 新建:Office.java: class Office { public static void main(String[] args) { // new 创建对象,是静态加载类,在编译时刻就需

js模块化/js模块加载器/js模块打包器

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

CentOS中自动加载802.1q模块

要想在CentOS中自动加载内核模块,需要在/etc/sysconfig/modules/目录中增加一个脚本,在此脚本中加载所需的模块. 下面是我所用的一个名为8021q.modules的脚本,用来在我的CentOS 5.3中自动加载802.1Q模块: #! /bin/sh /sbin/modinfo -F filename 8021q > /dev/null 2>&1 if [ $? -eq 0 ]; then /sbin/modprobe 8021q fi 上面的脚本首先检查802

webpack配置常用loader加载器

webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpack --module-bind jade  --module-bind 'css=style!css' //jade,style,css后面可省略-loader,他们分别对.jade使用jade-loader,对.css使用style-loader和css-loader (2)通过require :

vue2.0配置webpack.dev.conf.js加载本地json数据

打开webpack.dev.conf.js 在const portfinder = require('portfinder')后加入以下配置 1 const express = require('express') 2 const app = express() // 请求server 3 var appData = require('../data.json') //加载本地数据 4 var seller = appData.seller //获取对应的数据 5 var goods = app