CommonJs模块化实现原理&ES Module模块化原理
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