webpack 里的 import, exports 实现原理
在使用 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');