Une brève discussion sur la façon d'exécuter Node.js localement dans le navigateur

Cet article vous présentera comment exécuter Node.js localement dans le navigateur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Apprentissage recommandé : "Tutoriel nodejs"]

Tout commence dès la réception d'un email

Tôt le matin, j'ai reçu un e-mail m'informant qu'il travaillait avec les équipes de Next.js et de Google pour développer une nouvelle technologie

• Il y a quelques années. , StackBlitzRéalisez que le Web se dirige vers un point d’inflexion critique. L'émergence de WebAssembly et de nouvelles API fonctionnelles rend possible l'écriture d'un système d'exploitation basé sur WebAssembly suffisamment puissant pour exécuter Node.js entièrement dans le navigateur. Nous envisageons un environnement de développement avancé qui est plus rapide, plus sécurisé et cohérent que les environnements locaux pour permettre une collaboration transparente en matière de code sans avoir besoin de configurer un environnement local

Nom technique :WebContainers

• Les WebContainers vous permettent de créer des environnements Node.js complets qui peuvent être lancés en quelques millisecondes et instantanément en ligne et partagés par des liens en un seul clic. Cet environnement possède la puissante expérience d'édition de VS Code, un terminal complet, npm et d'autres fonctions. Il s'exécute également entièrement dans votre navigateur, ce qui présente certains avantages clés :
• Plus rapide que les environnements natifs. Les constructions sont jusqu'à 20 % plus rapides et les installations en rouleaux sont plus de 5 fois plus rapides par rapport au fil/npm.
• Débogage Node.js dans le navigateur. L'intégration transparente avec Chrome DevTools permet un débogage backend natif, aucune installation ou extension requise.
• La valeur par défaut est sûre. Toute exécution de code s'effectue dans le bac à sable sécurisé du navigateur, et non sur une VM distante ou un binaire local.

• Encore une fois, ces environnements ne fonctionnent pas sur des serveurs distants. Au lieu de cela, chaque environnement est entièrement contenu dans votre navigateur Web. C'est vrai : pour la première fois, le runtime Node.js lui-même s'exécute nativement dans le navigateur.

  Désormais, WebContainers est désormais en version bêta publique. La prise en charge actuelle inclut Next.js, GraphQL et Vanilla Node.js, et nous travaillons avec d'autres projets open source pour étendre la prise en charge

Pourquoi il y a WebContainers

Sécurité

• StackBlitz résout ces problèmes en tirant parti de décennies d'innovation en matière de vitesse et de sécurité dans les navigateurs. Tous les calculs dans StackBlitz s'effectuent immédiatement dans le bac à sable de sécurité du navigateur et ne peuvent pas être déployés sur votre ordinateur local. Le modèle débloque également certains avantages clés en matière de développement et de débogage (et d’autres sont disponibles en quelques secondes).

Libérez la puissance de votre navigateur

• Débogage transparent de Node.js avec Chrome DevTools

  • Il s'avère que les navigateurs sont vraiment doués pour déboguer Javascript. Je sais, c'est choquant ;) L'intégration avec Chrome DevTools fonctionne immédiatement en exécutant Node.js dans le navigateur. Aucune installation, aucune extension, juste un débogage backend natif dans votre navigateur

Exécutez le serveur dans votre navigateur Dans l'appareil

• en fait. Les WebContainers contiennent une pile réseau TCP virtuelle qui est mappée à l'API ServiceWorker du navigateur, vous permettant de créer un serveur Node.js en direct à la volée et de continuer à travailler même lorsque vous êtes hors ligne. Parce qu'il fonctionne entièrement dans le bac à sable de sécurité du navigateur, le serveur répond avec moins de latence que localhost (!) et protège votre serveur Web contre les attaques de scraping localhost
• Temps de démarrage en millisecondes

• Chaque page des charges avec un environnement complètement nouvel

  • Au revoir rm -rf node_modules ! Le client npm intégré de WebContainer est si rapide qu'il exécute une nouvelle installation à chaque chargement de la page, vous garantissant ainsi un environnement propre à chaque fois. Si quelque chose ne va pas avec votre environnement, vous pouvez revenir à un état propre comme vous le feriez pour n'importe quelle autre application Web : cliquez sur le bouton Actualiser
• Avec StackBlitz, vous pouvez vous entraîner n'importe où Continuez à travailler sans connexion Internet, dans un avion ou sur la banquette arrière sous la pluie

Grâce au nouveau modèle informatique de StackBlitz, 100 % de l'exécution du code se produit dans le sable, sécurisé par le navigateur, dans la boîte. Cela se traduit par un environnement de développement plus rapide et moins restrictif que sur site tout en offrant une plus grande sécurité, une combinaison très rare.

• En fait, la posture de sécurité par défaut est si solide que notre gestionnaire de paquets intégré est le premier outil accessible au public pour résoudre les problèmes non résolus de Sam depuis plus de cinq ans. La vulnérabilité npm non résolue depuis longtemps de Saccone

• Encore une fois, ces environnements ne fonctionnent pas sur des serveurs distants. Au lieu de cela, chaque environnement est entièrement contenu dans votre navigateur Web. C'est vrai : pour la première fois, le runtime Node.js lui-même s'exécute nativement dans le navigateur

  écrit à la fin

• WebAssembly suffisamment puissant pour écrire un système d'exploitation, mais cela temps WebContainersDonner la direction de l'utilisation de cette technologie à Node.js, je pense que c'est d'une importance historique
• À mon avis, la principale direction d'application de cette technologie à l'avenir est de permettre aux gens du monde entier monde Le logiciel fonctionne dans des endroits où il ne pouvait pas fonctionner auparavant. À l'avenir, il vous suffira peut-être d'installer un navigateur Google Chrome sur votre ordinateur

Pour en savoir plus. connaissances liées à la programmation, veuillez visiter : Vidéo de programmation  ! !

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!