Moduli ES6 nel browser: Errore di sintassi non rilevato: importazione di token imprevista

86

Sono nuovo su ES6 (ECMAScript 6) e mi piacerebbe utilizzare il suo sistema di moduli nel browser. Ho letto che ES6 è supportato da Firefox e Chrome, ma ricevo il seguente errore utilizzandoexport

Uncaught SyntaxError: Unexpected token import

Ho un file test.html

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

e un file test.js

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

Perché?

— cdarwin
fonte

I moduli ES6 non sono ancora supportati nel browser. Inoltre stai ancora caricando uno script, non un modulo.

— Bergi

3

Continuo a non capire la differenza tra uno script e un modulo

— cdarwin

Vedi qui

— Bergi

20

La parte importante che ho notato è <script type="module"></script>assicurarti di aggiungerla altrimenti otterrai quell'errore. Sbattevo continuamente la testa contro il muro facendo <script>import ... </script>consapevolmente che ora si dice che chrome supporti i moduli ES6 senza flag, poi ho notato che l'attributo type era necessario per specificare al browser che si tratta di un modulo ES6, senza il quale lo ottieni esattamente errore.

— Emmanuel Mahuni

1

Sto usando Chrome 68, vedo ancora questo errore quando usiamo import * from

— Integration

66

Molti browser moderni ora supportano i moduli ES6. Finché importi i tuoi script (incluso il punto di accesso alla tua applicazione), utilizzarlo <script type="module" src="...">funzionerà.

Dai un'occhiata a caniuse.com per maggiori dettagli: https://caniuse.com/#feat=es6-module

— vullnetyy
fonte

53

Puoi provare i moduli ES6 in Google Chrome Beta (61) / Chrome Canary.

Implementazione di riferimento di ToDo MVC di Paul Irish - https://paulirish.github.io/es-modules-todomvc/

Ho una demo di base -

//app.js
import {sum} from './calc.js'

console.log(sum(2,3));

//calc.js
let sum = (a,b) => { return a + b; }

export {sum};

<html> 
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>ES6</h1>
        <script src="app.js" type="module"></script>
    </body>

</html>

Spero che sia d'aiuto!

— Roopesh Reddy
fonte

33

Esatto ... La parte importante che ho notato è <script type="module"></script>assicurarti di aggiungerla altrimenti otterrai quell'errore. Sbattevo continuamente la testa contro il muro facendo <script>import ... </script>consapevolmente che ora si dice che chrome supporti i moduli ES6 senza flag, poi ho notato che l'attributo type era necessario per specificare al browser che si tratta di un modulo ES6.

— Emmanuel Mahuni

1

{"message": "Uncaught SyntaxError: Unexpected token {", "filename": " stacksnippets.net/js ", "lineno": 24, "colno": 8}

— hoogw

4

Ho ricevuto l'errore precedente eseguendo lo snippet di codice sopra, usa chrome v67, perché?

— Hoogw

@hoogw Stackoverflow ha aggiunto lo snippet di codice Esegui automaticamente. Questo codice non può essere eseguito così com'è. Devi copiare il codice in index.html e separare i file .js come mostrato sopra e provare nel browser!

— Roopesh Reddy

Grazie utile risposta. Ho rimosso lo snippet runner per te. (Come ho visto gli snippet StackOverflow non possono avere più di una jsfonte).

— Mir-Ismaili

25

Sfortunatamente, i moduli non sono supportati da molti browser in questo momento.

Questa funzione sta appena iniziando ad essere implementata nei browser in modo nativo in questo momento. È implementato in molti transpiler, come TypeScript e Babel, e in bundle come Rollup e Webpack.

Trovato su MDN

— t3h2mas
fonte

Ho letto che questa funzione è stata implementata in una domanda Sof, ma la fonte MDN è effettivamente più affidabile.

— cdarwin

Secondo il seguente link, Chrome 61 dovrebbe supportare l'importazione - non è così. medium.com/dev-channel/…

— Marc

4

Devi aggiungere type = "module" al tuo tag script.

— smohadjer

10

ha funzionato per me aggiungendotype="module" allo script importil mio mjs:

<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'

console.log(module.default()) // Prints: Hi from the default export!
</script>

Guarda la demo: https://codepen.io/abernier/pen/wExQaa

— abernier
fonte