Node 中如何引入一個模組及其細節

shanyue發表於2020-07-22

本文收錄於 GitHub 山月行部落格: shfshanyue/blog，內含我在實際工作中碰到的問題、關於業務的思考及在全棧方向上的學習

在 node 環境中，有兩個內建的全域性變數無需引入即可直接使用，並且無處不見，它們構成了 nodejs 的模組體系: module 與 require。以下是一個簡單的示例

const fs = require('fs')

const add = (x, y) => x + y

module.exports = add

雖然它們在平常使用中僅僅是引入與匯出模組，但稍稍深入，便可見乾坤之大。在業界可用它們做一些比較 trick 的事情，雖然我不大建議使用這些黑科技，但稍微瞭解還是很有必要。

  1. 如何在不重啟應用時熱載入模組？如 require 一個 json 檔案時會產生快取，但是重寫檔案時如何 watch
  2. 如何通過不侵入程式碼進行列印日誌
  3. 迴圈引用會產生什麼問題？

module wrapper

當我們使用 node 中寫一個模組時，實際上該模組被一個函式包裹，如下所示:

(function(exports, require, module, __filename, __dirname) {
  // 所有的模組程式碼都被包裹在這個函式中
  const fs = require('fs')

  const add = (x, y) => x + y

  module.exports = add
});

因此在一個模組中自動會注入以下變數：

  • exports
  • require
  • module
  • __filename
  • __dirname

module

除錯最好的辦法就是列印，我們想知道 module 是何方神聖，那就把它列印出來！

const fs = require('fs')

const add = (x, y) => x + y

module.exports = add

console.log(module)

  • module.id: 如果是 . 代表是入口模組，否則是模組所在的檔名，可見如下的 koa
  • module.exports: 模組的匯出

koa module

module.exports 與 exports

module.exports 與 exports 有什麼關係？

從以下原始碼中可以看到 module wrapper 的呼叫方 module._compile 是如何注入內建變數的，因此根據原始碼很容易理解一個模組中的變數：

  • exports: 實際上是 module.exports 的引用
  • require: 大多情況下是 Module.prototype.require
  • module
  • __filename
  • __dirname: path.dirname(__filename) 
// <node_internals>/internal/modules/cjs/loader.js:1138

Module.prototype._compile = function(content, filename) {
  // ...
  const dirname = path.dirname(filename);
  const require = makeRequireFunction(this, redirects);
  let result;

  // 從中可以看出：exports = module.exports
  const exports = this.exports;
  const thisValue = exports;
  const module = this;
  if (requireDepth === 0) statCache = new Map();
  if (inspectorWrapper) {
    result = inspectorWrapper(compiledWrapper, thisValue, exports,
                              require, module, filename, dirname);
  } else {
    result = compiledWrapper.call(thisValue, exports, require, module,
                                  filename, dirname);
  }
  // ...
}

require

通過 node 的 REPL 控制檯，或者在 VSCode 中輸出 require 進行除錯，可以發現 require 是一個極其複雜的物件

require

從以上 module wrapper 的原始碼中也可以看出 require 由 makeRequireFunction 函式生成，如下

// <node_internals>/internal/modules/cjs/helpers.js:33

