Contourner la détection par les bundlers de l'instruction require

Dans cet article, nous analysons comment le code source de React contourne la détection de l'instruction require par les bundlers.

En concaténant la chaîne « require » avec un nombre aléatoire (Math.random()), le code génère une chaîne qui ressemble à « require », mais n'est pas directement reconnaissable par le bundler lors de l'analyse statique. La chaîne est ensuite découpée pour obtenir les 7 premiers caractères, garantissant que le résultat est toujours « require » (puisque « require » Math.random() donnera quelque chose comme « require0.123456 », qui est découpé en « require ») .

Tous ces problèmes pour invoquer une MacroTask appelée setImmediate qui est disponible dans l'environnement Node.

setImmediate

Lorsque vous souhaitez exécuter un morceau de code de manière asynchrone,

mais dès que possible, une option consiste à utiliser la fonction setImmediate() fournie par Node.js :

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

Toute fonction passée en argument setImmediate() est un rappel qui est exécuté lors de la prochaine itération de la boucle d'événements.

En savoir plus sur setImmediate sur Nodejs Docs.

Pourquoi éviter que les bundlers ne détectent les besoins ?

Les environnements de navigateur n'ont pas besoin de modules Node.js :

React doit faire la différence entre l'environnement Node.js (où setImmediate est utilisé) et l'environnement du navigateur (où MessageChannel est utilisé). Si un bundler détecte un besoin, il peut automatiquement inclure un polyfill Node.js dans le bundle du navigateur, ce qui est inutile et peut gonfler le code.

Évitez l'inclusion accidentelle de polyfill :

Les bundlers, comme Webpack, incluent souvent des polyfills pour les API Node.js lorsqu'ils en détectent le besoin. Ceci est problématique pour une bibliothèque légère comme React, où de tels polyfills sont inutiles et peuvent interférer avec la propre logique de React pour la gestion des environnements (navigateur vs Node.js).

Cette enqueueTask est une méthode de secours utilisée dans 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 est un module principal de Node.js. Il fournit un ensemble de fonctions de minuterie qui peuvent être utilisées pour planifier l'exécution de code à des intervalles spécifiques ou après un délai. Ces fonctions sont similaires aux fonctions de minuterie globale dans

JavaScript (comme setTimeout et setInterval), mais ils sont fournis dans le cadre du module timers pour plus de contrôle et de précision.

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

À propos de nous :

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Développez les compétences de votre équipe avec nos cours avancés basés sur l'architecture de base de code. Contactez-nous à hello@thinkthroo.com pour en savoir plus !

Références :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!