webpack 里的 import, exports 实现原理

迈不过友情╰ 2021-10-18 05:44 362阅读 0赞

在使用 webpack 对脚本进行打包， 在开发中， 每个文件中都会使用 import 语句来导入一些功能，又会使用 export 语句导出一些功能，为了研究 import 和 export 原理，研究了 webpack 打包后的代码，其实原理也是非常简单：

webpack 对所有输入文件都打包到一个文件中：

在最终的输出文件中，webpack 会定义一个 Object 对象，这个对象中放入了所有的输入文件的内容， 以文件名为 key, 文件内容（字符串）作为值，如：

var modules= \{\};

modules\['index'\] = "源代码";

modules\['hello'\] = '源代码';

当然，webpack 会对源代码进行一定的修改, 会把 export 语句修改为 exports.变量 = 值， 这种方法， exports 是一个参数， 大概是这样子的：

modules\['index'\] = (function(exports) \{

// 代码，放在一个私有域中。

// 通过 exports 对象，把需要公开的变量，函数，类公开出去。

exports.xx = xxx;

\});

这就大概是一个源文件最终的结果，变成了一个函数，那么这个 exports 到底是个什么对象？其实 exports 就是一个 Object 对象，里面没有任何其实内容，全部是函数中设置的内容，作用只是把对象传递到 import 语句：

先来看看 import 的语法： import xxx from 'filename'

import 语句， 最终大概会变成这样：

var cmp1 = require('filename');

require 函数大概的实现：

function require(id) \{

if(installedModules\[id\]) \{

return installedModules\[id\].exports; // 返回 exports 对象

\}

var module = installedModules\[id\] = \{

i: moduleId,

l: false,

exports: \{\} // 定义 exports 对象

\};

modules\[id\](module.exports); // 把 exports 参数传递到函数中

return module.exports; // 最后返回

\}

不管 import xxx 语句中的 xxx 怎么设置， 最终都会变成一个变量，引用模块的 exports 对象，然后通过这个变量来访问变量，函数等：

import \{ a, b \} from 'filename'

console.log(a);

console.log(b);

最终编译的结果：

var cmp1 = require('filename');

console.log(cmp1.a);

console.log(cmp1.b);

最后， 文件传统执行入口文件的代码 require('index');

转载于:https://www.cnblogs.com/kuku/p/11247316.html

发表评论取消回复

表情：

评论列表（有 0 条评论，362人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack中imports-loader,exports-loader,expose-loader的区别

Webpack有几个和模块化相关的loader，`imports-loader`,`exports-loader`,`expose-loader`，比较容易混淆。今天，我们来理

悠悠/ 2023年06月30日 08:59/ 0 赞/ 44 阅读

相关 webpack让node.js支持import/export写法

import { EventEmitter } from 'events'; //const EventEmitter = require('events');

女爷i/ 2023年06月05日 08:14/ 0 赞/ 181 阅读

相关 JavaScript 中的 require / exports 和 import / export

Node.js 的基础教学之 exports 和 module.exports：[https://zhuanlan.zhihu.com/p/82057593][http

比眉伴天荒/ 2023年01月20日 15:58/ 0 赞/ 233 阅读

相关 Vue使用export、export default和import说明

Vue使用export、export default和import说明示例1 export default

你的名字/ 2022年11月27日 03:13/ 0 赞/ 261 阅读

相关 TypeScript 中的 export 和 import

文章目录一、TypeScript 中的 export 1. export 2. import 工作实际案例举例

叁歲伎倆/ 2022年11月16日 04:58/ 0 赞/ 233 阅读

相关 import require module.exports export....

import require module.exports export… index.vue <script> import data from "./d

布满荆棘的人生/ 2022年10月17日 01:35/ 0 赞/ 235 阅读

相关 export ,export default 和 import 浅解

export和import（一个导出一个导入） ES6模块主要有两个功能：export和import export用于对外输出本模块（一个文件可以理解为一个模块）变量

系统管理员/ 2022年05月22日 03:45/ 0 赞/ 311 阅读

相关 module.exports---require案例export--import案例

module.exports---require案例 //config.js module.exports = { userName:'

朴灿烈づ我的快乐病毒、/ 2022年04月03日 05:10/ 0 赞/ 253 阅读

相关 export，import ，export default

a.js export var name="李四"; 或者： a.js var name1="李四"; var name2="张三";

╰+攻爆jí腚メ/ 2021年12月20日 15:55/ 0 赞/ 407 阅读

相关 webpack 里的 import, exports 实现原理

在使用 webpack 对脚本进行打包，在开发中，每个文件中都会使用 import 语句来导入一些功能，又会使用 export 语句导出一些功能，为了研究 import 和

迈不过友情╰/ 2021年10月18日 05:44/ 0 赞/ 363 阅读