在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原生模块实现原理的更多相关文章

  1. Webpack按需加载一切皆模块

    前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...

  2. 从Spring容器的角度理解Dubbo扩展点的加载时机

    对于Dubbo提供的扩展点,主程序执行的过程中并没有显示调用加载的过程,无论是自激活的Filter还是自适应的ThreadPool.那么这样的扩展点在程序运行的哪个节点调用的呢?跟踪之前性能监控扩展点 ...

  3. 完美解决Webpack多页面热加载缓慢问题【转载】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...

  4. 在seajs中使用require加载静态文件的问题

    注意,在seajs中使用require加载静态文件时,必须使用常量,不能用变量.如果一定要用变量,请使用require.async var html = require("view/sys/ ...

  5. VS调试时JSON格式文件无法加载

    VS调试时JSON格式文件无法加载 报错: 解决:在项目中的web.config中进行配置,configuration节中添加以下部份: <system.webServer> <st ...

  6. webpack教程——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

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

    Java 反射理解(二)-- 动态加载类 概念 在获得类类型中,有一种方法是 Class.forName("类的全称"),有以下要点: 不仅表示了类的类类型,还代表了动态加载类 编 ...

  8. Extjs4.1.x使用Application动态按需加载MVC各模块

    我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合, ...

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

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

随机推荐

  1. vue.js学习笔记(二)——vue-router详解

    vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...

  2. lintcode - 统计比给定整数小的数的个数(两种方法)

    class Solution { public: /* * @param A: An integer array * @param queries: The query list * @return: ...

  3. django 视图view

    视图里一般是函数和类,需要返回响应. 试图分为2种:2. CBV(class base view) FBV(function base view) from django.views import V ...

  4. robot framework 的AutoItLibrary常用关键字

    1.run 的用法,以及激活当前窗口

  5. jndi理解

    java中很多这些接口规范,jndi就是其中一个,而下面那些包就是jndi接口的提供商程序实现包,他们都是遵循jndi规范的. 主要接口功能是:添加命名与对象的映射到jndi树中,客户能快速查找并使用 ...

  6. 数据库mysql基础语言--各模式的含义

    1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...

  7. 性能测试工具LoadRunner31-LR之链接mysql

    步骤: 1.建好mysql数据库并启动 2.下载libmysql.dll,放到保存脚本的文件夹下 3.编写脚本并运行 Action() { int rc; //定义状态变量,0表示成功,非0表示失败 ...

  8. Collections练习之按照字符串长度进行排序

    不多说,直接上干货! 代码需求 想从 [abcde, cba, aa, zzz, cba, nbaa] 变成 [aa, cba, cba, zzz, nbaa, abcde] CollectionsD ...

  9. PHP函数库(core)

    数组函数: array_change_key_case — 返回字符串键名全为小写或大写的数组 array_change_key_case() 将 input 数组中的所有键名改为全小写或大写.改变是 ...

  10. 10个常见的Redis面试"刁难"问题--转

    高可用架构 导读:在程序员面试过程中Redis相关的知识是常被问到的话题.作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题.十分值得一读. 作者简介:钱 ...