• 售前

  • 售后

热门帖子
入门百科

require加载器实现原理的深入明确

[复制链接]
落日五湖W 显示全部楼层 发表于 2021-10-26 12:59:38 |阅读模式 打印 上一主题 下一主题
前言

我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简朴地明白为运行javascript的环境。在大多数环境下我们会在浏览器中去运行javascript,有了node的出现,我们可以在node中去运行javascript,这意味着那里安装了node大概浏览器,我们就可以在那里运行javascript。
1.node模块化的实现


node中是自带模块化机制的,每个文件就是一个单独的模块,而且它遵循的是CommonJS规范,也就是使用require的方式导入模块,通过module.export的方式导出模块。
node模块的运行机制也很简朴,着实就是在每一个模块外层包裹了一层函数,有了函数的包裹就可以实现代码间的作用域隔离。
你大概会说,我在写代码的时候并没有包裹函数呀,是的简直云云,这一层函数是node自动帮我们实现的,我们可以来测试一下。
我们新建一个js文件,在第一行打印一个并不存在的变量,比如我们这里打印window,在node中是没有window的。
  1. console.log(window);
复制代码
通过node实行该文件,会发现报错信息如下。(请使用体系默认cmd实行下令)。
  1. (function (exports, require, module, __filename, __dirname) { console.log(window);
  2. ReferenceError: window is not defined
  3.     at Object.<anonymous> (/Users/choice/Desktop/node/main.js:1:75)
  4.     at Module._compile (internal/modules/cjs/loader.js:689:30)
  5.     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
  6.     at Module.load (internal/modules/cjs/loader.js:599:32)
  7.     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
  8.     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
  9.     at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
  10.     at startup (internal/bootstrap/node.js:279:19)
  11.     at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)
复制代码
可以看到报错的顶层有一个自实行的函数,, 函数中包罗exports, require, module, __filename, __dirname这些我们常用的全局变量。
我在之前的《前端模块化发展进程》一文中介绍过。自实行函数也是前端模块化的实现方案之一,在早期前端没有模块化体系的期间,自实行函数可以很好的解决定名空间的标题,而且模块依靠的其他模块都可以通过参数通报进来。cmd和amd规范也都是依靠自实行函数实现的。
在模块体系中,每个文件就是一个模块,每个模块外面会自动套一个函数,而且界说了导出方式 module.exports大概exports,同时也界说了导入方式require。
  1. let moduleA = (function() {
  2.     module.exports = Promise;
  3.     return module.exports;
  4. })();
复制代码
2.require加载模块


require依靠node中的fs模块来加载模块文件,fs.readFile读取到的是一个字符串。
在javascrpt中我们可以通过eval大概new Function的方式来将一个字符串转换成js代码来运行。
eval
  1. const name = 'yd';
  2. const str = 'const a = 123; console.log(name)';
  3. eval(str); // yd;
复制代码
new Function
new Function接收的是一个要实行的字符串,返回的是一个新的函数,调用这个新的函数字符串就会实行了。如果这个函数必要通报参数,可以在new Function的时候依次传入参数,末了传入的是要实行的字符串。比如这里传入参数b,要实行的字符串str。
  1. const b = 3;
  2. const str = 'let a = 1; return a + b';
  3. const fun = new Function('b', str);
  4. console.log(fun(b, str)); // 4
复制代码
可以看到eval和Function实例化都可以用来实行javascript字符串,好像他们都可以来实现require模块加载。不过在node中并没有选用他们来实现模块化,缘故原由也很简朴由于他们都有一个致命的标题,就是都轻易被不属于他们的变量所影响。
如下str字符串中并没有界说a,但是确可以使用上面界说的a变量,这显然是不对的,在模块化机制中,str字符串应该具有自身独立的运行空间,自身不存在的变量是不可以直接使用的。
  1. const a = 1;
  2. const str = 'console.log(a)';
  3. eval(str);
  4. const func = new Function(str);
  5. func();
复制代码
node存在一个vm假造环境的概念,用来运行额外的js文件,他可以保证javascript实行的独立性,不会被外部所影响。
vm 内置模块
固然我们在外部界说了hello,但是str是一个独立的模块,并不在村hello变量,所以会直接报错。
  1. // 引入vm模块, 不需要安装,node 自建模块
  2. const vm = require('vm');
  3. const hello = 'yd';
  4. const str = 'console.log(hello)';
  5. wm.runInThisContext(str); // 报错
复制代码
所以node实行javascript模块时可以采用vm来实现。就可以保证模块的独立性了。
3.require代码实现


介绍require代码实现之前先来回顾两个node模块的用法,由于下面会用得到。
path模块
用于处置惩罚文件路径。
basename: 底子路径, 有文件路径就不是底子路径,底子路劲是1.js
extname: 获取扩展名
dirname: 父级路劲
join: 拼接路径
resolve: 当前文件夹的绝对路径,留意使用的时候不要在末端添加/
__dirname: 当前文件地点文件夹的路径
__filename: 当前文件的绝对路径
  1. const path = require('path', 's');
  2. console.log(path.basename('1.js'));
  3. console.log(path.extname('2.txt'));
  4. console.log(path.dirname('2.txt'));
  5. console.log(path.join('a/b/c', 'd/e/f')); // a/b/c/d/e/
  6. console.log(path.resolve('2.txt'));
复制代码
fs模块
用于利用文件大概文件夹,比如文件的读写,新增,删除等。常用方法有readFile和readFileSync,分别是异步读取文件和同步读取文件。
  1. const fs = require('fs');
  2. const buffer = fs.readFileSync('./name.txt', 'utf8'); // 如果不传入编码,出来的是二进制
  3. console.log(buffer);
复制代码
fs.access: 判断是否存在,node10提供的,exists方法已经被废弃, 缘故原由是不符合node规范,所以我们采用access来判断文件是否存在。
  1. try {
  2.     fs.accessSync('./name.txt');
  3. } catch(e) {
  4.     // 文件不存在
  5. }
复制代码
4.手动实现require模块加载器


首先导入依靠的模块path,fs, vm, 而且创建一个Require函数,这个函数接收一个modulePath参数,表示要导入的文件路径。
  1. // 导入依赖
  2. const path = require('path'); // 路径操作
  3. const fs = require('fs'); // 文件读取
  4. const vm = require('vm'); // 文件执行
  5. // 定义导入类,参数为模块路径
  6. function Require(modulePath) {
  7.     ...
  8. }
复制代码
在Require中获取到模块的绝对路径,方便使用fs加载模块,这里读取模块内容我们使用new Module来抽象,使用tryModuleLoad来加载模块内容,Module和tryModuleLoad我们稍后实现,Require的返回值应该是模块的内容,也就是module.exports。
  1. // 定义导入类,参数为模块路径
  2. function Require(modulePath) {
  3.     // 获取当前要加载的绝对路径
  4.     let absPathname = path.resolve(__dirname, modulePath);
  5.     // 创建模块,新建Module实例
  6.     const module = new Module(absPathname);
  7.     // 加载当前模块
  8.     tryModuleLoad(module);
  9.     // 返回exports对象
  10.     return module.exports;
  11. }
复制代码
Module的实现很简朴,就是给模块创建一个exports对象,tryModuleLoad实行的时候将内容参加到exports中,id就是模块的绝对路径。
  1. // 定义模块, 添加文件id标识和exports属性
  2. function Module(id) {
  3.     this.id = id;
  4.     // 读取到的文件内容会放在exports中
  5.     this.exports = {};
  6. }
复制代码
之前我们说过node模块是运行在一个函数中,这里我们给Module挂载静态属性wrapper,内里界说一下这个函数的字符串,wrapper是一个数组,数组的第一个元素就是函数的参数部门,此中有exports,module. Require,__dirname, __filename, 都是我们模块中常用的全局变量。留意这里传入的Require参数是我们本身界说的Require。
第二个参数就是函数的结束部门。两部门都是字符串,使用的时候我们将他们包裹在模块的字符串外部就可以了。
  1. Module.wrapper = [
  2.     "(function(exports, module, Require, __dirname, __filename) {",
  3.     "})"
  4. ]
复制代码
_extensions用于针对不同的模块扩展名使用不同的加载方式,比如JSON和javascript加载方式肯定是不同的。JSON使用JSON.parse来运行。
javascript使用vm.runInThisContext来运行,可以看到fs.readFileSync传入的是module.id也就是我们Module界说时候id存储的是模块的绝对路径,读取到的content是一个字符串,我们使用Module.wrapper来包裹一下就相称于在这个模块外部又包裹了一个函数,也就实现了私有作用域。
使用call来实行fn函数,第一个参数改变运行的this我们传入module.exports,反面的参数就是函数外面包裹参数exports, module, Require, __dirname, __filename
  1. Module._extensions = {
  2.     '.js'(module) {
  3.         const content = fs.readFileSync(module.id, 'utf8');
  4.         const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
  5.         const fn = vm.runInThisContext(fnStr);
  6.         fn.call(module.exports, module.exports, module, Require,_filename,_dirname);
  7.     },
  8.     '.json'(module) {
  9.         const json = fs.readFileSync(module.id, 'utf8');
  10.         module.exports = JSON.parse(json); // 把文件的结果放在exports属性上
  11.     }
  12. }
复制代码
tryModuleLoad函数接收的是模块对象,通过path.extname来获取模块的后缀名,然后使用Module._extensions来加载模块。
  1. // 定义模块加载方法
  2. function tryModuleLoad(module) {
  3.     // 获取扩展名
  4.     const extension = path.extname(module.id);
  5.     // 通过后缀加载当前模块
  6.     Module._extensions[extension](module);
  7. }
复制代码
至此Require加载机制我们基本就写完了,我们来重新看一下。Require加载模块的时候传入模块名称,在Require方法中使用path.resolve(__dirname, modulePath)获取到文件的绝对路径。然后通过new Module实例化的方式创建module对象,将模块的绝对路径存储在module的id属性中,在module中创建exports属性为一个json对象。
使用tryModuleLoad方法去加载模块,tryModuleLoad中使用path.extname获取到文件的扩展名,然后根据扩展名来实行对应的模块加载机制。
终极将加载到的模块挂载module.exports中。tryModuleLoad实行完毕之后module.exports已经存在了,直接返回就可以了。
  1. // 导入依靠const path = require('path'); // 路径利用const fs = require('fs'); // 文件读取const vm = require('vm'); // 文件实行// 定义导入类,参数为模块路径
  2. function Require(modulePath) {
  3.     // 获取当前要加载的绝对路径
  4.     let absPathname = path.resolve(__dirname, modulePath);
  5.     // 创建模块,新建Module实例
  6.     const module = new Module(absPathname);
  7.     // 加载当前模块
  8.     tryModuleLoad(module);
  9.     // 返回exports对象
  10.     return module.exports;
  11. }// 定义模块, 添加文件id标识和exports属性
  12. function Module(id) {
  13.     this.id = id;
  14.     // 读取到的文件内容会放在exports中
  15.     this.exports = {};
  16. }// 界说包裹模块内容的函数Module.wrapper = [
  17.     "(function(exports, module, Require, __dirname, __filename) {",
  18.     "})"
  19. ]// 界说扩展名,不同的扩展名,加载方式不同,实现js和jsonModule._extensions = {
  20.     '.js'(module) {
  21.         const content = fs.readFileSync(module.id, 'utf8');
  22.         const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
  23.         const fn = vm.runInThisContext(fnStr);
  24.         fn.call(module.exports, module.exports, module, Require,_filename,_dirname);
  25.     },
  26.     '.json'(module) {
  27.         const json = fs.readFileSync(module.id, 'utf8');
  28.         module.exports = JSON.parse(json); // 把文件的结果放在exports属性上
  29.     }
  30. }// 定义模块加载方法
  31. function tryModuleLoad(module) {
  32.     // 获取扩展名
  33.     const extension = path.extname(module.id);
  34.     // 通过后缀加载当前模块
  35.     Module._extensions[extension](module);
  36. }
