javascript - importul ES2015 nu funcționează (nici măcar la nivel superior) în Firefox

Acestea sunt fișierele mele de probă:

<!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");

Când încarc pagina în Firefox 46, aceasta returnează

SyntaxError: declarațiile import pot apărea doar la nivelul superior al unui modul

dar nu sunt sigur cât de mult mai sus la nivel de top poate ajunge declarația import aici. Este această eroare ceva înșelător și pur și simplu import/export nu este încă suportat?

Răspuns #1

De fapt, eroarea pe care ai primit-o a apărut pentru că trebuie să specifici în mod explicit că încarci un modul - abia atunci este permisă utilizarea modulelor:

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

L-am găsit în acest document despre utilizarea importului ES6 în browser. Lectură recomandată.

Complet compatibil în acele versiuni de browser (și ulterior; lista completă pe caniuse.com):

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

În browsere mai vechi s-ar putea să fie nevoie să activați câteva flaguri în browsere:

  • Chrome Canary 60 - în spatele indicatorului Experimental Web Platform în chrome:flags.
  • Firefox 54 - setarea dom.moduleScripts.enabled în about:config.
  • Edge 15 - în spatele setării Experimental JavaScript Features din about:flags.

Răspunsul #2

Aceasta nu mai este exactă. Toate browserele actuale suportă acum modulele ES6

Răspuns original mai jos

De la import pe MDN:

Această funcționalitate nu este implementată nativ în niciun browser în acest moment. Este implementată în multe transpiler-e, cum ar fi Traceur Compiler, Babel sau Rollup.

Browserele nu suportă import.

Iată tabelul de suport pentru browsere:

Dacă vrei să imporți module ES6, aș sugera să folosești un transpilator (de exemplu, babel).

Răspunsul #3

Modulele funcționează doar prin HTTP(s), nu local

Dacă încerci să deschizi o pagină web local, prin protocolul file://, vei observa că directivele import/export nu funcționează. Folosește un server web local, cum ar fi static-server, sau utilizează funcționalitatea „live server” a editorului tău, cum ar fi extensia VS Code Live Server, pentru a testa modulele.

Puteți să consultați aici: https://javascript.info/modules-intro

Extensie Live server pentru VS Code link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer