突然想看CJS的导入导出源代码了

目前为止,前端的模块化方案基本趋于2类,一类是CommonJs,一类是ESModule。当然,我见过的厂,也有些使用AMD规范的。

CommonJs的导入导出语法如下:

node 复制代码
let a = require('./a.js');

module.exports = {
    add: function(){}
}

ESModule的导入导出语法如下:

javascript 复制代码
import a from './a.js';

export ...

export default ...;

但是今天突然心血来潮,我想看一下require是如何实现的,所以我就随便建了个工程,然后打了包。

工程目录如下:

javascript 复制代码
| - moduleProject
    | - index.js
    | - module1.js
    | - module2.js
    | - module11.js

这4个文件的关系如下:

1、index文件依赖 module1、module2文件。

2、module1、module2文件都依赖module11文件。

module11.js文件内容如下:

javascript 复制代码
// module11.js文件内容如下
module.exports = {
    add11: function(a, b){
        return a + b;
    }
}

module1.js文件内容如下:

javascript 复制代码
// module1.js文件内容如下:
let a1 = require('./module11.js');

module.exports = {
    add1: function(a, b){
        return a + b;
    }
}

module2.js文件内容如下:

javascript 复制代码
// module2.js文件内容如下:
let a2 = require('./module11.js');

module.exports = {
    add2: function(a, b){
        return a + b;
    }
}

index.js文件内容如下:

javascript 复制代码
let obj1 = require('./module1');
let obj2 = require('./module2');

console.log(obj1.add1(1, 2));

然后我们将整个工程打包一下,此时省略打包配置,打包后的文件如下:

从上图中我们可以看到啊,首先它会将入口文件的依赖项配置成一个大的对象,key就是你引入的文件名,value就是每个文件的内容。

然后入口index文件在执行过程中如果使用了某个依赖方法,那就会去全局对象里get对应的 moduleId,以此来完成相应操作,所以commonjs默认它做不了tree shaking。因为整个过程就好比你定义了一个对象,这个对象在打包后的文件里确确实实存在,对象里有个a属性,但是这个a属性你并没有用到,那你认为这个a属性会凭空消失吗?那肯定不会啊。

这里还有个说法叫做"编译阶段",这个编译阶段说白了就是"编译后文件",只是听起来高大尚一点。

这个require函数也是相当简单,源码如下:

javascript 复制代码
// 1、先声明一个全局对象
let _webpack_module_cache_ = {};

function require(moduleId){
    // 2、看看当前依赖项之前是否被导入过,如果被导入过,就直接返回之前导入的结果。
    let cacheModule = _webpack_module_cache_[moduleId];
    if (cacheModule !== undefined){
        return cacheModule;
    }
    // 3、对当前模块进行初始化,并且将它放入到缓存里
    let module = _webpack_module_cache_[module] = {
        exports: {}
    }
    // 4、执行当前引入的模块
    _webpack_module[moduleId](module, module.exports, require);
    // 5、返回当前模块导出的对象
    return module.exports;
}

好啦,本期文章到这里就结束啦,如果这篇文章能够帮助到你,欢迎给个红心一键三连,我们下期再见啦,拜拜~~

相关推荐
前端小万2 分钟前
一次紧急的现场性能问题排查
前端·性能优化
excel18 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手19 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360221 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep21 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo23 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒43 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用1 小时前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc