web-dev-qa-db-fra.com

Comment utiliser le code du script avec type = module

Je ne peux pas comprendre pourquoi ce code trivial ne fonctionne pas:

index.html:

<!doctype HTML>
<html>

<head>
    <script type="module" src="/showImport.js"></script>
</head>

<body>
    <button onclick="showImportedMessage();">Show Message</button>
</body>

</html>

showImport.js:

import showMessage from '/show.js';

function showImportedMessage() {
    showMessage();
}

show.js:

export default "Why do I need this?";

export function showMessage() {
    alert("Hello!");
}

Il est servi par NPM http-server. Lorsque je me connecte avec Chrome (v65), je vois l'erreur suivante

(index):8 Uncaught ReferenceError: showImportedMessage is not defined
    at HTMLButtonElement.onclick ((index):8)
onclick @ (index):8

Si je me débarrasse de type=module (et importez/exportez en plaçant la fonction showMessage directement dans showImport.js) tout fonctionne, mais tout cela avait pour but d'utiliser des modules .

J'ai aussi dû ajouter que inutile export default déclaration, sans elle Chrome se plaindrait:

Uncaught SyntaxError: The requested module '/show.js' does not provide an export named 'default'

Alors qu'est-ce que je manque ici?

javascriptimportecmascript-6module
8
tromgy
  1. Dans un contexte de module, les variables ne sont pas automatiquement déclarées globalement. Vous devrez les attacher à window vous-même. Cela permet d'éviter les problèmes d'ambiguïté de portée que vous rencontriez lors de l'utilisation de balises de script normales.

  2. L'utilisation d'importation/exportation est incorrecte.

    Si vous export function xyz, vous devez import { xyz }

    Si vous export default function xyz, vous devez import xyz ou import { default as xyz }

    Voir cet article pour plus d'informations sur la syntaxe du module.

Dans cet esprit, voici ce que vous obtiendriez.

showImport.js:

import { showMessage } from '/show.js'

window.showImportedMessage = function showImportedMessage() {
    showMessage()
}

show.js:

export function showMessage() {
    alert("Hello!")
}
24
kingdaro