CommonJs模块化实现原理&ES Module模块化原理

已于 2023-12-12 11:24:11 修改
阅读量412 收藏 3
点赞数 3
文章标签： webpack javascript
于 2023-12-11 17:30:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35385241/article/details/134920319
版权

CommonJs模块化实现原理

首先看一个案例
初始化项目

npm init
npm i webpack -D

目录结构如下：

在这里插入图片描述
webpack.config.js

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  devtool: "source-map"
};

src/index.js

const b = require("./b");
const a = require("./a");
console.log(a, b)

src/a.js

let a = "这是a"
module.exports = a;

src/b.js

let b = "这是b"
module.exports = b;

build.js

const { webpack } = require("webpack");
const webpackOptions = require("./webpack.config.js");

const compiler = webpack(webpackOptions);

compiler.run((err, stats) => {
  console.log(err)
});

进行node ./build.js后查看dist文件下

(() => { 
  var __webpack_modules__ = ({
    "./src/a.js": ((module) => {
        let a = "这是a"
        module.exports = a;
      }),

    "./src/b.js":
      ((module) => {
        let b = '这是b'
        module.exports = b;
      })

    });
 	// The module cache
 	var __webpack_module_cache__ = {};
 	
 	// The require function
 	function __webpack_require__(moduleId) {
 		// Check if module is in cache
 		var cachedModule = __webpack_module_cache__[moduleId];
 		if (cachedModule !== undefined) {
 			return cachedModule.exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = __webpack_module_cache__[moduleId] = {
 			// no module.id needed
 			// no module.loaded needed
 			exports: {}
 		};
 	
 		// Execute the module function
 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 	
 		// Return the exports of the module
 		return module.exports;
 	}
 	

     var __webpack_exports__ = {};
 	 (() => {
   		 const b = __webpack_require__("./src/b.js");
   		 const a = __webpack_require__("./src/a.js");

    	console.log(a, b);
  	 })();

 })()
;
//# sourceMappingURL=main.js.map

分析一下打包产物

首先看下 webpack_modules，我们在src/index.js中引入了a.js、b.js, webpack会把’src/a.js’、‘src/b.js’作为modules的key值，该模块内容作为modules的value值；

 var __webpack_modules__ = ({
    "./src/a.js": ((module) => {
        let a = "这是a"
        module.exports = a;
      }),

    "./src/b.js":
      ((module) => {
        let b = '这是b'
        module.exports = b;
      })

 });

定义 __webpack_require__函数

	var __webpack_module_cache__ = {};
	function __webpack_require__(moduleId) {
		// 判断一下缓存中有没有当前module
		var cachedModule = __webpack_module_cache__[moduleId];
		if (cachedModule !== undefined) {
			// 缓存中有的话走缓存,返回cachedModule.exports
			return cachedModule.exports;
		}
		// 缓存中没有就重新创建一个moudle，设置export对象，并放入缓存
		var module = __webpack_module_cache__[moduleId] = {
			exports: {}
		};
 	
 		// 执行模块代码, 传入当前module，根据需要传入module.exports, __webpack_require__，module.exports会在模块中赋值
 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 	
 		// 返回module.exports
 		return module.exports;
 	}

执行入口函数，为防止命名污染，封装成立即执行函数。

 (() => {
   		 const b = __webpack_require__("./src/b.js");
   		 const a = __webpack_require__("./src/a.js");

    	console.log(a, b);
  })();

ES Module模块化原理

src/index.js

import a from './a'
import {b} from './b'
console.log(a, b);

src/a.js

const a = "这是a"
export default a

src/b.js

export const b = '这是b'

node ./build.js 之后main.js如下：

 (() => { 
 	"use strict";
 	var __webpack_modules__ = ({

    "./src/a.js":
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
         "default": () => (__WEBPACK_DEFAULT_EXPORT__)
      });
      const a = "这是a"
      const __WEBPACK_DEFAULT_EXPORT__ = (a);
    }),

    "./src/b.js":
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        b: () => (b)
      });
      const b = '这是b'
    })

  });
 	
 var __webpack_module_cache__ = {};
 	
 function __webpack_require__(moduleId) {
 	var cachedModule = __webpack_module_cache__[moduleId];
 	if (cachedModule !== undefined) {
 		return cachedModule.exports;
 	}
 	var module = __webpack_module_cache__[moduleId] = {
 		exports: {}
 	};
 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 		return module.exports;
 	}
 	
 (() => {
 	__webpack_require__.d = (exports, definition) => {
 		for(var key in definition) {
 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 			}
 		}
 	};
 })();
 	
 (() => {
 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 })();
 	
 (() => {
 	__webpack_require__.r = (exports) => {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};
 })();
 	
 var __webpack_exports__ = {};
 (() => {
    __webpack_require__.r(__webpack_exports__);
    var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/a.js");
    var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./src/b.js");


    console.log(_a__WEBPACK_IMPORTED_MODULE_0__["default"], _b__WEBPACK_IMPORTED_MODULE_1__.b);
  })();

})()
;
//# sourceMappingURL=main.js.map

如果是通过export default 方式导出的，那就在 exports 对象加一个 default 属性

var __webpack_modules__ = ({

    "./src/a.js":
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
	// 在 ESM 模式下声明 ESM 模块标识
      __webpack_require__.r(__webpack_exports__);
      // 将模块导出的内容附加的模块对象上,如果是通过export default导出，给exports的对象加default属性
      __webpack_require__.d(__webpack_exports__, {
         "default": () => (__WEBPACK_DEFAULT_EXPORT__)
      });
      const a = "这是a"
      const __WEBPACK_DEFAULT_EXPORT__ = (a);
    }),

    "./src/b.js":
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        b: () => (b)
      });
      const b = '这是b'
    })

  });

通过__webpack_require__.r把模块标识为 ES Module
了解Symbol.toStringTag

(() => {
 	__webpack_require__.r = (exports) => {
 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		Object.defineProperty(exports, '__esModule', { value: true });
 	};
 })();

通过__webpack_require__.d对exports做代理

(() => {
 	__webpack_require__.d = (exports, definition) => {
 		for(var key in definition) {
 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 			}
 		}
 	};
 })();
(() => {
 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 })();

ES Module加载CommonJS实现原理
src/index.js

import b from './b'
console.log(b);

src/b.js

let b = '这是b'
module.exports = b;

node ./build.js之后

 (() => { 
 	var __webpack_modules__ = ({
    "./src/b.js": ((module) => {
      let b = '这是b'
      module.exports = b;
    })
 	});

 	var __webpack_module_cache__ = {};
 	
 	function __webpack_require__(moduleId) {
 		var cachedModule = __webpack_module_cache__[moduleId];
 		if (cachedModule !== undefined) {
 			return cachedModule.exports;
 		}
 		var module = __webpack_module_cache__[moduleId] = {
 			exports: {}
 		};
 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 	
 		return module.exports;
 	}

 	(() => {
 		__webpack_require__.n = (module) => {
 			var getter = module && module.__esModule ?
 				() => (module['default']) :
 				() => (module);
 			__webpack_require__.d(getter, { a: getter });
 			return getter;
 		};
 	})();
 	
 	(() => {
 		__webpack_require__.d = (exports, definition) => {
 			for(var key in definition) {
 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 				}
 			}
 		};
 	})();
 	
 	(() => {
 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 	})();
 	
 	(() => {
 		__webpack_require__.r = (exports) => {
 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			}
 			Object.defineProperty(exports, '__esModule', { value: true });
 		};
 	})();
 	
  var __webpack_exports__ = {};
  (() => {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/b.js");
    var _b__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_b__WEBPACK_IMPORTED_MODULE_0__);

    console.log((_b__WEBPACK_IMPORTED_MODULE_0___default()));
  })();

 })()
;
//# sourceMappingURL=main.js.map

由此可以看出加了这一个步骤：
通过__webpack_require__.n判断模块是否是esModule返回module

	(() => {
 		__webpack_require__.n = (module) => {
 			var getter = module && module.__esModule ?
 				() => (module['default']) :
 				() => (module);
 			__webpack_require__.d(getter, { a: getter });
 			return getter;
 		};
 	})();

CommonJS加载ES Module的实现原理

src/index.js

const b = require('./b.js')
console.log(b);

src/b.js

let b = '这是b'
export default b;

node ./build.js之后

 (() => {
 	var __webpack_modules__ = ({
    "./src/b.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
      "use strict";
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        "default": () => (__WEBPACK_DEFAULT_EXPORT__)
      });
      let b = '这是b'
      const __WEBPACK_DEFAULT_EXPORT__ = (b);
    })

 	});

 	var __webpack_module_cache__ = {};
 	
 	function __webpack_require__(moduleId) {
 		var cachedModule = __webpack_module_cache__[moduleId];
 		if (cachedModule !== undefined) {
 			return cachedModule.exports;
 		}
 		var module = __webpack_module_cache__[moduleId] = {
 			exports: {}
 		};
 	
 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 	
 		return module.exports;
 	}

 	(() => {
 		__webpack_require__.d = (exports, definition) => {
 			for(var key in definition) {
 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 				}
 			}
 		};
 	})();
 	
 	(() => {
 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 	})();
 	
 	(() => {
 		__webpack_require__.r = (exports) => {
 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			}
 			Object.defineProperty(exports, '__esModule', { value: true });
 		};
 	})();
 	
  var __webpack_exports__ = {};
    (() => {

    const b = __webpack_require__(/*! ./b.js */ "./src/b.js")
    console.log(b);
  })();

 })()
;
//# sourceMappingURL=main.js.map
小蛮牧码者
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CommonJS模块化
林木木的博客
09-25 783
CommonJS规范规定，每个模块内部，module变量代表当前模块。 这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。 加载某个模块，其实是加载该模块的module.exports属性。
js模块化（CommonJS、ES6模块化规范）
qq_48617322的博客
09-15 793
js模块化（CommonJS、ES6模块化规范）
前端模块化（commonJs、ES Module）
最新发布
weijia_kmy的博客
05-18 1179
模块化开发是我们开发当中用于组织和管理代码的方法，它的目的是将复杂的应用程序去拆分为更小和更好管理的模块单元，从而提高代码的复用性和可维护性。在早期的前端开发中，javascript代码通常以脚本的形式直接嵌在html文件中，或者通过多个脚本文件呢去进行一个处置，那这种方式存在一些问题，比如全局命名冲突，代码复用困难，依赖关系难以管理等等，特别是在多人协作的场景下，这种情况尤为常见，直到模块化的出现才从根本上去解决这些问题，这也正是js为什么需要模块的原因。那js的模块化是什么？怎么用？
模块化（CommonJS、ES6中的模块化）
smx_123的博客
12-12 764
前端模块化，CommonJS与ES6模块化的使用与区别
模块化：CommonJS规范
席木木的博客
10-02 1911
CommonJS规范中，每一个JS文件都可以作为一个模块。模块的引入，主要区分两个环境：①服务器端环境（Node.js）使用CommonJS模块；【2】浏览器端环境，于CommonJS中存在require语法，浏览器无法识别，因此，CommonJS模块需要借助Browserify提前做编译打包处理之后才能使用。
JS模块化（一）：CommonJS
激洪的博客
04-18 1003
JS模块化之CommonJS
webpack是如何实现模块化加载的方法
01-19
webpack支持的模块规范有 AMD 、CommonJS、ES2015 import 等规范。不管何种规范大致可以分为同步加载和异步加载两种情况。本文将介绍webpack是如何实现模块管理和加载。 同步加载如下： import a from './a'; ...
【JavaScript源代码】无编译无服务器实现浏览器的CommonJS模块化.docx
12-29
无编译无服务器实现浏览器的CommonJS模块化是一种在浏览器环境中直接运行CommonJS规范的模块化方法，无需借助像Webpack或Rollup这样的打包工具。CommonJS是Node.js中广泛使用的模块化规范，允许通过`require()`函数...
详解webpack模块化管理和打包工具
11-27
总的来说，Webpack 是现代前端开发中不可或缺的工具，它通过模块化的思想和强大的配置能力，帮助开发者高效地管理和优化前端资源，实现代码的高效运行和部署。无论是小型项目还是大型复杂项目，Webpack 都能提供相应...
WM_04_模块化原理和source-map1
08-04
1. **CommonJS模块化**：这种模块化方式主要在Node.js环境中使用，通过`require`导入模块，`module.exports`或`exports`导出模块。其特点是同步加载，适用于服务器端环境，因为服务器端文件系统读取较快，不关心执行...
JavaScript 几种循环方式以及模块化的总结
10-14
JavaScript作为一门广泛使用的脚本语言，在处理数据和构建大型应用时，循环和模块化是两个至关重要的概念。循环用于遍历和操作数据，而模块化则有助于代码的组织和复用。下面将详细介绍JavaScript的几种循环方式和...
【前端模块化】JS模块化思想以及相关规范（CommonJS、ES module）
cannotbecounted的博客
06-29 1021
对前端模块化中的JS模块化以及相关规范进行简要介绍。
commonjs的模块原理及实现
白开水的博客
05-06 511
commonjs规范 每个js文件都是一个模块 模块的导出 module.exports 模块的导入require require的执行步骤 调用require时会内部调用Module._load方法； Module.resolveFilename 解析文件名，这一步会尝试给文件加上后缀； const filename = Module._resolveFilename(request, parent, isMain); 创建当前模块实例，new Module() => {id,ex
什么是commonJS模块以及使用方法
Huahua0323的博客
06-25 2290
在上面的例子中，`someFunction` 函数被定义为模块的一部分，并通过 `module.exports` 导出。每个模块都有自己的作用域，模块内部的变量和函数默认是私有的，不会污染全局命名空间。如果你想在浏览器或支持 ES 模块的环境中使用 `import` 和 `export` 语法，你可以使用构建工具（如 Babel、Webpack）将模块转换为符合 ES 模块规范的代码。通过 CommonJS 模块，你可以实现模块的定义、导出和加载，使代码可以更好地组织和复用。
【Nodejs】nodejs模块化规范：CommonJS
DomCode
07-24 340
nodejs模块化规范：CommonJS
简述JavaScript模块化编程（二）
weixin_30394669的博客
08-02 260
前置阅读：简述JavaScript模块化（一） 在前面一文中，我们对前端模块化所经历的三个阶段进行了了解： CommonJs,由于是同步的，所以主要应用于服务器端，以Node.js为代表。 AMD，异步模块定义，预加载，推荐依赖前置。以require.js为代表。 CMD，通用模块加载，懒加载，推荐依赖就近。以Sea.js为代表。 而在ES6已经大行其道的今天，ES...
模块化：CommonJS与ES Modules详解
weixin_43206959的博客
04-28 1517
模块化：CommonJS与ES Modules的区别
理解Webpack打包过程及模块化原理和source-map配置
在CommonJS模块化实现原理中，模块使用`module.exports`导出，使用`require`函数导入。通过这种方式，我们可以将模块的功能封装起来，并在其他模块中使用。这种模块化规范在Node.js中得到广泛应用。 而在ES Module...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值