バンドラーによる require ステートメントの検出をバイパスする

この記事では、React ソース コードがバンドラーによる require ステートメントの検出をどのようにバイパスするかを分析します。

文字列「require」を乱数 (Math.random()) と連結することにより、コードは「require」のように見える文字列を生成しますが、静的解析中にバンドラーが直接認識することはできません。次に、文字列がスライスされて最初の 7 文字が取得され、結果が常に「require」になるようにします (「require」 Math.random() は「require0.123456」のような結果になり、「require」にスライスされるため)。 .

これだけの手間をかけて、Node 環境で利用できる setImmediate という MacroTask を呼び出します。

setImmediate

コードの一部を非同期で実行したい場合は、

ただし、できるだけ早く、Node.js が提供する setImmediate() 関数を使用することが 1 つのオプションです。

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

setImmediate() 引数として渡される関数は、イベント ループの次の反復で実行されるコールバックです。

setImmediate の詳細については、Nodejs Docs を参照してください。

なぜバンドラーによる require の検出を避けるのですか?

ブラウザ環境には Node.js モジュールは必要ありません:

React は、Node.js 環境 (setImmediate が使用される) とブラウザ環境 (MessageChannel が使用される) を区別する必要があります。バンドラーが require を検出すると、ブラウザー バンドルに Node.js ポリフィルが自動的に組み込まれる可能性がありますが、これは不必要であり、コードが肥大化する可能性があります。

誤ってポリフィルを含めないようにします:

Webpack などのバンドラーには、require を検出したときに Node.js API のポリフィルが含まれることがよくあります。これは、React のような軽量ライブラリでは問題になります。このようなポリフィルは不要であり、環境 (ブラウザーと Node.js) を処理するための React 自体のロジックに干渉する可能性があります。

この 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 中国語 Web サイトの他の関連記事を参照してください。