web-dev-qa-db-fra.com

L'importation ES2015 ne fonctionne pas (même au plus haut niveau) dans Firefox

Voici mes exemples de fichiers:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

Lorsque je charge la page dans Firefox 46, il renvoie "SyntaxError: les déclarations d'importation ne peuvent apparaître qu'au niveau supérieur du module" - mais je ne suis pas sûr de combien l'instruction d'importation peut obtenir davantage ici. Cette erreur est-elle une erreur, et l’import/export n’est-il tout simplement pas encore pris en charge?

javascriptfirefoxecmascript-6
62
Christoph Burschka

En fait, l'erreur que vous avez eu est due au fait que vous devez indiquer explicitement que vous chargez un module. L'utilisation des modules est alors uniquement autorisée:

<script src="t1.js" type="module"></script>

Je l'ai trouvé dans ce document sur l'utilisation de l'importation ES6 dans un navigateur . Lecture recommandée.

Entièrement pris en charge dans les versions de navigateur (et ultérieures; liste complète sur caniuse.com ):

  • Firefox 60
  • Chrome (bureau) 65
  • Chrome (Android) 66
  • Safari 1.1

Dans les anciens navigateurs, vous devrez peut-être activer certains indicateurs dans les navigateurs:

  • Chrome Canary 60 - derrière l'indicateur de la plateforme Web expérimentale dans chrome:flags.
  • Firefox 54 - dom.moduleScripts.enabled paramétrage dans about:config.
  • Edge 15 - derrière le paramètre Fonctionnalités JavaScript expérimentales dans about:flags.
96
Tomáš Zato

Ce n'est plus exact. Tous les navigateurs actuels supportent maintenant les modules ES6

Réponse originale ci-dessous

De import sur MDN :

Cette fonctionnalité n'est implémentée dans aucun navigateur de manière native pour le moment. Il est implémenté dans de nombreux transpileurs, tels que Traceur Compiler, Babel ou Rollup.

Les navigateurs ne supportent pas import.

Voici la table de support du navigateur:

enter image description here

Si vous souhaitez importer des modules ES6, je vous suggérerais d'utiliser un transpiler (par exemple, babel ).

13
Josh Beam

vous devez spécifier son type dans le script et l'export doit être default ..for ex dans votre cas, cela devrait être,

<script src='t1.js' type='module'>

pour t2.js, utilisez default après export comme ceci, export default: 'ici votre expression va' (vous ne pouvez pas utiliser variable ici) . vous pouvez utiliser une fonction comme celle-ci,

export default function print(){ return console.log('hello world');}

et pour l’import, votre syntaxe d’import devrait être comme ceci, import print from './t2.js' (utiliser l’extension de fichier et ./ pour le même répertoire) .. J'espère que cela vous sera utile !

0
S. K. Biswas