function makeRequireFunction(mod, redirects) {
  const Module = mod.constructor;

  let require;
  if (redirects) {
    // ...
  } else {
    // require 實際上是 Module.prototype.require
    require = function require(path) {
      return mod.require(path);
    };
  }

  function resolve(request, options) { // ... }

  require.resolve = resolve;

  function paths(request) {
    validateString(request, 'request');
    return Module._resolveLookupPaths(request, mod);
  }

  resolve.paths = paths;

  require.main = process.mainModule;

  // Enable support to add extra extension types.
  require.extensions = Module._extensions;

  require.cache = Module._cache;

  return require;
}
關於 require 更詳細的資訊可以去參考官方文件: Node API: require

require(id)

require 函式被用作引入一個模組，也是平常最常見最常用到的函式

// <node_internals>/internal/modules/cjs/loader.js:1019

Module.prototype.require = function(id) {
  validateString(id, 'id');
  if (id === '') {
    throw new ERR_INVALID_ARG_VALUE('id', id,
                                    'must be a non-empty string');
  }
  requireDepth++;
  try {
    return Module._load(id, this, /* isMain */ false);
  } finally {
    requireDepth--;
  }
}

而 require 引入一個模組時，實際上通過 Module._load 載入，大致的總結如下：

  1. 如果 Module._cache 命中模組快取，則直接取出 module.exports，載入結束
  2. 如果是 NativeModule，則 loadNativeModule 載入模組，如 fs、http、path 等模組，載入結束
  3. 否則，使用 Module.load 載入模組，當然這個步驟也很長，下一章節再細講
// <node_internals>/internal/modules/cjs/loader.js:879

Module._load = function(request, parent, isMain) {
  let relResolveCacheIdentifier;
  if (parent) {
    // ...
  }

  const filename = Module._resolveFilename(request, parent, isMain);

  const cachedModule = Module._cache[filename];

  // 如果命中快取，直接取快取
  if (cachedModule !== undefined) {
    updateChildren(parent, cachedModule, true);
    return cachedModule.exports;
  }

  // 如果是 NativeModule，載入它
  const mod = loadNativeModule(filename, request);
  if (mod && mod.canBeRequiredByUsers) return mod.exports;

  // Don't call updateChildren(), Module constructor already does.
  const module = new Module(filename, parent);

  if (isMain) {
    process.mainModule = module;
    module.id = '.';
  }

  Module._cache[filename] = module;
  if (parent !== undefined) { // ... }

  let threw = true;
  try {
    if (enableSourceMaps) {
      try {
        // 如果不是 NativeModule，載入它
        module.load(filename);
      } catch (err) {
        rekeySourceMap(Module._cache[filename], err);
        throw err; /* node-do-not-add-exception-line */
      }
    } else {
      module.load(filename);
    }
    threw = false;
  } finally {
    // ...
  }

  return module.exports;
};

require.cache

當程式碼執行 require(lib) 時，會執行 lib 模組中的內容，並作為一份快取，下次引用時不再執行模組中內容。

這裡的快取指的就是 require.cache，也就是上一段指的 Module._cache

// <node_internals>/internal/modules/cjs/loader.js:899

require.cache = Module._cache;

這裡有個小測試:

有兩個檔案: index.js 與 utils.js。utils.js 中有一個列印操作，當 index.js 引用 utils.js 多次時，utils.js 中的列印操作會執行幾次。程式碼示例如下

index.js

// index.js

// 此處引用兩次
require('./utils')
require('./utils')

utils.js

// utils.js
console.log('被執行了一次')

答案是隻執行了一次，因此 require.cache，在 index.js 末尾列印 require，此時會發現一個模組快取

// index.js

require('./utils')
require('./utils')

console.log(require)

那回到本章剛開始的問題：

如何不重啟應用熱載入模組呢？

答：刪掉 Module._cache，但同時會引發問題，如這種 一行 delete require.cache 引發的記憶體洩漏血案

所以說嘛，這種黑魔法大幅修改核心程式碼的東西開發環境玩一玩就可以了，千萬不要跑到生產環境中去，畢竟黑魔法是不可控的。

總結

  1. 模組中執行時會被 module wrapper 包裹，並注入全域性變數 require 及 module 等
  2. module.exports 與 exports 的關係實際上是 exports = module.exports
  3. require 實際上是 module.require
  4. require.cache 會保證模組不會被執行多次
  5. 不要使用 delete require.cache 這種黑魔法

關注我

本文收錄於 GitHub 山月行部落格: shfshanyue/blog，內含我在實際工作中碰到的問題、關於業務的思考及在全棧方向上的學習

歡迎關注公眾號【全棧成長之路】，定時推送 Node 原創及全棧成長文章

<figure>
<img width="240" src="https://shanyue.tech/qrcode.jpg" alt="歡迎關注">
<figcaption>歡迎關注全棧成長之路</figcaption>
</figure>

相關文章