web-dev-qa-db-fra.com

ES6 dans le navigateur: Uncaught SyntaxError: Importation de jeton inattendue

Je suis nouveau à ES6 (ECMAScript 6), et j'aimerais utiliser son système de module dans le navigateur. J'ai lu que ES6 est supporté par Firefox et Chrome, mais je reçois l'erreur suivante avec export

Uncaught SyntaxError: Unexpected token import

J'ai un fichier test.html

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

et un fichier test.js

'use strict';

class Test {

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

export Test;

Pourquoi?

javascriptmoduleecmascript-6
66
cdarwin

De nombreux navigateurs modernes prennent désormais en charge les modules ES6. Tant que vous importez vos scripts (y compris le point d’entrée dans votre application) à l’aide de <script type="module" src="...">, cela fonctionnera.

Jetez un oeil à caniuse.com pour plus de détails: https://caniuse.com/#feat=es6-module

42
vullnetyy

Vous pouvez essayer les modules ES6 dans Google Chrome Beta (61)/Chrome Canary.

Implémentation de référence de ToDo MVC par Paul Irish - https://paulirish.github.io/es-modules-todomvc/

J'ai une démo basique -

//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>

J'espère que ça aide!

48
Roopesh Reddy

Malheureusement, de nombreux navigateurs ne prennent actuellement en charge les modules.

Cette fonctionnalité commence tout juste à être implémentée dans les navigateurs de manière native pour le moment. Il est implémenté dans de nombreux transpilers, tels que TypeScript et Babel, et dans des bundles tels que Rollup et Webpack.

Trouvé sur MDN

25
t3h2mas

cela a fonctionné pour moi en ajoutant type="module" au script importing my 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>

Voir la démo: https://codepen.io/abernier/pen/wExQaa

7
abernier