繞過捆綁程序對 require 語句的偵測

在本文中，我們分析了 React 原始程式碼如何繞過捆綁器對 require 語句的偵測。

透過將字串「require」與隨機數（Math.random()）連接起來，程式碼會產生一個看起來像「require」的字串，但在靜態分析期間捆綁器無法直接識別。然後對字串進行切片以獲取前7 個字符，確保結果始終為“require”（因為“require”Math.random() 將產生類似“require0.123456”的結果，該結果被切片為“require”） .

所有這些麻煩都是為了呼叫 Node 環境中可用的名為 setImmediate 的 MacroTask。

立即設定

當你想要非同步執行某段程式碼時，

但盡快，一種選擇是使用 Node.js 提供的 setImmediate() 函數：

setImmediate(() => {
 // run something
});

作為 setImmediate() 參數傳遞的任何函數都是在事件循環的下一個迭代中執行的回調。

在 Nodejs 文件中了解有關 setImmediate 的更多資訊。

為什麼要避免捆綁器偵測 require？

瀏覽器環境不需要 Node.js 模組：

React 需要區分 Node.js 環境（使用 setImmediate）和瀏覽器環境（使用 MessageChannel）。如果捆綁器偵測到 require，它可能會自動在瀏覽器捆綁包中包含 Node.js polyfill，這是不必要的，並且會使程式碼變得臃腫。

避免意外包含 Polyfill：

Bundlers，如 Webpack，通常在偵測到需要時包含 Node.js API 的 polyfill。這對於像 React 這樣的輕量級程式庫來說是有問題的，因為這樣的 polyfill 是不必要的，並且可能會幹擾 React 自己處理環境的邏輯（瀏覽器與 Node.js）。

這個 enqueueTask 是 ReactAct.js 中使用的後備方法

// $FlowFixMe[invalid-computed-prop]
const nodeRequire = module && module[requireString];
// assuming we're in node, let's try to get node's
// version of setImmediate, bypassing fake timers if any.
enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;

timers 是 Node.js 中的核心模組。它提供了一組計時器函數，可用於安排程式碼在特定時間間隔或延遲後執行。這些函數與

中的全域定時器函數類似 JavaScript（如 setTimeout 和 setInterval），但它們作為計時器模組的一部分提供，以實現額外的控制和精度。

<p>nodeRequire.call(module, 'timers')</p>

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過 hello@thinkthroo.com 與我們聯繫以了解更多資訊！

參考資料：

1. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L23

2. https://nodejs.org/en/learn/asynchronous-work/understanding-setimmediate

3. https://nodejs.org/api/timers.html#setimmediatecallback-args

以上是繞過捆綁程序對 require 語句的偵測的詳細內容。更多資訊請關注PHP中文網其他相關文章！