复制代码
5.给模块添加缓存


添加缓存也比力简朴,就是文件加载的时候将文件放入缓存在,再去加载模块时先看缓存中是否存在,如果存在直接使用,如果不存在再去重新嘉爱,加载之后再放入缓存。
  1. // 定义导入类,参数为模块路径
  2. function Require(modulePath) {
  3.     // 获取当前要加载的绝对路径
  4.     let absPathname = path.resolve(__dirname, modulePath);
  5.     // 从缓存中读取,如果存在,直接返回结果
  6.     if (Module._cache[absPathname]) {
  7.         return Module._cache[absPathname].exports;
  8.     }
  9.     // 尝试加载当前模块
  10.     tryModuleLoad(module);
  11.     // 创建模块,新建Module实例
  12.     const module = new Module(absPathname);
  13.     // 添加缓存
  14.     Module._cache[absPathname] = module;
  15.     // 加载当前模块
  16.     tryModuleLoad(module);
  17.     // 返回exports对象
  18.     return module.exports;
  19. }
复制代码
6.自动补全路径


自动给模块添加后缀名,实现省略后缀名加载模块,着实也就是如果文件没有后缀名的时候遍历一下全部的后缀名看一下文件是否存在。
  1. // 定义导入类,参数为模块路径
  2. function Require(modulePath) {
  3.     // 获取当前要加载的绝对路径
  4.     let absPathname = path.resolve(__dirname, modulePath);
  5.     // 获取所有后缀名
  6.     const extNames = Object.keys(Module._extensions);
  7.     let index = 0;
  8.     // 存储原始文件路径
  9.     const oldPath = absPathname;
  10.     function findExt(absPathname) {
  11.         if (index === extNames.length) {
  12.            return throw new Error('文件不存在');
  13.         }
  14.         try {
  15.             fs.accessSync(absPathname);
  16.             return absPathname;
  17.         } catch(e) {
  18.             const ext = extNames[index++];
  19.             findExt(oldPath + ext);
  20.         }
  21.     }
  22.     // 递归追加后缀名,判断文件是否存在
  23.     absPathname = findExt(absPathname);
  24.     // 从缓存中读取,如果存在,直接返回结果
  25.     if (Module._cache[absPathname]) {
  26.         return Module._cache[absPathname].exports;
  27.     }
  28.     // 尝试加载当前模块
  29.     tryModuleLoad(module);
  30.     // 创建模块,新建Module实例
  31.     const module = new Module(absPathname);
  32.     // 添加缓存
  33.     Module._cache[absPathname] = module;
  34.     // 加载当前模块
  35.     tryModuleLoad(module);
  36.     // 返回exports对象
  37.     return module.exports;
  38. }
复制代码
7.分析实现步调

1.导入相关模块,创建一个Require方法。
2.抽离通过Module._load方法,用于加载模块。
3.Module.resolveFilename 根据相对路径,转换成绝对路径。
4.缓存模块 Module._cache,同一个模块不要重复加载,提升性能。
5.创建模块 id: 保存的内容是 exports = {}相称于this。
6.利用tryModuleLoad(module, filename) 实验加载模块。
7.Module._extensions使用读取文件。
8.Module.wrap: 把读取到的js包裹一个函数。
9.将拿到的字符串使用runInThisContext运行字符串。
10.让字符串实行并将this改编成exports。
总结

到此这篇关于require加载器实现原理的文章就介绍到这了,更多相关require加载器原理内容请搜刮草根技术分享从前的文章或继续浏览下面的相关文章希望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作