Utilisation des modules ES dans le navigateur aujourd'hui-js tutoriel-php.cn

Utilisation des modules ES dans le navigateur aujourd'hui

Jennifer Aniston

Libérer： 2025-02-15 10:26:12

original

206 Les gens l'ont consulté

Utilisation des modules ES dans les navigateurs: statut actuel et futur

Using ES Modules in the Browser Today

Points de base:

ES6 (ES2015) a introduit la norme du module natif JavaScript, mais initialement, les développeurs LED du navigateur sont initialement médiocres à utiliser des chargeurs de modules pour regrouper les dépendances dans un seul fichier de navigateur compatible ES5.
Les navigateurs traditionnels tels que Safari, Chrome, Firefox et Edge prennent désormais en charge la syntaxe import du module ES6, permettant une structure de code plus efficace et standardisée.
Bien que le support du module ES6 continue de s'améliorer, les outils de construction tels que Babel et WebPack sont toujours indispensables à mesure que les navigateurs continuent d'être optimisés. En combinant les capacités de streaming multi-ressources de HTTP2 et les capacités de préchargement du navigateur, le module ES devrait apporter des améliorations de performances significatives.
Bien que vous puissiez maintenant utiliser le module ES directement dans les navigateurs modernes sans avoir besoin d'un traducteur ou d'un bundler, il est toujours recommandé de créer des packages séparés pour les navigateurs plus anciens. De plus en plus de bibliothèques commencent à être publiées sous forme de modules ES, mais ils sont toujours principalement destinés aux bundlers plutôt qu'aux importations directes.

Cet article montrera comment utiliser le module ES dans le navigateur d'aujourd'hui.

Avant récemment, JavaScript n'avait pas le concept de modules. Il est impossible de référencer directement ou d'inclure un fichier JavaScript dans un autre fichier. À mesure que la taille et la complexité de l'application augmentent, cela rend l'écriture JavaScript pour les navigateurs délicat.

Une solution courante consiste à utiliser

// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}</pre>Copier après la connexion

ou comme script externe:

<🎜></pre>Copier après la connexion

Copier après la connexion

// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</pre>Copier après la connexion

Copier après la connexion

type="module" Ajoutez simplement </pre> <p> <strong> à votre

import exigences file:// npx serve

Vous avez besoin d'un serveur pour utiliser

pour l'extraction, car il ne fonctionne pas avec le protocole

. Vous pouvez utiliser

pour démarrer un serveur dans le répertoire actuel pour les tests locaux. browser-es-module-loader

Si vous souhaitez charger des modules ES sur un domaine différent, vous devez activer les COR.

Si vous êtes assez audacieux pour essayer ceci en production maintenant, vous devez toujours créer des packages séparés pour les navigateurs plus anciens. Un polyfill est fourni dans qui suit la spécification. Cependant, cela n'est pas du tout recommandé pour les environnements de production.

Performance

Ne jetez pas les outils de construction comme Babel et WebPack immédiatement, car les navigateurs implémentent toujours des méthodes pour optimiser l'extraction. Néanmoins, il y a encore des pièges de performance et des avantages dans l'utilisation future des modules ES.

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2769

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2903

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2427

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...