Procházet zdrojové kódy

feat: 添加模块管理的小 tip

NiceTry12138 před 11 měsíci
rodič
revize
c3cbffb62e
1 změnil soubory, kde provedl 21 přidání a 2 odebrání
  1. 21 2
      前端/Webpack/README.md

+ 21 - 2
前端/Webpack/README.md

@@ -1372,6 +1372,14 @@ module.exports = { today }
 
 那么 `const data1 = __webpack_require__("./src/util/data.js");` 直接就获取到了 `data.js` 导出的内容并存储到 `data1` 对象中,后续可以直接通过 `data1.today()` 来执行导出的函数
 
+```js
+module = {
+    exports: {
+        today: `data.js`.today
+    }
+}
+```
+
 接下来从相对复杂的 `add.js` 开始
 
 对于 `add.js` 来说,执行 `__webpack_modules__[moduleId](module, module.exports, __webpack_require__)` 函数是一一对应的
@@ -1380,11 +1388,22 @@ module.exports = { today }
 
 然后通过 `__webpack_require__.d` 将 `{ add: () => add }` 绑定到 `module.exports` 对象上
 
-代码执行到这, `module.export` 上添加了一个名为 `add` 的函数,该函数会转去执行真正的 `add` 函数
+代码执行到这, `module.exports` 上添加了一个名为 `add` 的函数,该函数会转去执行真正的 `add` 函数
 
 > 这里 `module.exports` 对象的 `add` 函数并不是 `add.js` 中定义的 `add` 函数
 > `module.exports` 对象的 `add` 函数中执行的 `add` 函数才是 `add.js` 中定义的 `add` 函数
 
+```js
+module = {
+    exports: {
+        add: (a, b) => { `add.js`.add(a, b) } 
+    }
+}
+```
+
+> **注意**,要理解这里 `exports.add` 和 `exports.data` 两个函数有本质区别,可以说 `exports.data` 等于 `data.js` 中定义的 `function data`,但是 `exports.add` 不等于 `add.js` 中定义的 `function add`
+
 -----------------------------
 
-说白了就是 `Webpack` 写了一套自己的模块管理,通过上述代码,以此来兼容 `ESModule` 和 `CommonJS`
+说白了就是 `Webpack` 写了一套自己的模块管理,通过上述代码,来兼容 `ESModule` 和 `CommonJS` 不同的导入导出
+