commonjs
在webpack中既可以书写commonjs模块也可以书写es模块,而且不用考虑浏览器的兼容性问题,我们来分析一下原理。
首先搞清楚commonjs模块化的处理方式,简单配置一下webpack,写两个模块编译一下看一下:
webpack.config.js
module.exports = {
mode: "development",
devtool: "none"
}
index.js
const a = require('./a')
console.log(a)
a.js
const a = 'a';
module.exports = a;
编译结果
查看编译结果,可以发现webpack对于每个模块的做法类似于node,将每个模块放在一个函数环境中并向其中传入一些必要的参数。webpack将这些模块组成一个对象(属性名是模块路径(模块id),属性值为模块内容)传入一个立即执行函数,立即执行函数中定义了一个函数 __webpack_require__
类似node中的require
函数,实现了导入模块的作用。
打包结果中删去了一些注释和暂时用不要的代码,可以很明显的看出来实现commonjs模块化的关键就是这个 __webpack_require__
函数,通过传入模块id来得到模块的导出。
require 函数
__webpack_require__
函数的实现:
function __webpack_require__(moduleId) {
// Check if module is in cache
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {
}
};
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
如果熟悉node就很容易理解这个函数了:
- 首先查看这个模块是否已经被加载过,所以就需要一个全局变量
installedModules
用来记录所有被加载过模块的导出 - 没有加载过的模块就先构造一个
module
对象,关键是要有一个exports
属性 - 执行模块代码并返回模块导出值
最终的一步就是需要加载启动模块,也就是IIFE的最后一句:
return __webpack_require__("./src/index.js");
ES Module
es 模块化的处理方式是需要借助 __webpack_require__
实现的,首先看一些刚才被删除的代码:
-
__webpack_require__.r
该函数用于标识es模块的导出
// define __esModule on exports __webpack_require__.r = function (exports) { if (