单步调试理解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原生模块实现原理的更多相关文章
- Webpack按需加载一切皆模块
前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...
- 从Spring容器的角度理解Dubbo扩展点的加载时机
对于Dubbo提供的扩展点,主程序执行的过程中并没有显示调用加载的过程,无论是自激活的Filter还是自适应的ThreadPool.那么这样的扩展点在程序运行的哪个节点调用的呢?跟踪之前性能监控扩展点 ...
- 完美解决Webpack多页面热加载缓慢问题【转载】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...
- 在seajs中使用require加载静态文件的问题
注意,在seajs中使用require加载静态文件时,必须使用常量,不能用变量.如果一定要用变量,请使用require.async var html = require("view/sys/ ...
- VS调试时JSON格式文件无法加载
VS调试时JSON格式文件无法加载 报错: 解决:在项目中的web.config中进行配置,configuration节中添加以下部份: <system.webServer> <st ...
- webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
- Java 反射理解(二)-- 动态加载类
Java 反射理解(二)-- 动态加载类 概念 在获得类类型中,有一种方法是 Class.forName("类的全称"),有以下要点: 不仅表示了类的类类型,还代表了动态加载类 编 ...
- Extjs4.1.x使用Application动态按需加载MVC各模块
我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合, ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
随机推荐
- vue.js学习笔记(二)——vue-router详解
vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...
- lintcode - 统计比给定整数小的数的个数(两种方法)
class Solution { public: /* * @param A: An integer array * @param queries: The query list * @return: ...
- django 视图view
视图里一般是函数和类,需要返回响应. 试图分为2种:2. CBV(class base view) FBV(function base view) from django.views import V ...
- robot framework 的AutoItLibrary常用关键字
1.run 的用法,以及激活当前窗口
- jndi理解
java中很多这些接口规范,jndi就是其中一个,而下面那些包就是jndi接口的提供商程序实现包,他们都是遵循jndi规范的. 主要接口功能是:添加命名与对象的映射到jndi树中,客户能快速查找并使用 ...
- 数据库mysql基础语言--各模式的含义
1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...
- 性能测试工具LoadRunner31-LR之链接mysql
步骤: 1.建好mysql数据库并启动 2.下载libmysql.dll,放到保存脚本的文件夹下 3.编写脚本并运行 Action() { int rc; //定义状态变量,0表示成功,非0表示失败 ...
- Collections练习之按照字符串长度进行排序
不多说,直接上干货! 代码需求 想从 [abcde, cba, aa, zzz, cba, nbaa] 变成 [aa, cba, cba, zzz, nbaa, abcde] CollectionsD ...
- PHP函数库(core)
数组函数: array_change_key_case — 返回字符串键名全为小写或大写的数组 array_change_key_case() 将 input 数组中的所有键名改为全小写或大写.改变是 ...
- 10个常见的Redis面试"刁难"问题--转
高可用架构 导读:在程序员面试过程中Redis相关的知识是常被问到的话题.作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题.十分值得一读. 作者简介:钱 ...