百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

Node.js 是怎么找到模块的?(nodejs官方模块)

ztj100 2025-03-24 01:40 9 浏览 0 评论

大家好,我是前端西瓜哥,今天我们来看看 Node.js 模块查找的原理。

模块种类

模块有三种来源。

  1. 核心模块:Node.js 内置的包。比如 http、fs、path;
  2. 自定义模块:NPM 包。比如 axios、express,位于 node_modules 目录下的同名目录,并通过 package.json 的 main 字段指定入口文件;
  3. 文件模块:项目自己的模块文件,使用路径的写法。包括相对路径(比如 "./utils")和绝对路径(比如 "/Users/xigua/project/utils")。

需要注意的是,"a/b" 这种不属于路径写法,它属于前两种,比如 "fs/promises"、"@babel/core"。

这里给一个例子:

const http = require('http'); // Node.js 内置包
const { defaultContent } = require('./default'); // 开发者自己写的模块文件
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end(defaultContent);
}).listen(3200);

模块查找

我们使用 require() 方法,传入一个字符串标识符,模块查找的旅途就开始了。

核心模块

首先分析标识符的风格,如果是不是路径的写法,我们会先找 Node.js 内置的包有没有匹配的,如果匹配,就导入对应模块,比如 require('http') 就能拿到一个 http 对象,可用于创建 web 服务等功能。

NPM 包

如果不匹配,会在当前文件的目录下,找 node_modules 目录,看里面有没有对应的包。如果找不到,就继续往父目录找,直到根目录。如果找不到,会报 Cannot find module '包名' 的错误。

文件模块

包通常是一个文件夹,里面会有 package.json 文件,Node.js 会提取其中 main 字段对应的文件作为模块文件。如果没有,就依次查找该目录下的 index.js、index.json、index.node 文件。

需要查找的目录可以通过 module.paths 变量得到。

如果你熟悉 JavaScript 的原型链,你会发现它们非常相似,可以做类比以加深理解。

如果标识符是路径,会通过计算得到一个绝对路径,然后找到的是个目录,同上面找 npm 包的逻辑。

要是找不到,就加上后缀再找。后缀按顺序添加为:.js.json.node,找到就立即返回。若一个文件没有后缀但被匹配到了,它会被当作 js 文件。

上面没说缓存的情况,其实我们会对模块做缓存,下面详细说明一下。

模块缓存

每当加载一个模块后,这个模块就会被缓存起来。

你可以在随意一个文件中输入得到缓存的内容,是一个哈希表,key 为模块的绝对路径,确保缓存命中,value 则是模块对象。

const { Module } = require("module");
console.log(Module._cache);

也能用 require.cache 变量拿到,它和 Module._cache 指向同一个对象。

Node.js 内置的模块也需要缓存,但它不会记录到 Module._cache 中,而是保存在 Module.

下面是一个例子,index.js 导入了 a.js,a.js 下引入了 lodash.get 包,模块缓存结果为:

因为缓存的存在,所以 一个模块文件只会被执行一次,然后将 module.exports 缓存下来。

之后被多次导入,不会再执行这个模块文件,而是直接取出对应的 module.exports。

总结

画了个流程图,丢掉了一些细节(路径定位到目录后的逻辑)。

我是前端西瓜哥,欢迎关注我,学习更多前端知识。

相关推荐

使用 Pinia ORM 管理 Vue 中的状态

转载说明:原创不易,未经授权,谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术,但随着应用程序复杂性的增加,处理状态可能变得更具挑战性。这就是为什么...

Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码

Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。...

超赞 vue2/3 可视化打印设计VuePluginPrint

今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

搭建Trae+Vue3的AI开发环境(vue3 ts开发)

从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。...

如何在现有的Vue项目中嵌入 Blazor项目?

...

Vue中mixin怎么理解?(vue的mixins有什么用)

作者:qdmryt转发链接:https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹,安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示:创建my-first-vue...

新手如何搭建个人网站(小白如何搭建个人网站)

ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI框架来完成个人博客的主体开发,欢迎大家讨论...

零基础入门vue开发(vue快速入门与实战开发)

上面一节我们已经成功的安装了nodejs,并且配置了npm的全局环境变量,那么这一节我们就来正式的安装vue-cli,然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...

.net core集成vue(.net core集成vue3)

react、angular、vue你更熟悉哪个?下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue(npm...

使用 Vue 脚手架,为什么要学 webpack?(一)

先问大家一个很简单的问题:vueinitwebpackprjectName与vuecreateprojectName有什么区别呢?它们是Vue-cli2和Vue-cli3创建...

vue 构建和部署(vue项目部署服务器)

普通的搭建方式(安装指令)安装Node.js检查node是否已安装,终端输入node-v会使用命令行(安装)npminstallvue-cli-首先安装vue-clivueinitwe...

Vue.js 环境配置(vue的环境搭建)

说明:node.js和vue.js的关系:Node.js是一个基于ChromeV8引擎的JavaScript运行时环境;类比:Java的jvm(虚拟机)...

vue项目完整搭建步骤(vuecli项目搭建)

简介为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。...

取消回复欢迎 发表评论: