webpack 里的 import, exports 实现原理

Posted 2020-11-10 kuku

在使用 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‘);